Migration to Grunt v0.4

Foreword

On February 18, the release of Grunt v0.4.0 was released , and I congratulate everyone on this. If you are not familiar with Grant yet, please go to the official website or read the introductory article on Habré . In short, Grant allows you to automate the bonding and minification of js files, running tests, checking code with JSHint, and more .

This article is the history of the migration of one application from Grant v0.3.9 to released v0.4.0. Versions are incompatible and the move was not as simple as I originally intended. The full instruction on migration in English is here , it is more detailed than my description.

Why do I use Grunt

Like any lazy frontend developer, I needed a tool that automates routine tasks, allowing me to concentrate directly on development. So I found Grant, who did the following for me:
')

• compilation of stylus in css;
• pasting js files;
• JavaScript check with linter;
• minification of stuck js-files;
• running unit tests ( qUnit );
• tracking changes in source files and automatic restart of the above tasks.

All these important, but boring tasks were performed by one command:

→ grunt Running "stylus:compile" (stylus) task File 'css/styles.css' created. Running "concat:js" (concat) task File "project.js" created. Running "lint:files" (lint) task Lint free. Running "min:js" (min) task File "project.min.js" created. Uncompressed size: 130468 bytes. Compressed size: 20937 bytes gzipped (74246 bytes minified). Running "qunit:all" (qunit) task Testing index.html...............OK >> 95 assertions passed (594ms) Running "watch" task Waiting... 

All tasks are described in a special grant file: grunt.js. For the above log, it schematically looks like this:

 module.exports = function(grunt) { grunt.initConfig({ stylus: { //  Stylus  CSS compile: { options: { 'compress': true, 'paths': ['css/styl/'] }, files: { 'css/styles.css': 'css/styles.styl' } } }, concat: { //  js- js: { src: [ /*     */ ], dest: 'project.js' } }, min: { //  js: { src: ['<config:concat.js.dest>'], dest: 'project.min.js' } }, jshint: { options: { smarttabs: true } }, lint: { //   files: ['<config:concat.js.dest>'] }, watch: { //     styl- stylus: { files: ['css/styl/*.styl'], tasks: 'stylus' }, //     lint    js- js: { files: ['src/*.js'], tasks: 'concat lint' } }, qunit: { //   qUnit- all: ['../test/index.html'] } }); //      grunt.loadNpmTasks('grunt-stylus'); //   grunt.registerTask('default', 'stylus concat:js lint min:js qunit watch'); grunt.registerTask('test', 'qunit'); }; 

I will not analyze it in detail, there should be enough comments in the code.

Migration

Reinstall module

The globally installed grunt module (if any) is npm uninstall -g grunt : npm uninstall -g grunt

And install the Grant command line interface module : npm install -g grunt-cli

Grunt itself is now placed locally in the project folder: npm install grunt

Check the module versions:

 → grunt --version grunt-cli v0.1.6 grunt v0.4.0 

Globally allowed to put the module grunt-init, but in my application it is not used.

Before installing, make sure that the version node.js> = 0.8.0.

Rename Grant File

 mv grunt.js Gruntfile.js 

The grant file with the old name is no longer supported, without renaming, we will see an error:

Fatal error: Unable to find Gruntfile.

In the new version of the grant file, you can write in CoffeeScript : Gruntfile.coffee.

Installing plugins

The updated Grant no longer has any built-in tasks, such as concat, min, watch, etc. They need to be added as separate plugins :

• concat → grunt-contrib-concat
• lint → grunt-contrib-jshint
• min → grunt-contrib-uglify
• qunit → grunt-contrib-qunit
• watch → grunt-contrib-watch

It's easy to see that Grant's plugins have the prefix grunt-contrib-.
Install:

 → npm install grunt-contrib-concat → npm install grunt-contrib-jshint → npm install grunt-contrib-uglify → npm install grunt-contrib-qunit → npm install grunt-contrib-watch → npm install grunt-contrib-stylus 

When installing, it is recommended to use the --save-dev parameter to automatically update the dependencies of devDependencies in package.json.

We connect plugins in the grant file:

 grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-stylus'); 

Grant File Changes

The registerTask method can no longer pass the task list in a single line with delimited spaces. The string is allowed to submit only one task: grunt.registerTask('test', 'qunit');

For the task list we will definitely use an array:

 grunt.registerTask('default', ['stylus', 'concat:js', 'jshint', 'min:js', 'qunit', 'watch']); 

Instead of a directive like <config:concat.js.dest> now use the templates: <%= concat.js.dest %> .

The lint task with jshint options is now combined into a jshint task, where you can immediately specify options:

 jshint: { options: { smarttabs: true }, js: ['project.js'] } 

The min task is renamed to uglify. Instead of src / dest objects, use the files object:

 uglify: { js: { files: { 'project.min.js': ['<%= concat.js.dest %>'] } } } 

In the watch task, we list the executed tasks as an array:

 watch: { js: { files: ['src/*.js'], tasks: ['concat', 'lint'] } } 

With this, my move was completed, and Grant worked without errors. All changes to the grant file are collected in this template:

 module.exports = function(grunt) { grunt.initConfig({ //  Stylus  CSS stylus: { compile: { options: { 'compress': true, 'paths': ['css/styl/'] }, files: { 'css/styles.css': 'css/styles.styl' } } }, concat: { //  js- js: { src: [ /*     */ ], dest: 'project.js' } }, uglify: { //  js: { files: { 'project.min.js': ['<%= concat.js.dest %>'] } } }, jshint: { //   options: { smarttabs: true }, js: ['<%= concat.js.dest %>'] }, watch: { //     styl- stylus: { files: ['css/styl/*.styl'], tasks: 'stylus' }, //     lint    js- js: { files: ['src/*.js'], tasks: ['concat', 'lint'] } }, qunit: { //   qUnit- all: ['../test/index.html'] } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-qunit'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-stylus'); //   grunt.registerTask('default', ['stylus', 'concat:js', 'jshint', 'uglify:js', 'qunit', 'watch']); grunt.registerTask('test', 'qunit'); }; 

Materials on the topic

• Upgrading from 0.3 to 0.4
• Grunt 0.4: build system for front-end developers