Category Archives: Grunt

Feeling bore in writing regular and traditional css code? Now it’s time to make it easier and simple. Choose any tool (less or sass etc.,) and write comfortably and in style. Here we’ve Grunt will take care of rest of things.

What is Grunt?

Grunt is an Open Source JavaScript task runner that will help automate some of the web development tasks. Grunt doesn’t just speed up the build process, it also improves it.

With Grunt, you can automate tasks like minification, unit testing, and preparing files and website assets for production use. Grunt does this by wrapping these processes up into tasks.

A few examples of things you can automate with Grunt:

  • Optimize your web images for speed and performance
  • Analyze your code for potential errors (often referred to as linting)
  • Combine your external resources for faster page load times
  • Enforce your coding style guides for uniformity and readability throughout your project’s code base
  • Compile your CSS from your preprocessor of choice (e.g. Sass and Less)

Anything that you do over and over again is a candidate for Grunt.

We can configure Grunt to watch certain files for changes, and then build the results on the fly.

Using Grunt in Web Development

When used in a team environment, Grunt can help every person in the team to write code that adheres to the same standards/style guides. Details such as controlling the indentation of code can now be a strict process as a whole build will fail if any part throws an error.

For example, while indenting the code, you could automatically enforce the use of spaces instead of tabs (or vice versa, depending on your preferences), which ensure that the whole team has the same configuration. When a team member pushes code to the repository, it’s in the expected format.

Grunt will help you catch sloppy code such as missing semicolons, braceless control statements, unused variables, and trailing whitespace when used in conjunction with your favorite code-quality tools (e.g. JSHint). This is excellent for discovering human errors as well as badly written — JavaScript.

Prerequisite things to start

In order to install Grunt, a process that relies on Node.js (an open source development platform for network applications), it must be installed or available in your dev environment, which could be your personal computer or web server.

Installing Node.js allows us to install Grunt using Node.js’s package manager called npm.

 Install Grunt

Change the location to work folder from Command Line Interface (CLI) and run the following command.

The above command installs Grunt on your machine with the option -g, which allows us to work on different grunt configured projects. (We’ll talk more on Node.js and npm in our next articles).

Configuring Grunt for Web development

Now that we have Grunt installed, let’s go over the basics of how to use it in a web development project.

To use Grunt in a web development project, we need two files: package.json and Gruntfile (e.g. Gruntfile.js).

package.json: package.json is a JSON file. This file should be located in your project’s root directory.

Project information and settings are specified in package.json, such as the project name, version, author, and if it is a private project or not.

Grunt will be an item listed under devDependencies, along with the Grunt plugins you want to use for the project.

Here’s an example template for a package.json file:

By specifying the project’s dependencies in package.json, we can use npm to install them for us automatically, simply by running the following command in our project’s directory:

e.g: npm install –save-dev grunt-contrib-watch ” height=”93″ width=”630″>Or, we’ve another approach, where without adding/specifying any of the dependencies in package.json, we could just run the following command:

The above command installs the grunt-contrib-watch tool which has most recent stable version from npm registry to the project, and, also updates the package.json, under devDependencies property. Similarly, we’ve to do for each grunt tool, which are required for the project.

Gruntfile: The Gruntfile is the main configuration file for the project, and specifies the tasks Grunt should run and the files in the project they affect. Gruntfile can be a JavaScript file (Gruntfile.js) or CoffeeScript file (Gruntfile.coffee). Most of the developers are familiar with JavaScript, so let’s go with that for now.

At its most basic form, the Gruntfile should contain the following:

Let see what’s going on with the above code in detail.

initConfi: This  is the method where it initializes grunt tasks, each Grunt plugin is configured using a JSON object like ‘concat_css’ and ‘cssmin’ in the above example and this object will be passed as param to the initConfig.

loadNpmTasks: This method will load the tasks specified in Grunt plugin, this must be installed via npm. From the above example, we’re loading grunt-concat-css and grunt-contrib-cssmin.

registerTask: This can be specified more than once. It register an “Alias Task” or a task function. The default task is run when Grunt is executed in the command line, “grunt“. From the above example it will perform two tasks, ‘concat_css’ and ‘cssmin’, when we simply run the command “grunt“.

The features in Grunt are more and they are limitless. At this point of time, around 300 listed gruntplugins available.

Please see gruntjs.com for references.