Improve the management of your Gruntfile

Grunt config

For a single project, with traditional package like uglify, sass, watch and browser-sync, a single Gruntfile is good enough. But for large and big projects it can become unmanagable. The load-grunt-config package provides us the option to concat your Gruntfile into pieces, one per task. We'll learn how to do it.

Installation

npm install -D load-grunt-config

This plugin has very nice features:

  • Each task has its own file: for example watch.js, sass.js, etc
  • Coffeescript support
  • Auto load all grunt plugins.
  • Support for YAML files.

Examples

This is a very basic example of Gruntfile.js:

module.exports = function(grunt) {
    require('load-grunt-config')(grunt);
};

This basic configuration allow you to manage your tasks into files. But of course you can set some options:

module.exports = function(grunt) {
    require('load-grunt-config')(grunt, {
        configPath: path.join(process.cwd(), 'grunt'),
        init: true,
        data: {
            test: false
        },
        loadGruntTasks: {
            pattern: 'grunt-*',
            config: require('./package.json'),
            scope: 'devDependencies'
        },
        postProcess: function(config) {},
        preMerge: function(config, data) {}
    });
};
  • configPath: You can customize the path of your taks files. The default value is "grunt".
  • init: Auto grunt.initConfig.
  • loadGruntTasks: You can pass options
  • postProcess: You can modify the config before it gets passed to grunt
  • preMerge: You can merge the config with your data parameter here.

Your tasks
If you have not changed the configuration, you'll have to create a grunt folder and add, for example, a file named watch.js if you will use the watch task. Remember you can use either .js, .json, .coffee or .yaml.

//grunt/sass.js file
module.exports = {
    compile: {
        options: {
            outputStyle: 'nested',
            sourceMap: true
        },
        files: [{
            expand: true,
            cwd: 'src/styles',
            src: ['*.scss'],
            dest: 'dist/styles',
            ext: '.css'
        }]
    }
};

//grunt/watch.js file
module.exports = {
    options: {
        spawn: false,
        livereload: true
    },
    styles: {
        files: [
            'src/styles/*.scss'
        ],
        tasks: [
            'sass:dev'
        ]
    }
};

Aliases
To declare custom tasks, you can create a file aliases.js|.coffee|.json|.yaml. If it is placed into grunt folder, load-grunt-config will use it to define your tasks aliases. For example:

//grunt/aliases.coffee file.
module.exports =
  default: []
  lint: [
    'jshint'
    'csslint'
  ]

In this example, if you run grunt lint in your terminal, jshint and csslint tasks will be executed. Very simple.

Conclusions
I recommend to use this plugin only for big projects. When development involves more than front-end developer and you are using tools like jasmine, connect, sass, watch, browser-sync and more, it will be a good idea to separate the task to better understanding.