Nasir Uddin January 4, 2015 2 Comments

You have probably heard about Grunt. Grunt is a task runner of Node.js. It is similar as Gulp. Already, you have informed npm is the package manager for grunt. So first of all, you have to install npm. I will show you all from obuntu terminal.
Open your terminal and install npm using in below command.
[sourcecode language=”bash”] sudo apt-get install npm
[/sourcecode] After this, now you are ready to install grunt using in below command
[sourcecode language=”bash”] sudo npm install -g grunt-cli // It has installed globally -g
[/sourcecode] You have installed successfully grunt. Now i will show you how to add grunt package in package.json and add task runner in Gruntfile.js
1. Change to the root directory of the project.
[sourcecode language=”bash”] cd {project root}
[/sourcecode] 2. Create package.json & Gruntfile.js in your project root.
[sourcecode language=”bash”] touch package.json Gruntfile.js
[/sourcecode] 3. To initialize a new Grunt project from your project’s directory run
[sourcecode language=”bash”] npm init
[/sourcecode] 4. Installing Grunt plug-in
[sourcecode language=”bash”] /* Install grunt */
npm install grunt –save-dev
/* Install grunt concat */
npm install grunt-contrib-concat –save-dev
/* Install grunt contrib uglify */
npm install grunt-contrib-uglify –save-dev
/* Install grunt contrib cssmin */
npm install grunt-contrib-cssmin –save-dev
[/sourcecode] 5. now see grunt packages in package.json
[sourcecode language=”bash”] {
"name": "project name",
"version": "0.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"grunt": "~0.4.5",
"grunt-cli": "~0.1.13",
"grunt-contrib-concat": "~0.5.0"
},
"devDependencies": {
"grunt-contrib-concat": "~0.5.0",
"grunt-contrib-uglify": "~0.7.0",
"grunt-contrib-cssmin": "~0.11.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": ""
},
"author": "Nasir Uddin",
"license": "BSD-2-Clause"
}
[/sourcecode] 6. See here grunt tasks runner in Gruntfile.js
[sourcecode language=”bash”] /*
* grunt-cli
* http://gruntjs.com/
*
* Copyright (c) 2012 Tyler Kellen, contributors
* Licensed under the MIT license.
* https://github.com/gruntjs/grunt-init/blob/master/LICENSE-MIT
*/
‘use strict’;
module.exports = function(grunt) {
grunt.initConfig({
concat: {
css: {
src: [‘assets/css/bootstrap.min.css’, ‘assets/css/bootstrap-responsive.css’, ‘assets/css/styles.css’],
dest: ‘assets/css/main.css’
},
js: {
src: [‘assets/js/libs/bootstrap/bootstrap-dropdown.js’, ‘assets/js/libs/bootstrap/bootstrap-transition.js’,
‘assets/js/libs/bootstrap/bootstrap-alert.js’, ‘assets/js/libs/bootstrap/bootstrap-collapse.js’,
‘assets/js/libs/bootstrap/bootstrap-modal.js’, ‘assets/js/libs/bootstrap/bootstrap-tab.js’,
‘assets/js/script.js’ ],
dest: ‘assets/js/main.js’
}
},
uglify: {
js: {
src: ‘assets/js/main.js’,
dest: ‘assets/js/main.min.js’
}
},
cssmin: {
css: {
src: ‘assets/css/main.css’,
dest: ‘assets/css/main.min.css’
}
}
});
grunt.loadNpmTasks(‘grunt-contrib-concat’);
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
grunt.loadNpmTasks(‘grunt-contrib-cssmin’);
grunt.registerTask(‘build’, [‘concat’, ‘uglify’, ‘cssmin’]);
};
[/sourcecode] For concatenate run
[sourcecode language=”bash”] grunt concat
[/sourcecode] For uglify run
[sourcecode language=”bash”] grunt uglify
[/sourcecode] For cssmin run
[sourcecode language=”bash”] grunt cssmin
[/sourcecode] For build all commands run together
[sourcecode language=”bash”] grunt build
[/sourcecode] That is all. Thanks & enjoy.

2 Comments

Leave a Reply