Grunt config

27/09/2017

Grunt is a JavaScript Task Runner that will help you to minify, compile, unit test or lint your code.

Installation

This will put the grunt command in your system path, allowing it to be run from any directory.

npm install -g grunt-cli

Usage

Assuming that the Grunt CLI has been installed and that the project has already been configured with a package.json and a Gruntfile, it’s very easy to start working with Grunt:

1. Change to the project’s root directory.
2. Install project dependencies with npm install.
3. Run Grunt with grunt.

Preparing a new Grunt project

A typical setup will involve adding two files to your project: package.json and the Gruntfile.

package.json: This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.

Gruntfile: This file is named Gruntfile.js or Gruntfile.coffee and is used to configure or define tasks and load Grunt plugins. When this documentation mentions a Gruntfile it is talking about a file, which is either a Gruntfile.js or a Gruntfile.coffee.

package.json

The package.json file belongs in the root directory of your project, next to the Gruntfile, and should be committed with your project source. Running npm install in the same folder as a package.json file will install the correct version of each dependency listed therein.

There are a few ways to create a package.json file for your project:

  • Most grunt-init templates will automatically create a project-specific package.json file.
  • The npm init command will create a basic package.json file.
  • Start with the example below, and expand as needed, following this specification.

In my case i use grunt to prepare my code for production :

{
  "name": "project name",
  "version": "1.0.0",
  "description": "project description",
  "main": "index.php",
  "dependencies": {
    "grunt-contrib-concat": "^1.0.1",
    "grunt": "^1.0.1",
    "grunt-ng-annotate": "^3.0.0",
    "grunt-contrib-uglify": "^2.0.0"
  },
  "devDependencies": {
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-uglify": "^2.0.0",
    "grunt-ng-annotate": "^3.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Note : dependencies are required to run, devDependencies only to develop, e.g.: unit tests, Coffeescript to Javascript transpilation, minification, …

Installing Grunt and gruntplugins

The easiest way to add Grunt and gruntplugins to an existing package.json is with the command npm install –save-dev. Not only will this install locally, but it will automatically be added to the devDependencies section, using a tilde version range.

For example, this will install the latest version of Grunt in your project folder, adding it to your devDependencies:

npm install grunt --save-dev

The same can be done for gruntplugins and other node modules. As seen in the following example installing the uglifyJs task module:

npm install grunt-contrib-uglify --save-dev

The Gruntfile

The Gruntfile.js or Gruntfile.coffee file is a valid JavaScript or CoffeeScript file that belongs in the root directory of your project, next to the package.json file, and should be committed with your project source.

A Gruntfile is comprised of the following parts:

  • The « wrapper » function
  • Project and task configuration
  • Loading Grunt plugins and tasks
  • Custom tasks

Im my case my gruntfile.js will used :

  • grunt-ng-annotate : Add, remove and rebuild angularjs dependency injection annotations
  • grunt-contrib-concat : will concatenate all my files into one for production named app.js
  • grunt-contrib-uglify: will minify my app file
module.exports = function(grunt) {
    //grunt wrapper function 
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        //grunt task configuration will go here  
        ngAnnotate: {
            options: {
                // singleQuotes: true
            },
            app: {
                files: {
        	    './dist/min-safe/authController.js': ['./application/pages/authentication/controller.js'],
        	    './dist/min-safe/orderController.js': ['./application/pages/order/controller.js'],
                    './dist/min-safe/headerController.js': ['./application/partials/header/controller.js'],
 
                    './dist/min-safe/app.js': ['./application/app.js']
                }
            }
        },
        concat: {
            js: { //target
                src: ['./dist/min-safe/app.js', './dist/min-safe/*.js'],
                dest: './dist/min/app.js'
            }
        },
        uglify: {
            js: { //target
                src: ['./dist/min/app.js'],
                dest: './dist/min/app.js'
            },
            options: {
                mangle: false,
            },
            
        }
    });

    //load grunt tasks
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-ng-annotate'); 

    //register grunt default task
    grunt.registerTask('default', ['ngAnnotate', 'concat', 'uglify']);

}

More infos on https://gruntjs.com/getting-started.