Grunt Framework

Grunt is a JavaScript based Task Runner. The main use of grunt is automation, an example: build automation. Grunt uses the available plugins to automate the task. These plugins can be installed and managed by using Node Package Manager (npm). You need to have npm installed globally in the machine.

 

Grunt-cli is the Grunt's Command Line Interface, which allows users to run the grunt tasks from any directory. The directory must contain grunt implemented Gruntfile.js in the command line.

 

Grunt has a huge set of plugins which can be used to automate a whole lot. But in this article we will use three different plugins and achieve a common automation task. Following is an overview of our task.

 

1. Concatenate all the CSS and JS files.

• Generally we want all the CSS and JS code in the deployed to a corresponding single file to reduce the number of files in our application. This process minimizes the number of files while deployment.   

 

2. Watches the specified files and update accordingly.

• This eases the development process by adding the watcher to the files. When the files are modified, the changes apply to the application automatically and the specified tasks are also performed. This provides auto save to the development process

 

3. Automate the stylesheet and script inclusion in view files.

• Manual inclusion of stylesheets and scripts in every view file is a repeated process and can be avoided by using this automation task. Developer can get rid of this recursive activity for all the view files by adding this wiredep task.

 

4. Minifies the code in JS files.

• Indentation in script code, gives more unwanted spaces which is not used during compilation process and can be minimized. This minimization can be achieved by using this automation task.

 

We need package.json and Gruntfile.js files in our root directory.

 

Package.json:

We can make our directory node initialized, with the command "npm init" which adds the package.json file in our root directory. This file consists of npm dependencies of our project. Generally we install the grunt plugins as dev-dependencies of the package.json as most of the time it is used on the development side.

 

Gruntfile.js:

We will define the tasks in this file. It has an export function with the grunt argument. This argument uses the “initConfig” method that takes JSON of tasks as parameter. Grunt plugins are loaded and used to implement tasks.

 

Command to install the grunt's Command Line Interface:

>npm install grunt-cli -g

 

This command installs the grunt-cli globally in the machine. grunt-cli checks whether Gruntfile.js is configured with node's require system, so that grunt command can execute the tasks that are configured in Gruntfile.js.

 

Installing grunt for the sample:

>npm install grunt --save-dev

The above creates grunt Node Package Manager and saves the footprint in package.json.

 

Prepare the sample to work with grunt:

1. Create public folder and add some css and js files

2. Create src and add views folder in it.

3. Add index.html file to src/views.

4. Add head and body to index.html file.

 

Following image shows the directory structure of the sample project.

 

Modify the css and js files as shown below:

 

Home.css:

body:{

background: grey;

}    

 

Nav.css:

h1:{

background: white;

}

 

Home.js:

Function appHomeFunction()

{

alert("This is sample js Code for Home");

}

 

Nav.js:

function appNavFunction()

{

alert("This is sample js Code for Nav");

}

Add Gruntfile.js :

Create Gruntfile.js in the root folder, it will be used to create and configure the tasks. These tasks can be run in the console with the help of grunt-cli. Tasks should be implemented using initConfig method. Below is a code snippet.

 

module.exports = function(grunt){

grunt.initConfig({

task1: {

//code

},

task2: {

//code

},

task3: {

//code

}

...

});

grunt.loadNpmTasks("plugin1");

grunt.loadNpmTasks("plugin2");

grunt.loadNpmTasks("plugin3");

...

};

 

Plugins :

 

grunt-contrib-concat:

This plugin is used to concatenate the mentioned files in the src and produces the resultant file in the specified directory at the given destination.

 

How to use :

1. Install the grunt-contrib-concat plugin to dev module of Package.json: Following is the command for the same.

npm install grunt-contrib-concat –save-dev

2. Add an export method in Gruntfile.js.

3. Load the npm grunt-contrib-concat with the method, loadNpmTasks.

4. Initialize the Grunt with the tasks using initConfig method which takes the JSON

of the tasks.

5. Add the concat task. See the below code.

 

module.exports = function(grunt){

grunt.initConfig({

concat: {

css: {

src: ["./public/**/*.css"],

dest: "build/css/style.css"

},

js: {

src: ["./public/**/*.js"],

dest: "build/js/script.js"

}

},

});

grunt.loadNpmTasks("grunt-contrib-concat");

};

 

Note:

