Grunt is a Javascript task runner. It automates repetitive tasks and steamline workflow. It uses Node JS and can be installed via npm (Node Package Manager)
I have been using Grunt for couple of my projects since last year — to concatenate, minify css and JavaScript files as well as compile SASS, check syntax error and run unit test.
Two important files of Grunt
Package.json
Project meta data file stores information of all dependencies. When running $npm install, it ensures correct version get installed.
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-compass": "~0.10.0",
"grunt-contrib-hologram": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}
Gruntfile.js
Configuration file stores detail information of each Grunt plugin
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Concatenate JavaScript files
uglify: {
all: {
files: {
'app/assets/js/all.min.js': ['app/assets/js/main/*.js', 'app/assets/js/common.js']
}
}
},
// Compile SASS to CSS
compass: {
dist: {
options: {
sassDir: '../sass',
cssDir: '../css',
outputStyle: 'compressed'
}
},
// Generate pattern library
hologram: {
generate: {
options: {
config: 'hologram_config.yml'
}
}
},
}
}); // Load the plugin
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-hologram');
// Default task(s).
grunt.registerTask('default', [
'uglify:all',
'compass',
'hologram'
]);
};
grunt.initConfig — This is where we define configurations of Grunt plugin.
grunt.loadNpmTasks — This is where we load the Grunt plugin.
grunt.registerTask — This is where we register the Grunt task.
Setup Grunt
Make sure you have node.js and npm installed, here is a step by step tutorial. Once completed the installation, let’s start!
Install the CLI
$npm install -g grunt-cli
Install Grunt
$npm install grunt --save-dev
Install Grunt plugin
$npm install [grunt-plugin-name] --save-dev
Run Grunt
Simply type below to run all tasks at once
$grunt
You can also configure registerTask and run specific task
grunt.registerTask('compass', ['compass']);
then type below to run
$grunt compass
Execute Grunt task, you should be able to see following output display in terminal:
Running "compass:dist" (compass) task
write /StyleGuide/css/crlib.styles.no-query.css (6.04s)
write /StyleGuide/css/crlib.styles.css (6.859s) Running "compass:dev" (compass) task Running "hologram:generate" (hologram) task
Custom markdown renderer Cortanamarkdownrenderer loaded.
Build completed. (-: Done, without errors.
Test it with Grunt
Jasmine is a Behavior Driven Development testing framework for JavaScript. It is also called headless testing because it doesn’t rely on browsers, DOM, or any JavaScript framework. Use Grunt to automated testing is super easy.
Install Jasmine
$npm install grunt-contrib-jasmine --save-dev
Configure the task
jasmine : {
src : 'theme-build/js/*.js',
options : {
specs : 'theme-build/specs/*.js'
}
}
Add a spec
Create a Jasmine spec, specs/spec.js as below
describe("crlibSlidebarsr", function() {
it("should be a constructor function", function() {
expect(typeof window.crlibSlidebars).toBe("function");
});
});
Load the plugin
grunt.loadNpmTasks('grunt-contrib-jasmine');
Run the plugin
$grunt jasmine
Terminal should look like…
Running "jasmine:src" (jasmine) task
Testing jasmine specs via PhantomJS >> ReferenceError: Can't find variable: angular at
>> theme-build/js/main.js:12
>> theme-build/js/main.js:17
crlibSlidebars
X should be a constructor function
Expected 'undefined' to be 'function'. (1) 1 spec in 0.005s.
>> 1 failures
Watch it with Grunt
Grunt can watch files changes, execute tasks and then reload the page for us. Frist, let’s install Grunt watch
$npm install grunt-contrib-watch --save-dev
Configure the task
// Watch files
watch: { // Watch .scss files
sass: {
files: ['css/sass/**/*.scss'],
tasks: ['sass:dev'],
}, // Live reload files
livereload: {
options: { livereload: true },
files: [
'css/**/*.css',
'**/*.html',
]
}
},
Load the plugin
grunt.loadNpmTasks('grunt-contrib-watch');
Run the plugin
$grunt watch
Tada! It’s done! Now Grunt will watch for changes to any .scss files, then run the task automatically.