Tools for modern front-end workflow: Yeoman, Grunt and Bower



In this article we will talk about some tools for modern front-end workflow. These tools boost your productivity, help you quickly scaffold (set up and prototype) your front-end projects, and take all the boring stuff out of front-end development!

First things first, to get Yeoman, Grunt and Bower, we will need npm.

npm

npm stands for Node Package Manager. It comes with node.js so go over to the download page and follow the installation instructions for your operating system.

Now that we have npm, we can use it to install yeoman.

Yeoman

With so many great tools available to front-end web developers these days it can sometimes be difficult to understand how they all fit together. Yeoman aims to solve this problem by scaffolding workflows for creating modern webapps, while at the same time mixing in many of the best practices that have evolved within the industry.

In short Yeoman will allow you to generate a bunch of different boilerplate projects that have a nice out-of-the-box gruntfile, support for bower, Sass, and much more!

First, let’s install Yeoman! By now you should have npm installed. Execute the following command:

npm install -g yo

This will install Yeoman. By now you may have noticed that Yeoman’s installation will also install Grunt and Bower for you!

Next we need to install a generator. A generator is basicly what sets up a specific boilerplate project. There are generators to scaffold Web Apps (comes with Sass, bootstrap, modernizer, …), AngularJS apps, jQuery apps, Ember.js apps, Polymer, …

Let’s install the webapp generator.

npm install -g generator-webapp

When you finished installing the webapp generator, we are already set to create our first project!

Creating a new project

Now, let’s create a new project with Yeoman! Create a new folder and use your terminal/command line to cd to the location. Inside of the folder, execute the following Yeoman command:

yo webapp

This will provide you with a really nice dialog! You can use your arrow keys to browse through the options for installing Sass, bootstrap and modernizr. Press enter and wait for it to get all the files!

You are now left with a complete newly set up project. Let’s explore some of the directories and files inside of it.



GruntFile.js

The gruntfile will contain the settings for Grunt.

Grunt is full of handy features! It will minify JS, compile your Sass, and even run a local server while watching files for changes and giving you a live update in your browser!

The options are too great to go over in this one article, please refer to the grunt website for a nice overview of all its features and available plugins!

bower.json

Let’s look at the bower.json file

{
  "name": "webapp",
  "private": true,
  "dependencies": {
    "bootstrap-sass-official": "~3.1.0",
    "modernizr": "~2.6.2",
    "jquery": "~1.11.0"
  },
  "devDependencies": {}
}

These are packages that can be installed. Basicly what this bower.json file will do is install jQuery,  the Sass version of bootstrap, and modernizr. This is because of the options we selected when setting up our project with Yeoman. Feel free to add libraries/packages as you want, of course! Once you do, you can install them with

bower install

This will install any new packages for you!

/app directory

Let’s have a look at the app directory. This directory will contain the development files. These files are unminified, uncompiled, … you can modify any files in here and have access to all the readable code. Grunt can however also put the compiled CSS files here so you can develop with readable CSS/JS files.

/dist directory

This directory will hold the minified files. Grunt will place the concatenated and minified CSS and JavaScript in here. This is the directory that you would eventually go online with as the files in here have a greatly reduced filesize.

Running grunt

Now, we can execute one of two Grunt commands that have been defined in the GruntFile.js in order to start a local server. Both commands will listen for filechanges and compile your Sass, …

In case you want to run the app folder, with the development files, run this command:

grunt serve:app

If you want to run the distribution version, run:

grunt serve:dist

Now, with these commands running, you can start developing by creating your application inside of the app folder!

This pretty much covers the basics of some of these awesome tools for modern front-end workflow. Have fun with these tools and I hope they will bring more joy to all front-end developers, I know it did for me!

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+79Share on StumbleUpon108Share on Reddit0Share on LinkedIn27Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!