• The ** wildcard mentions all the files in the root folder and its subfolders.

• The *.css/*.js wildcard mentions all the files with the extension css/js.

 

How to see the Output :

• Go to command line of the root folder and run grunt concat.

• This will create build folder and add resultant css and js files in it.

 

grunt-contrib-uglify:

This plugin targets given files and produces the minified output at the target location. We include min extension to the name of the target file e.g., output.min.js.

 

How to use :

1. Install the plugin and mention it dev module of Package.json:

npm install grunt-contrib-uglify  –save-dev

2. Add an export method in Gruntfile.js.

3. Load the npm grunt-contrib-uglify with the method, loadNpmTasks.

4. Initialize the Grunt with the tasks using initConfig method which takes the JSON

of the tasks.

5. Add the uglify task.See the below code.

module.exports = function(grunt){

 

grunt.initConfig({

 

uglify: {

my_target: {

files: {

'dest/outputJS.min.js': ['./public/js/*.js']

}

}

}

});

grunt.loadNpmTasks("grunt-contrib-uglify");

};

 

See Output :

• Goto command line of the root folder and run grunt uglify

• This will minify the files which are mentioned in the task

 

grunt-contrib-watch:

This plugin watches the mentioned files and performs the mentioned tasks.

 

How to use :

1. Install the plugin: npm install grunt-contrib-watch –save-dev

2. load the npm grunt-contrib-watch with the loadNpmTasks method.

3. Add the watch task.

4. See the below code.

 

module.exports = function(grunt){

grunt.initConfig({

concat: {

css: {

src: ["./public/**/*.css"],

dest: "build/css/style.css"

},

js: {

src: ["./public/**/*.js"],

dest: "build/js/script.js"

}

},

watch: {

css: {

files: ["**/*.css"],

tasks: ["concat:css"]

},

js: {

files: ["**/*.js"],

tasks: ["concat:js"]

}

},

});

grunt.loadNpmTasks("grunt-contrib-concat");

grunt.loadNpmTasks("grunt-contrib-watch");

 

};

 

See Output:

• Go to command line of the root folder and run grunt watch

• This will watch the files which are being modified and do the respective task to the corresponding files

 

Bower :

It is used to manage the frontend tasks that involves HTML, CSS, JavaScript, fonts or even image files. In short it works on the front-end of a web application. In our application we shall install the Bootstrap and Font-Awesome components.

 

Adding Bower and its components:

1. Install the bower globally: npm install bower -g

2. Run the command bower init. This adds bower.json file in the root folder.

3. Add the .bowerrc file in the root directory and mention directory path as shown below. This adds the bower components in the specified directory.

{

"directory": "public/lib"

}

 

To install Bootstrap, run bower install --save bootstrap.

To install Font-awesome, run bower install --save font-awesome.

 

The above two commands add bootstrap and font-awesome folders into the path that is mentioned in .bowerrc file with related dependencies resolved.

 

grunt-wiredep :

Injects the Bower components to the given target.

 

Initiative :

Add overrides for both bootstrap and font-awesome into bower.json file as shown below

"overrides": {

"bootstrap": {

"main": [

"dist/js/bootstrap.js",

"dist/css/bootsrap.min.css",

"less/bootstrap.less"

]

},

"font-awesome":{

"main": [

"less/font-awesome.less",

"css/font-awesome.min.css",

"scss/font-awesome.scss"

]

}

}

To integrate the css/js dependencies to our view file add the following snippet in the header part of index.html file.

 

<!-- bower:js -->

<!-- endbower -->

 

<!-- bower:css -->

<!-- endbower -->

 

How to use :

1. Load the npm "grunt-wiredep" with the method of grunt, loadNpmTasks.

2. Add the wiredep task with the following code

 

module.exports = function(grunt){

grunt.initConfig({

wiredep: {

bowerInject: {

src: "./src/views/index.html",

ignorePath: "../../public",

overrides: true

}

}

});

 

grunt.loadNpmTasks("grunt-wiredep");

};

See Output:

• Go to command line of the root folder and run grunt wiredep

• This will add the dependencies those are added in bower.json to the given source

 

 

Conclusion:

We looked at Grunt installation and the uses of some plugins in this article. It is easy to learn, pick and configure the plugins. It gives simpler approach to automate the tasks. Some other frameworks are also used to automate our application e.g., Gulp.