Blog for web designers

Working with grunt

Grunt is a very powerful resource managed by npm which is a node.js’s package manger. It helps to organized your working files and folders. It can perform an activity such as compiling sass, optimizing images, optimizing html pages, optimized js, css files, removing comments, compile coffee script, etc..

Working with Grunt

Before working with Grunt make sure you have node.js installed in your computer. Refer to my previous post Install NodeJS to see how to install nodejs.

Setting up Grunt

A typical setup for Grunt will require two main files in the root of your project. package.json and Gruntfile.js. So lets create these two files in the root of our directory.
1) Create file package.json
2) Create file Gruntfile.js

In package.json, there will be a a list of metadata of npm modules. Where as Gruntfile.js is used to define task and load grunt plugins. The name of the file is Gruntfile.js. It can also be named as Gruntfile.coffee

Now inside the package.json paste the below code.


{
  "name": "my-project-name",
  "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"
  }
}

change the "name" of your project with the one you like.

Next step is to open your command line. Click on start and search for “command”. Navigate the command directory to your project directory. Then type:-
npm install
This is download all the modules you have mentioned in your package.json and all the necessary files and folders. They are all needed to make the listed thing work.
It will also create a new folder called node_modules. You don’t have to do anything with this folder. If you are using version controller like git, you can ignore this folder while pushing.

The next file we have to create is Grunfile.js We need to add some plain code to start.
Create file Gruntfile.js and paste the below code inside the file.

	
module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

	//particular task to perform

    uglify: {
      build: {
        // src is your source file where you are working  == input
        src: 'src/custom.js',
        // dest is a destination of your files after being compile  == output
        dest: 'js/build/custom.min.js'
      }
    }

    //particular task to perform END


  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};		
	

This is a very basic of every Gruntfile.js. Every modules is wrapped by this function.

	
		module.exports = function(grunt) {
		  // Do grunt-related things in here
		};		
	

Inside the project configuration function, we have the plugin uglify in our Gruntfile.js. “src” is your source file where you are working For eg: custom.js and dest is a destination of your files after being compile.
The use of uglify is to compressed your file, delete all the white spaces and comments.
Checkout the uglify documentation what it really does. Every time a new package is installed, it is updated to package.json file. This file is present in the root of Grunt folder.

List of Grunt packages

	
		   uglify: {
		      build: {
		        src: 'src/custom.js',  // input
		        dest: 'js/build/custom.min.js' // output
		      }
		    }		
	

The function grunt.loadNpmTasks specifies the task name. In our case we are using a uglify. After that we register our task in another function called grunt.registerTask. You have to mention every new task and mentioned it in this below two function.

	

		  // Load the plugin that provides the "uglify" task.
		  grunt.loadNpmTasks('grunt-contrib-uglify');

		  // Default task(s).
		  grunt.registerTask('default', ['uglify']);		

	

This is what it looks like if we were using more than one module.

	
		  grunt.loadNpmTasks('grunt-contrib-uglify');
		  grunt.loadNpmTasks('grunt-contrib-sass'); 
		  grunt.loadNpmTasks('grunt-contrib-imagemin'); 

		  
		  grunt.registerTask('default', ['uglify', 'sass', 'imagemin']);		
	

We are in the final stage of getting started with Grunt. Now lets open the command line and navigate to your project directory and type
grunt
We have “default” in our project name so we will use “grunt” without postfix.

Grunt compile

Santosh Shah

My name is Santosh Shah and blogs at santosh-shah.com


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.