During the web development process, there are bunch of tasks that you’ll be doing regularly. Minifying files, concatenating files, compiling sass or less to CSS, unit testing and linting JS files are some of them. Grunt helps to make these regular tasks automated. It saves lots of time and energy, it has bunch of built-in tasks that make front end development easy.
Getting Started with grunt
Grunt is built on node.js; It is available as a package in the NPM (Node Package Manager). To use grunt, you need to have node.js installed in your machine. But you can use grunt with any app like node app, any MVC app, wordpress app or just plain HTML/CSS/JS app.
Start Grunt installation
Before starting the grunt, first install node.js in your machine. Grunt is a package of npm, and npm comes with node.js; separate installation is not required. However npm gets updated frequently. Make sure, you have updated npm installed.
|
1 |
$ npm update -g npm |
After the node.js installation, you need to install grunt package in your machine. You can install it globally with the flag '-g' in the command window. It can be used, in any project in your machine, when you install it globally. Open node.js command window and run the command. To know difference between local and global installation refer my last post
|
1 |
$ npm install -g grunt |
To install any package globally, you need to run node command window as administrator.
Installing required grunt packages
All the required packages need to be there in the package.json file. If package.json is not available then run the command 'npm init' in the command window. It will add the package.json file. Now you can either add all your required packages in the package.json (as shown below) , and run the command 'npm install'; it will install all the given packages…
|
1 2 3 4 5 |
"dependencies": { "grunt-contrib-uglify": "latest", "grunt-contrib-less": "latest", "grunt-contrib-jshint": "latest" }, |
…or you can install all the required packages using the flag '--save'
|
1 |
$ npm install --save grunt-contrib-jshint |
Now, you can start writing grunt.js file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Gruntfile.js // wrapper function (required by grunt and its plugins) module.exports = function(grunt) { grunt.initConfig({ // all of our configuration will go here sass: { files: { ‘assets/main.css’:’assets/main.scss’ // 'destination': 'source' } } }); // Load Grunt Plugins grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-compass'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); }; |
In this grunt file, we have set the configuration for converting sass to css. You can add as many tasks as you want here. But make sure the grunt plugins used are loaded, using the method 'grunt.loadNpmTasks()'
Now, to run this task run the command 'grunt sass' in the command window. Similarly you can run other defined tasks. Like, 'grunt cssmin', 'grunt uglify' and so on…
You can run multiple tasks with one command
By defining default task, you can run multiple tasks with one command.
|
1 2 |
// default task grunt.registerTask('default', [ 'uglify', 'cssmin', 'sass']); |
Now, you need not to run different tasks separately. Just run the command 'grunt' it will run all the default tasks with one command.
You can create different tasks for different environments
We may require different tasks for dev and production environment. For e.g. some tasks to be run on the dev environment but not in the production environment and vice versa.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
grunt.initConfig({ sass: { dev: { files: { 'assets/main.css':'assets/main.scss' } } prod: { files: { 'assets/main.css':'assets/*.scss' } } } }); |
Now, you can run the different tasks with the different commands.
|
1 2 |
$ grunt sass:dev $ grunt sass:prod |
You can set the different environment in your default tasks list also.
|
1 2 3 4 5 6 |
// default task grunt.registerTask('default', [ 'uglify', 'cssmin', 'sass']); // default task with dev configuration only grunt.registerTask('dev', [ 'uglify:dev', 'cssmin:dev', 'sass:dev']); // default task with prod configuration only grunt.registerTask('prod', [ 'uglify:prod', 'cssmin:prod', 'sass:prod']); |
Now, to run these default tasks for different environment, run the command.
|
1 2 |
$ grunt dev $ grunt prod |
Running a task when a file is changed or saved
You can run a watch task, which will watch all the specified files, as and when a file changes it will run specified tasks.
|
1 2 3 4 5 6 7 8 9 |
watch: { scripts: { files: ['javascripts/modules/*.js','sass/*.scss'], tasks: ['concat','sass','cssmin'], options: { spawn: false, }, }, } |
Now, running the command 'grunt watch' will watch all the JS files in modules folder and scss files in sass folder. As and when any files changes in these folders tasks – concat, sass and cssmin will run itself.
