Watch With Grunt

The last post was talking about Grunt and how to add all your bower dependencies in your index file. Today we will see how to do that, still using Grunt, but this time Grunt will do everything, we will not have to run the command all the time.

The goal here is to detect when the bower.json file is updated and when it’s the case, run the task bower-install to inject all dependencies in your html and in bonus to automatically refresh your browser using livereload.

First, we need to install a plugin (grunt-contrib-watch) to be able to watch files npm install grunt-contrib-watch --save-dev.

Second, we need to configure this plugin to watch our bower.json file

Gruntfile.coffee
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
'use strict'

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

  grunt.initConfig
    pkg: grunt.file.readJSON 'package.json'

    watch: 
      bower:
        files: ["bower.json"]
        tasks: ["bower-install"]

    'bower-install':
      target: 
        src: "index.html"

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

We just needed to load the tasks of the plugin (grunt.loadNpmTasks 'grunt-contrib-watch') then configure which task we want to trigger when the bower file is updated.

Last, we need to refresh our browser with livereload. In the previous versions of contrib-watch you needed to load the livereload plugin, but now, it’s include so you just need to configure your watcher with:

Gruntfile.coffee
1
2
3
4
5
6
7
8
...
    watch: 
      bower:
        files: ["bower.json"]
        tasks: ["bower-install"]
        options:
          livereload: true
...

VoilĂ . Now start a server to visit your index.html file (for example with python -m SimpleHTTPServer) and enable LiveReload using this extension for example.

To try it, you can install a new bower dependency for example bower install raphael --save the —save will update your bower.json file so grunt will detect this change and update your html file, finally your browser will be refreshed.

Of course this is just an example of what is possible to do with Grunt you can really do a loooot of stuff. You can have a look on all available plugins or you can also generate an application with yo and look at the Gruntfile generated, this is really interesting. In the first post about Yeoman we generated a full stack application with express and angular, you can find the template for the Gruntfile here.

Comments

Copyright © 2014 - Anthony Estebe -