@breadcrum/extract-meta
Version:
Extract various metadata from html
247 lines (219 loc) • 14.6 kB
HTML
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>yeoman | codelittle_</title>
<meta name="description" content="Designer Gone Programmer Documents What He Learns.">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://codelittle.com/xmlrpc.php">
<meta name="keywords" content="Ruby, Sinatra, Rails, Python, Django, C++, Vim, Code, Little, Object Oriented Programming, Design, Software, Development, Programming, Tutorials, Tutorial">
<link rel="alternate" type="application/rss+xml" title="codelittle_ » Feed" href="http://codelittle.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="codelittle_ » Comments Feed" href="http://codelittle.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="codelittle_ » yeoman Tag Feed" href="http://codelittle.com/tag/yeoman/feed/" />
<link rel='stylesheet' id='codelittle_-style-css' href='http://codelittle.com/wp-content/themes/codelittle_/style.css?ver=3.8.1' type='text/css' media='all' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://codelittle.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://codelittle.com/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 3.8.1" />
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #ffffff; }
</style>
<style type="text/css" id="syntaxhighlighteranchor"></style>
</head>
<body class="archive tag tag-yeoman tag-16 custom-background">
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div class="row">
<div class="columns-12">
<div class="site-branding">
<h1 class="site-title"><a href="http://codelittle.com/" rel="home">codelittle_</a></h1>
<h2 class="site-description">Designer Gone Programmer Documents What He Learns.</h2>
</div>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h1 class="menu-toggle">Menu</h1>
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a title="This link will take you to my Twitter account where we can talk." href="http://twitter.com/preist">Get In Touch On Twitter</a></li>
</ul></div> </nav><!-- #site-navigation -->
</div><!-- end .columns-12 -->
</div><!-- .row -->
</header><!-- #masthead -->
<div id="content" class="site-content row">
<div class="columns-12">
<section id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<header class="page-header">
<h1 class="page-title">
yeoman </h1>
</header><!-- .page-header -->
<article id="post-82" class="post-82 post type-post status-publish format-standard hentry category-learn tag-bower tag-compass tag-development tag-foundation tag-grunt tag-node-js tag-tools tag-workflow tag-yeoman tag-yo tag-zurb-foundation">
<header class="entry-header">
<h1 class="entry-title"><a href="http://codelittle.com/yeoman-intro/" rel="bookmark">How To Use Yeoman</a></h1>
<div class="entry-meta">
<span class="posted-on">Posted on <a href="http://codelittle.com/yeoman-intro/" rel="bookmark"><time class="entry-date published" datetime="2014-01-03T15:49:55+00:00">January 3, 2014</time><time class="updated" datetime="2014-01-03T17:08:55+00:00">January 3, 2014</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://codelittle.com/author/preist/">Igor</a></span></span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<p>Boilerplate code is great for speeding up work. Wouldn’t it be awesome if you could speed up the tasks you do repeatedly when you begin working on a project, like downloading the boilerplate frameworks and libraries associated with it.</p>
<p>There is just such a tool and it’s called <a title="Yeoman - Modern Workflows For Modern Webapps" href="http://yeoman.io" target="_blank">Yeoman</a>.</p>
<p><img class="alignnone size-full wp-image-95" alt="Improving Your Workflow With Yeoman" src="http://codelittle.com/wp-content/uploads/2014/01/yeoman_intro.png" width="340" height="300" /></p>
<h3>What Can Yeoman Do For You?</h3>
<p>Besides being very polite, Yeoman will generate all the boilerplate files for many types of development projects you might want to start. Here’s a short list of supported frameworks and libraries:</p>
<ul>
<li><a title="Node.js Website" href="http://nodejs.org" target="_blank">Node.js</a></li>
<li><a title="Django Project Website" href="https://www.djangoproject.com" target="_blank">Django</a></li>
<li><a title="Laravel Website" href="http://laravel.com" target="_blank">Laravel</a></li>
<li><a title="Symfony Website" href="http://symfony.com" target="_blank">Symfony</a></li>
<li><a title="HTML5 Boilerplate" href="http://html5boilerplate.com" target="_blank"><span style="line-height: 1.5em;">HTML5 Boilerplate</span></a></li>
<li><a title="Zurb Foundation" href="http://foundation.zurb.com" target="_blank">Zurb Foundation</a></li>
<li><a title="Twitter Bootstrap Website" href="http://getbootstrap.com" target="_blank">Bootstrap Foundation</a></li>
<li><a title="Angular.js Website" href="http://angularjs.org" target="_blank">Angular.js</a></li>
<li><a title="Backbone.js" href="http://backbonejs.org" target="_blank">Backbone.js</a></li>
<li><a title="Ember.js Website" href="http://emberjs.com" target="_blank">Ember.js</a></li>
<li><a title="Wordpress Website" href="http://wordpress.org" target="_blank"><span style="line-height: 1.5em;">WordPress</span></a></li>
<li><a title="Ghost Website" href="https://ghost.org" target="_blank"><span style="line-height: 1.5em;">Ghost</span></a></li>
</ul>
<h2>What do you need on your machine?</h2>
<p>To setup Yeoman you need to have the following:</p>
<ul>
<li>Node.js</li>
<li>npm (comes with Node.js)</li>
<li>Git</li>
<li>Sass (for our example)</li>
</ul>
<p>To check if you have everything, fire up your terminal and type the following:</p>
<h4>In the terminal:</h4>
<pre class="brush: bash; title: ; notranslate" title="">
node -v
# should display a node version e.g. v0.10.21
npm -v
# should display your npm version e.g. 1.3.11
git --version
# should display your git version e.g. 1.8.3.4
compass -v
# should display your compass version e.g. 0.12.2
</pre>
<p>If you don’t have Node.js, you can <a title="Node.js Downloads" href="http://nodejs.org/download/" target="_blank">download it here</a>.</p>
<h2>Installing Yeoman</h2>
<p>To install Yeoman on your machine you will also need to have <a title="Grunt Website" href="http://gruntjs.com" target="_blank">Grunt</a> and <a title="Bower Website" href="http://bower.io" target="_blank">Bower</a>.</p>
<pre class="brush: bash; title: ; notranslate" title="">
sudo npm install -g grunt-cli bower yo
# will ask for your root password
</pre>
<p>Once installed, we can search for the available application templates to find one we’d like to generate. I recommend you make your terminal window as wide for this:</p>
<h4>In the terminal:</h4>
<pre class="brush: bash; title: ; notranslate" title="">
npm search yeoman-generator
</pre>
<p>You should see a long list of generators, and for our example we will install the one called <code>generator-foundation-five</code></p>
<h4>In the terminal:</h4>
<pre class="brush: bash; title: ; notranslate" title="">
sudo npm install -g generator-foundation-five
</pre>
<h2>Creating our Zurb Foundation 5 project with Yeoman</h2>
<p>To generate our application we will go to our projects folder and create the app directory. Then we’ll run <code>yo foundation-five</code> to generate the directories and boilerplate code for our project.</p>
<h4>In the terminal:</h4>
<pre class="brush: bash; title: ; notranslate" title="">
cd /path/to/projects
# changed directory to your projects folder
mkdir yoapp
# created a directory for our new app
cd yoapp
# changed into our new app directory
yo foundation-five
# running the generator we installed earlier called generator-foundation-five
</pre>
<p>One last step, let’s run the <code>bower install</code> to pull in all the dependencies. This command is similar to <code>bundle install</code> if you are familiar with Ruby programming.</p>
<h4>In the terminal:</h4>
<pre class="brush: bash; title: ; notranslate" title="">
bower install
</pre>
<h2>Running the app</h2>
<h4>In the terminal:</h4>
<pre class="brush: bash; title: ; notranslate" title="">
grunt serve
</pre>
<p>If everything goes well, grunt will do three things:</p>
<ul>
<li>Will run a server on your <code>localhost:port_number</code></li>
<li>Will watch for any changes in the source files and compile them if necessary (e.g. from <code>scss</code> to <code>css</code>)</li>
<li>Will reload the page inside the browser when a change is detected</li>
</ul>
<p>While <code>grunt serve</code> is running open the project files in your favorite code editor and hack away at the project. Watch the browser window reload on its own every time you make a change and save a file.</p>
<p>I hope you use this on your next project.</p>
</div><!-- .entry-content -->
<footer class="entry-meta">
<!--
<span class="cat-links">
Posted in <a href="http://codelittle.com/category/learn/" title="View all posts in Learning" rel="category tag">Learning</a> </span>
-->
<span class="tags-links">
Tagged <a href="http://codelittle.com/tag/bower/" rel="tag">bower</a> <a href="http://codelittle.com/tag/compass/" rel="tag">Compass</a> <a href="http://codelittle.com/tag/development/" rel="tag">Development</a> <a href="http://codelittle.com/tag/foundation/" rel="tag">Foundation</a> <a href="http://codelittle.com/tag/grunt/" rel="tag">grunt</a> <a href="http://codelittle.com/tag/node-js/" rel="tag">Node.js</a> <a href="http://codelittle.com/tag/tools/" rel="tag">Tools</a> <a href="http://codelittle.com/tag/workflow/" rel="tag">Workflow</a> <a href="http://codelittle.com/tag/yeoman/" rel="tag">yeoman</a> <a href="http://codelittle.com/tag/yo/" rel="tag">yo</a> <a href="http://codelittle.com/tag/zurb-foundation/" rel="tag">zurb-foundation</a> </span>
<span class="comments-link"><a href="http://codelittle.com/yeoman-intro/#respond" title="Comment on How To Use Yeoman">Leave a comment</a></span>
</footer><!-- .entry-meta -->
</article><!-- #post-## -->
</main><!-- #main -->
</section><!-- #primary -->
<div id="secondary" class="widget-area grid-12" role="complementary">
<aside id="text-2" class="widget widget_text"><h1 class="widget-title">Did I get something wrong?</h1> <div class="textwidget">If you notice an error in my articles, please feel free to suggest your fix in the comments. I appreciate it.</div>
</aside> </div><!-- #secondary -->
</div><!-- end .columns-12 -->
</div><!-- #content .row -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info row">
<a href="http://wordpress.org/" rel="generator">Blog powered by WordPress</a>
<span class="sep"> | </span>
codelittle_ designed and maintained by <a href="http://twitter.com/preist" rel="designer">Igor Putina</a>. </div><!-- .site-info .row -->
</footer><!-- #colophon -->
</div><!-- #page -->
<script type='text/javascript' src='http://codelittle.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shCore.js?ver=3.0.83c'></script>
<script type='text/javascript' src='http://codelittle.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/scripts/shBrushBash.js?ver=3.0.83c'></script>
<script type='text/javascript'>
(function(){
var corecss = document.createElement('link');
var themecss = document.createElement('link');
var corecssurl = "http://codelittle.com/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css?ver=3.0.83c";
if ( corecss.setAttribute ) {
corecss.setAttribute( "rel", "stylesheet" );
corecss.setAttribute( "type", "text/css" );
corecss.setAttribute( "href", corecssurl );
} else {
corecss.rel = "stylesheet";
corecss.href = corecssurl;
}
document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );
var themecssurl = "http://codelittle.com/wp-content/themes/codelittle_/shThemeCodelittle.css?ver=3.0.83c";
if ( themecss.setAttribute ) {
themecss.setAttribute( "rel", "stylesheet" );
themecss.setAttribute( "type", "text/css" );
themecss.setAttribute( "href", themecssurl );
} else {
themecss.rel = "stylesheet";
themecss.href = themecssurl;
}
//document.getElementById("syntaxhighlighteranchor").appendChild(themecss);
document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );
})();
SyntaxHighlighter.config.strings.expandSource = '+ expand source';
SyntaxHighlighter.config.strings.help = '?';
SyntaxHighlighter.config.strings.alert = 'SyntaxHighlighter\n\n';
SyntaxHighlighter.config.strings.noBrush = 'Can\'t find brush for: ';
SyntaxHighlighter.config.strings.brushNotHtmlScript = 'Brush wasn\'t configured for html-script option: ';
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['light'] = true;
SyntaxHighlighter.defaults['pad-line-numbers'] = true;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.defaults['wrap-lines'] = false;
SyntaxHighlighter.all();
</script>
<script type='text/javascript' src='http://codelittle.com/wp-content/themes/codelittle_/js/navigation.js?ver=20120206'></script>
<script type='text/javascript' src='http://codelittle.com/wp-content/themes/codelittle_/js/skip-link-focus-fix.js?ver=20130115'></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-46803049-1', 'codelittle.com');
ga('send', 'pageview');
</script>
</body>
</html>