24 Dec 2013, 09:30

Sailing app - part 4 - Grunt for the win

Up to now, we saw only grunt test and grunt server ; if you would have like to run only your unit test, you could have run grunt karma:unit or only the end to end testing grunt karma:e2e.

As we saw in part 2, when we added the "e2e" section in Gruntfile.js, all the grunt (meta-)commands are defined in this file. Let's review some of them.

For example, grunt jshint will run jshint (Javascript Code Quality Tool) against your code and wil say if you coded like me :

Running "jshint:all" (jshint) task
app/scripts/controllers/index.js
  line 7   col 41  Strings must use singlequote.   line 17  col 5   Expected '}' to have an indentation at 7 instead at 5.   line 19  col 55  Strings must use singlequote.   line 22  col 32  Trailing whitespace.   line 23  col 7   Trailing whitespace.   line 10  col 20  '$' is not defined.   line 19  col 26  'issuelist' is not defined.   line 15  col 40  'status' is defined but never used.   line 18  col 33  'status' is defined but never used.   line 18  col 25  'data' is defined but never used.
✖ 10 problems

Which is good as once you know, you can fix them all ; To be honest, I could fix all except the $ one.

You also have some meta-commands like "build" :

grunt.registerTask('build', [
    'clean:dist',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'ngmin',
    'copy:dist',
    'cdnify',
    'cssmin',
    'uglify',
    'rev',
    'usemin'
  ]);

This will prepare a full and clean build of your application with all the actions defined. When you look at them, it does some cleaning, then preapre files, do some optimisations (ngmin, cssmin, etc), copy files, etc. At the end, in the dist directory, you have your whole app.

Just go to dist directory and check !

You're right, everything is not there yet :

  • data directory with our csv file is not there
  • vendor directory with your csv to json library is not there too.

For this, edit the Gruntfile.js, look for the copy section and add the vendor and data related lines :

    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.{ico,png,txt}',
            '.htaccess',
            'bower_components/**/*',
            'images/{,*/}*.{gif,webp}',
            'fonts/*',
            'data/*',
            'vendor/{,*/}*'
          ]

The vendor syntax means it will include files within the vendor directory and also if there is any children directory. Run grunt build and this time, you have all you need.

If you look at the content of your index.html page and compare it to the one you have :

  • javascripts files were concatenated and minified
  • JQuery is not called locally but from a CDN and is minified

It would allow you to have :

  • On your developement machine, you can split files as much as you want and not being minified to have debug & so on.
  • Once you deploy, optimisations are made for you during the build phase.

Grunt allows you then to have best of both worlds (dev vs prod) depending on your needs and in an easy way. Grunt can also be extended with plugins ; So feel free to check if there are other for your needs.

As usal you can see the results and the code.

Last but not the least, merry christmas ! :-)

Additional resources :