What Is Yeoman - Part 3 Grunt

Last tool about Yeoman and this is perhaps the more interesting because today I will talk about Grunt.

Grunt is an awesome tool to help you to run some automatic tasks. Usually when you develop you have many times the same way to work and the same task to execute again and again like for example lint your js files or css, compile your sass or coffee files or different kinds of stuffs like that. Of course this is not really time consuming usually you can execute each task using one command line and even sometime like compiling your coffee you have some watcher already included.

Ok, but now what you think about having all those commands simplified in one file and many other and finally be able to run all your task automatically (even the ones without watcher like lint your files). Grunt do that.

Let’s see a small example, basic, but enough to see how Grunt can be helpful. In the last article about Bower I was a bit frustrated to not be able to include all the scripts form third parties in the index html file so we will fix it now with Grunt.

From last article, we already have a bower.json file with requirejs, bootstrap and underscore. Now we need to add those scripts in the index.html using Grunt.

To create the base of your grunt project you need to have a package.json file using usually for node, if you don’t have you can create a new one with npm init. After finish you should have a file like that.

package.json
1
2
3
4
5
6
7
8
9
10
11
{
  "name": "testgrunt",
  "version": "0.0.0",
  "devDependencies": {
    "grunt": "~0.4.2"
  },
  "main": "Gruntfile.js",
  "dependencies": {
    "grunt": "~0.4.2"
  }
}

Now you can just run npm install and hop grunt is installed in your project. Of course if you try to execute the grunt command you will have an error because we didn’t create the Gruntfile yet. This file is just a js (or coffee) file with the list of task you want to load and execute.

Here is the structure of this Gruntfile.

Gruntfile.coffee
1
2
3
4
5
6
7
'use strict'

module.exports = (grunt) ->
  grunt.initConfig
    pkg: grunt.file.readJSON 'package.json'

  grunt.registerTask 'default', []
Gruntfile.js
1
2
3
4
5
6
7
'use strict';
module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });
  return grunt.registerTask('default', []);
};
Toggle coffeescript/javascript

The initConfig function will be initialize with all needed configurations from your modules (here we include also the general config from package.json file sometime useful).

The registerTask function will create a new task (that you can call with grunt mytask) and trigger a list of subtasks.

In our case we want to install scripts in the html file using bower and if you check here you have a huge list of plugins and there is one (bower-install) to Inject your Bower dependencies right into your HTML from Grunt so perfect.

To install it npm install grunt-bower-install --save-dev. The save-dev option will add the line automatically in your package.json.

Once installed we have to load tasks from this plugin with grunt.loadNpmTasks 'grunt-bower-install' in your Gruntfile then configure it following the documentation, in this case the Gruntfile looks like that.

Gruntfile.coffee
1
2
3
4
5
6
7
8
9
10
11
12
'use strict'

module.exports = (grunt) ->
  grunt.loadNpmTasks 'grunt-bower-install'

  grunt.initConfig
    pkg: grunt.file.readJSON 'package.json'
    'bower-install':
      target: 
        src: "index.html"

  grunt.registerTask 'default', []
Gruntfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
'use strict';
module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-bower-install');
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    'bower-install': {
      target: {
        src: "index.html"
      }
    }
  });
  return grunt.registerTask('default', []);
};
Toggle coffeescript/javascript

With this plugin you should also put some code in your index.html where you want to inject your scripts and stylesheets.

index.html
1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
  <head>
    <!-- bower:css -->
    <!-- endbower -->
  </head>
  <body>
    <!-- bower:js -->
    <!-- endbower -->
  </body>
</html>

Now if you run the command grunt bower-install between the bower comments you will see your scripts and even css are added. Perhaps you notice and error, “requirejs was not injected in your file”. This is because grunt get the projects directly from Github and sometime some plugins like requirejs are not configured like grunt expect, but don’t worry most of the time every plugins works perfectly.

So here it is we can now use bower to get our third party script then grunt to include them in the index file and in the next post we will see how to execute this task automatically everytime you load a new extension in your browser and how to have your browser up-to-date without doing anything and this will save a lot of time.

Comments

Copyright © 2014 - Anthony Estebe -