Introduction to Grunt

Folks,

Lets explore a new trendy task runner i.e., grunt today…

WHAT IS GRUNT?

Built on top of Node.js, Grunt is a task-based command-line tool that speeds up workflows by reducing the effort required to prepare assets for production. It does this by wrapping up jobs into tasks that are compiled automatically as you go along. Basically, you can use Grunt on most tasks that you consider to be grunt work and would normally have to manually configure and run yourself.

What’s Grunt used for? Automating front-end and JavaScript workflow tasks. Refreshing the browser when you change a script. Minifying and concatenating.

Front-end developers are often told to do certain things:

  • Work in as small chunks of CSS and JavaScript as makes sense to you, then concatenate them together for the production website.
  • Compress your CSS and minify your JavaScript to make their file sizes as small as possible for your production website.
  • Optimize your images to reduce their file size without affecting quality.
  • Use Sass for CSS authoring because of all the useful abstraction it allows.
  • By using grunt you can validate javascript file and you can compress/uglify it too..you can even clean files in directory using contrib-clean

grunt_img

 

Grunt Setup:

In order to start with grunt you have to install nodejs as grunt runs on nodejs…so first install nodejs..

Then go to your working directory and type

npm install -g grunt-cli

then followed by npm install grunt –save-dev and npm install grunt-contrib-clean –save-dev

Now head up in creating package.json and grunt.js files…

package.json:

{
“name”: “project-zero”,
“version”: “0.1.0”,
“devDependencies”: {
“grunt”: “^0.4.5”,
“grunt-contrib-jshint”: “~0.10.0”,
“grunt-contrib-nodeunit”: “~0.4.1”,
“grunt-contrib-uglify”: “~0.5.0”
}
}

gruntfile.js

module.exports = function(grunt) {
grunt.initConfig({});

grunt.config(‘options.api’, grunt.option(‘api-server’) || ‘http://localhost:3000/’);

grunt.loadNpmTasks(‘grunt-contrib-copy’);
grunt.config(‘copy.index’, {
src: ‘index.html.ejs’,
dest: ‘index.html’,
options: {
process: function(content, path) {
return grunt.template.process(content);
}
}
});
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s