@breadcrum/extract-meta

<html lang="en"> <head> <meta charset="utf-8"> <title>Using Yeoman to scaffold out new websites—blog.ParkJi.co.uk</title> <link href='http://fonts.googleapis.com/css?family=Fenix' rel='stylesheet'> <link rel="stylesheet" href="http://assets.parkji.co.uk/css/styles.min.css">  <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-25124123-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <div class="wrapper"> <header class="site-header"> <a href="/" class="brand site-logo"> Blog.ParkJi.co.uk </a> </header> <nav> <ul class="nav site-nav"> <li> <a href="http://parkji.co.uk/">Home</a> </li> <li> <a href="/" class="active">Blog</a> </li> <li> <a href="http://parkji.co.uk/#work">Work</a> </li> <li> <a href="http://parkji.co.uk/about">About</a> </li> </ul> </nav> <div class="content separated grid"> <article class="grid--item three-quarters mobile-one-whole"> <h1>Using Yeoman to scaffold out new websites</h1> Recently I've been playing around with <a href="http://yeoman.io/">Yeoman</a>, a web scaffolding tool. If you've never heard of it before, or are unfamiliar with it, stop right now <abbr title="and">&</abbr> go check it out! From first impressions Yeoman seemed geared towards scaffolding JavaScript based single page applications, however the basic functionality of a <a href="http://yeoman.io/generators.html">generator</a> is to copy files, make directories etc., so I decided to make one I could use when starting a new project. I followed the <a href="http://yeoman.io/generators.html#writing-your-first-generator">documentation</a> to generate my generator, giving it the name <code>parkji-vanilla</code> (the <code>generator-</code> is automatically added by <code>generator-generator</code>). One of the great things about yeoman generators is that they can run <code>bower install</code> <abbr title="and">&</abbr> <code>npm install</code> after they've finished scaffolding, thereby saving you the effort (granted, this is minimal effort). <h2>Prompts</h2> I wanted my generator to ask for two things when it ran: <ol> <li>The name of the website</li> <li>The type of website (static, Perch etc.)</li> </ol> Asking for the name was really easy, I just added the following object to the <code>prompts</code> array: <div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript">{ name: 'siteName', message: 'What is the name of this website?' } </code></pre></div> Prompting for the type required a bit of digging around because I wanted to list out the different types <abbr title="and">&</abbr> then choose from these, rather than have to type it in <abbr title="and">&</abbr> validate it. Yeoman uses <a href="https://github.com/SBoudrias/Inquirer.js">Inquirer.js</a> for prompts so I took a look at the docs <abbr title="and">&</abbr> realised that I needed to use the <code>list</code> type, like so: <div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript">{ type: 'list', name: 'framework', message: 'What sort of site are you building?', choices: [ {name: "Static", value: "static"}, {name: "Perch", value: "perch"} ], default: 'static' } </code></pre></div> <h2>Generator prototype methods</h2> By default generators created using <code>generator-generator</code> will have an <code>app</code> method, I cleared out the example commands <abbr title="and">&</abbr> added the code below: <div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript">ParkjiVanillaGenerator.prototype.app = function app() { this.template('package-config/_bower.json', 'bower.json'); this.template('package-config/_package.json', 'package.json'); this.copy('Gruntfile.js', 'Gruntfile.js'); this.directory('stylesheets', 'stylesheets'); this.copy('robots.txt', 'web/robots.txt'); this.template('humans.txt', 'web/humans.txt'); this.mkdir('web'); }; </code></pre></div> Most of the calls in this are self-explanatory, but it's worth noting that <code>template</code> is special because it will inject the arguments into the file, if required. For example, the <code>_bower.json</code> template file I created has the line <div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript">"name": "<%= _.slugify(siteName) %>", </code></pre></div> <code>template()</code> will ensure that this becomes <div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript">"name": "the-name-entered-at-prompt-in-slug-format". </code></pre></div> There are other string commands that you can use, the docs for which can be seen <a href="https://github.com/epeli/underscore.string">here</a>. I decided to have different methods for each different website type with each one checking the chosen type before creating files if necessary. This seems to fit in with the yeoman way of doing things <abbr title="and">&</abbr> it makes the code easier to follow since the code for each type is separate from the others. <div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript">ParkjiVanillaGenerator.prototype.installStatic = function installStatic() { if (this.framework == 'static') { this.copy(this.framework + '/gitignore', '.gitignore') this.template(this.framework + '/index.html', 'web/index.html'); this.template(this.framework + '/vhost.conf', 'vhost.conf'); } }; ParkjiVanillaGenerator.prototype.installPerch = function installPerch() { if (this.framework == 'perch') { this.copy(this.framework + '/gitignore', '.gitignore') this.template(this.framework + '/index.php', 'web/index.php'); this.template(this.framework + '/vhost.conf', 'vhost.conf'); } }; </code></pre></div> <h2>Running the generator</h2> First up, it's important to note that if the generator isn't in the global <code>node_modules</code> directory, <code>yo</code> won't be able to find it, this can be fixed by running <div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript">npm link </code></pre></div> in the generator directory. It'll create a symlink to your generator in the global <code>node_modules</code> directory for you. Now the generator can be run with: <div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript">yo parkji-vanilla </code></pre></div> Here's a <a href="http://showterm.io/3c9d423a1c0d85a6660a0">showterm</a> of this in action. <h2>Tests</h2> By default the <code>generator-generator</code> will create a <code>test</code> directory for you <abbr title="and">&</abbr> add some example test files too. These tests use the <a href="http://visionmedia.github.io/mocha/">mocha</a> test framework. I found that I didn't really have to alter the example tests too much since my generator was very simple anyway. I did however want to check that the templated files had the correct <code>siteName</code> value inserted, this can be done by using an array with two values the first being the file name, the second being a regular expression that you expect be found within that file. E.g. my list of expected files for the static type looks like this: <div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript">var expected = [ ['web/index.html', /<title>Static Test<\/title>/], ['vhost.conf', /ServerName StaticTest\.localhost/], '.gitignore' ]; </code></pre></div> This array is then passed to the <code>helpers.assertFiles()</code> method. Here's the full test for the generic files that my generator should create: <div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript">it('creates expected files', function (done) { var expected = [ ['bower.json', /"name": "testing"/], ['package.json', /"name": "testing"/], 'Gruntfile.js', 'web', 'stylesheets', 'web/robots.txt', ['web/humans.txt', /Testing/] ]; helpers.mockPrompt(this.app, { 'siteName': 'Testing' }); this.app.options['skip-install'] = true; this.app.run({}, function () { helpers.assertFiles(expected); done(); }); }); </code></pre></div> The tests can be run by executing <div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript">npm test </code></pre></div> Also, the <code>generator-generator</code> will create a travis config file for you, which means that you can hook your repo up to it <abbr title="and">&</abbr> have continuous integration. <h2>Repository</h2> My generator can be found on github - <a href="https://github.com/parkji/generator-parkji-vanilla">https://github.com/parkji/generator-parkji-vanilla</a>. <h2>Comments</h2> <div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'parkjiblog'; // required: replace example with your forum shortname // The following are highly recommended additional parameters. Remove the slashes in front to use. // var disqus_identifier = 'unique_dynamic_id_1234'; // var disqus_url = 'http://example.com/permalink-to-page.html'; /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> <a href="http://disqus.com" class="dsq-brlink">blog comments powered by Disqus</a> </article> <section class="grid--item one-quarter mobile-one-whole"> <h2>About ParkJi</h2> <img class="standout" src="/images/me.jpg" alt="Me!" /> My name is Ben Parker, I'm a 25 year old PHP web developer with a passion for web design, standards & new & innovative technologies. </section> </div> </div> <footer class="site-footer"> © Ben Parker 2014 Powered by <a href="http://pages.github.com" title="Github Pages">github:pages</a> & <a href="https://github.com/mojombo/jekyll/wiki" title="Jekyll">Jekyll</a> </footer> <script src="http://assets.parkji.co.uk/js/prism.min.js"></script> </body> </html>