There are tonnes of web development tools to help front-end developers these days that it can start to become overwhelming. I know I was! (Not gonna lie!). So before we begin, I thought I would go through some of the steps of using Yeoman in my web development workflow.
First you’ll need to get a clear picture on what you’d like to achieve and what your end result will be. For me, I wanted to re-design an existing static website to make it responsive (more about RWD on a future blog post).
Now to quickly go through the Yeoman process:
What is Yeoman?
“Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications. We take care of providing everything needed to get started without any of the normal headaches associated with a manual setup.” – Yeoman
The Yeoman workflow is comprised of three core tools. These tools are:
- yo – the scaffolding tool from Yeoman
- bower – the package management tool
- grunt – the build tool
Follow the ‘Getting started’ instructions provided by Yeoman.
Here’s the gist of what to type in your Terminal / Command Line:
npm install -g yo
npm install -g generator-webapp
mkdir my-test-project
cd my-test-project
yo webapp
You should then see an interactive prompt:
Once everything has been installed by Yeoman, if you open up your project folder in a text editor (my preference is Sublime Text), you should see a whole bunch of folders and files. Don’t get too overwhelmed, here’s a simple explanation of what each folder contains:
- The app folder is where your pure, non-compiled, non-minified source code lives. The files within the app folder is where you do all your development work in. This is where you’ll find all of your HTML, JavaScript and Sass files.
- The bower components directory includes all of the dependencies for your application, such as jQuery and Modernizr. You can add more Bower packages using the install command:
bower install --save-dev
- The dist folder (or the distributable folder) is the folder to FTP as your clients’ site so it’s what you feed to the server.
Please note that you won’t see the ‘dist’ folder until after you run ‘grunt build’ (more on this later). It will have it’s own index.html, with references to minified and concatenated dist/scripts and dist/styles, and optimized dist/images.
- The node_modules folder and package.json file are part of the Grunt build. If you need further explanation, take a look at my previous blog post.
- The Gruntfile.js has all of the build, server, and test tasks defined. Behind the scenes, grunt build is a task that runs several sub-tasks. There are also plenty of useful plugins (provided by Yeoman) so here’s a brief explanation of some of the ones you probably haven’t heard or used before:
- clean: – Yeoman stores some stuff in a .tmp folder. That will be wiped out.
- connect: – Creates a local server, watches for changes to your source files, then triggers a reload in your browser.
- open: – Opens the server instance, typically localhost:9000 in your browser.
- copy: – Copies files from .tmp/ and app/ into dist/
- clean:dist: – Clears out your .tmp/ and dist/ folders
- usemin: – Updates the references in your HTML with the new files
Just to elaborate on ‘grunt-usemin‘
The grunt-usemin plugin looks for blocks inside of your app/index.html, like this:
app/index.html
<!-- build:js scripts/main.js --> http://bower_components/jquery/jquery.js http://scripts/main.js <!-- endbuild -->
After your grunt build task completes, you will end up with this:
dist/index.html
http://scripts/c155266f.main.js
It sucked those scripts up, concatenated and minified them into one JS file. Now that’s pretty awesome!
So now that you’ve gained a basic grasp of the your project’s folder structure and files, it’s time to put it all together and finally run the Grunt commands: serve, test and build!
Steps to run Grunt (as written from Yeoman):
Preview an app you have generated
grunt serve
Run the unit tests for an app.
grunt test
Build an optimized, production-ready version of your app.
grunt
And there you have it!
I hope this blog post has somewhat helped you understand how Yeoman can be utilised in your web development workflow to create sites and web apps.
Sources:
- Yeoman
- Bower
- Grunt
- Building Apps With the Yeoman Workflow
Tuts + Code Tutorials - Improving Your Development Workflow with Yeoman
Treehouse Blog - Master Front-End Workflow with Yeoman, Grunt and Bower
LearnCode.academy (YouTube video)
Adeline Yaw - Happiness Engineer @ Automattic 