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-configThis 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.