Being efficient in your workflow and decreasing the time required for common tasks is never a bad thing. In this article I’ll be discussing Yeoman; a scaffolding tool that can help improve your workflow from package management to development to deployment. Preparing new projects with instant best practices and tools to stay productive just became extremely painless and straight forward.
What is it?
According to Yeoman’s documentation Yeoman is explained as the following…
Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.
…The Yeoman workflow comprises three types of tools for improving your productivity and satisfaction when building a web app: the scaffolding tool (yo), the build tool (Grunt or Gulp) and the package manager (Bower, NPM).
If we break up each part that comprises Yeoman it equates to a scaffolder, a build system and a package manager (handling downloading and updating of assets such as jQuery, Bootstrap and Normalize). All this equals productivity and the highest of fives all around as you develop and deploy.
How it improves your workflow
Improving your workflow so developers can spend less time on process and more time focusing on building beautiful web based products is the primary reason to use a tool such as Yeoman. Let’s say on deployment of a project you want script references concatenated, minified as one file and the reference(s) replaced with a cache bust string. For example, you may have something like this in your development file…
<!-- Development File --> <script src="js/script1.js"></script> <script src="js/script2.js"></script> <script src="js/script3.js"></script>
All these script references above will be converted to the following for production deployments by running something like a custom Grunt task called “grunt deploy“ from the command line giving us this script reference replaced in the production file like this…
<!-- Production File --> <script src="js/scripts.min.3456879.js"></script>
Yeoman also helps scaffold out an initial build/dev tasks like spinning up a development server, reloading the browser on file changes, minifying HTML for production, controlling output and much, much more. Essentially Yeoman is laying out a foundation for typical developer needs and tasks so you, the developer, can get to work faster.
When starting a new Yeoman project it uses what’s called a “Generator.” A generator is essentially a boilerplate of pre-made structure and pre-written tasks for your particular workflow. You can find a full list of generators available for Yeoman here. For developers that desire something more custom you can create custom generators too!
Now that we understand what Yeoman can do for us, let’s jump over to the command line so we can begin the installation process. If you’re coming from a fresh installation ensure your system is setup correctly to avoid any sudo permission issues. Windows users should also verify Git, Ruby and other dependencies required by a generator are installed before executing any of the above commands. When using a generator take note of the README that usually lists these dependencies required in order to install the generator. Remember generators are a completely separate thing entirely and not something pre-built into Yeoman.
Assuming you have everything in place for installation you can run through the following commands to start your first Yeoman project using the webapp generator.
$ mkdir yeoman-project $ cd yeoman-project $ npm install -g yo bower grunt-cli $ npm install -g generator-webapp $ yo webapp
Explaining these commands in detail we begin by making a new project directory, then traversing into this created directory (
cd command), installing yeoman/bower & grunt globally to our system, installing the webapp generator and finally executing
yo webapp to generate the scaffolding. Since
webapp is a generator you must install it first and the reason why we run
npm install -g generator-webapp before executing
Now let’s take a look at what happens once we run a generators command such as
yo webapp in our case. Running that command will give us the following…
$ yo webapp _-----_ | | |--(o)--| .--------------------------. `---------´ | Welcome to Yeoman, | ( _´U`_ ) | ladies and gentlemen! | /___A___\ '__________________________' | ~ | __'.___.'__ ´ ` |° ´ Y ` Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app. ? What more would you like? ◯ Bootstrap ❯◉ Sass ◉ Modernizr ? What more would you like? Sass, Modernizr ? Would you like to use libsass? Read up more at https://github.com/andrew/node-sass#node-sass: (y/N) y create Gruntfile.js create package.json create .gitignore create .gitattributes create .bowerrc create bower.json create .jshintrc create .editorconfig create app/styles/main.scss create app/favicon.ico create app/robots.txt create app/index.html create app/scripts/main.js invoke mocha I'm all done. Running bower install & npm install for you to install the required dependencies. If this fails, try running the command yourself. create test/bower.json create test/.bowerrc create test/spec/test.js create test/index.html
Examining the output of
yo webapp we’ll see an entire scaffolding of files and directories are created for us magically by unicorns and fairies.
Take special note with this particular generator as it is using Grunt. Now we can simply execute
grunt serve from the command-line that will fire up the site on
http://localhost:9000 automatically in the browser. Pretty cool right?
Anytime you need to update Yeoman you can type
yo -v that will examine Yeoman’s current version. If you’re out of date then Yeoman will be frank about it and let you know.
$ yo -v _-----_ | | .------------------------------------------. |--(o)--| | Update available: 1.4.2 (current: 1.2.1) | `---------´ | Run npm update -g yo to update. | ( _´U`_ ) '------------------------------------------' /___A___\ | ~ | __'.___.'__ ´ ` |° ´ Y `
If you’d like to see a project using Yeoman head over to this GitHub Repo for a deeper look into an actual Yeoman project that also uses the
git subtree command documented by Yeoman in order to deploy production code to another branch entirely!
Take the extra time to set aside getting to know a better tooling workflow that will dramatically improve your daily and routine tasks so you can not only get to work faster, but enjoy what you do that much more.