Skip to main content

What is Grunt?



Here, we’ll explore how to use Grunt and what it can do in a project to speed up and change the way you develop websites.
Mostly everything in these posts are coming directly from the documentation itself. So hopefully some of these you immediately recognize and others you’ll wonder how you missed that.

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 kind of tasks Grunt can do?

Well, the list is exhaustive. Suffice it to say, Grunt can handle most things you throw at it, from minifying to concatenating JavaScript. It can also be used for a range of tasks unrelated to JavaScript, such as compiling CSS from LESS and Sass. Even, optimizing your images to reduce their file size without affecting quality.

Setting up Grunt from scratch

The first thing to do in order to use Grunt is to set up Node.js on your system. When you install Node.js, you also get npm, a package manager for JavaScript, and is the default for Node.js.
Once Node.js is installed, just run this command in the terminal:
npm install -g grunt-cli
Lets break that down:
  • “npm” tells terminal/cmd what program we’re commanding.
  • “install” is the command.
  • “-g” is an argument (a kind of optional bit of info) for the command short way of saying “–global” This means we’re installing Grunt globally on our system. This is a good thing. You want to be able to use it everywhere.
  • “grunt-cli” is another argument. This time telling npm what you want to install. In this instance the Grunt Command Line Interface.
You should close and reopen the terminal as well. That’s a generic good practice to make sure things are working right. Kinda like restarting your computer after you install a new application was in the olden days.
To make sure Grunt has been properly installed, you can run the following one-liner command again:
grunt --version
The next step is to create a package.json file and a Gruntfile in the root directory of your project.

Creating the package.json file

The package.json file belongs in the root directory of your project, next to the Gruntfile, and should be committed with your project source.
There are a few ways to create a package.json file for your project:
  • Most grunt-init templates will automatically create a project-specificpackage.json file.
  • The npm init command will create a basic package.json file.
  • Start with the example below, and expand as needed, following thisspecification.
{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "*",
    "grunt-contrib-uglify": "*",
    "grunt-contrib-watch": "*"
  }
}
Feel free to change the name of the project and the version, but thedevDependencies thing needs to be in there just like that.
This is how Node does dependencies. Node has a package manager called npm (node packaged modules) for managing Node dependencies (like a gem for Ruby if you’re familiar with that). You could even think of it a bit like a plug-in for WordPress.
Once that package.json file is in place, go to the terminal and navigate to the root directory of your project folder using following command:
cd ~/path/to/project
Then run the following command:
npm install
This tells npm which dependencies to install and places them in a node_modulesfolder.

Updating grunt devDependencies

In your package.json you can tag each dependency with a range of versions to install then type npm install to install all the listed dependencies at the given versions:
Only install 0.6.0:
{
  "devDependencies": {
    "grunt-contrib-watch": "0.6.0"
  }
}
Prefix with ~ to install the latest patch version 0.6.x:
As 0.6.10.6.20.6.3, etc versions are released, npm install will install the latest version of those. If 0.7.0 is release, it will not install that version (generally a good strategy as it may contain breaking changes).
{
  "devDependencies": {
    "grunt-contrib-watch": "~0.6.0"
  }
}
Explicitly set the range:
You can use ><<=>= to explicitly set the version range. Another good option for custom ranges or if you would like to be explicit with your version ranges. The follow will install every version greater or equal than 0.6.0 but less than 1.0.0:
{
  "devDependencies": {
    "grunt-contrib-watch": ">= 0.6.0 < 1.0.0"
  }
}
Always install the latest with *:
Or if you just always want the latest version use *:
{
  "devDependencies": {
    "grunt-contrib-watch": "*"
  }
}
See more about version ranges in the npm docs.
npm outdated
If you would like to see which of your dependencies are out of date, use npm outdated: see npm docs for more info.
npm update
Use npm update to update all your dependencies to the latest versions. Or npm update packagename anotherpackage to update specific packages to the latest version.

Creating the Gruntfile

The Gruntfile.js or Gruntfile.coffee file is a valid JavaScript or CoffeeScript file that belongs in the root directory of your project, next to the package.jsonfile, and should be committed with your project source.
Gruntfile is comprised of the following parts:
  • The “wrapper” function
  • Project and task configuration
  • Loading Grunt plugins and tasks
  • Custom tasks
/*!
* Gruntfile
* Basic sample file
*/

module.exports = function (grunt) {
  'use strict';

  // Project configuration.
  grunt.initConfig({

    // Metadata.
    pkg: grunt.file.readJSON('package.json'),

    // Task(s) configuration.
    grunt-task-name: {
      // your task options here
    }

  });

  // Load the plugin(s).
  grunt.loadNpmTasks('grunt-plugin-name');

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

};

An example Gruntfile

In the following Gruntfile, project metadata is imported into the Grunt config from the project’s package.json file and the grunt-contrib-uglify plugin’suglify task is configured to minify a source file and generate a banner comment dynamically using that metadata.
module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

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

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

};
The uglify task will be run by default, when the following command line is run at the root of your project file:
grunt
An incredibly active community of developers is building front-end plugins, you can explore them at Grunt plugins library.

Further reading

This is the basic foundation for learning Grunt, you can also further lean by the following links:

Comments

Popular posts from this blog

Hidden Wiki

Welcome to The Hidden WikiNew hidden wiki url 2015 http://zqktlwi4fecvo6ri.onion Add it to bookmarks and spread it!!!
Editor's picks Bored? Pick a random page from the article index and replace one of these slots with it.
The Matrix - Very nice to read. How to Exit the Matrix - Learn how to Protect yourself and your rights, online and off. Verifying PGP signatures - A short and simple how-to guide. In Praise Of Hawala - Anonymous informal value transfer system. Volunteer Here are five different things that you can help us out with.
Plunder other hidden service lists for links and place them here! File the SnapBBSIndex links wherever they go. Set external links to HTTPS where available, good certificate, and same content. Care to start recording onionland's history? Check out Onionland's Museum Perform Dead Services Duties. Introduction PointsAhmia.fi - Clearnet search engine for Tor Hidden Services (allows you to add new sites to its database). DuckDuckGo - A Hidden S…

Explainer: The nico-teen brain

Explainer: The nico-teen brain The adolescent brain is especially vulnerable to the addictive effects of nicotine BY  TERESA SHIPLEY FELDHAUSEN 7:00AM, AUGUST 19, 2015 Nicotine (black triangle towards center left) tricks the nerve cell (neuron) into sending a message to release more dopamine (yellow dots). Those molecules enter the space (synapse) between one nerve cell and the next. When they get picked up by neighboring cells, this gives users a feel-good high. It also creates the risk of addiction and other health problems.  EMail Print Twitter Facebook Reddit Google+ NATIONAL INSTITUTE ON DRUG ABUSE, ADAPTED BY J. HIRSHFELD Nicotine is the addictive chemical in tobacco smoke and e-cigarette vapors. And doctors say the teenage brain is no place for it to end up. Nicotine can reach the brain within seven seconds of puffing on a cigar, hookah, cigarette or electronic cigarette.
The area of the brain responsible for emotions and controlling our wild impulses is known as the prefrontal c…

fix idm integration on chrome

Chrome Browser IntegrationI do not see IDM extension in Chrome extensions list. How can I install it? 
How to configure IDM extension for Chrome?Please note that all IDM extensions that can be found in Google Store are fake and should not be used. You need to install IDM extension manually from IDM installation folder. Read in step 2 how to do it.

1. Please update IDM to the latest version by using "IDM Help->Check for updates..." menu item

2. I don't see "IDM Integration module" extension in the list of extensions in Chrome. How can I install it?

Press on Chrome menu (arrow 1 on the image), select "Settings" menu item (arrow 2 on the image) and then select "Extensions" tab (arrow 3 on the image). After this open IDM installation folder ("C:\Program Files (x86)\Internet Download Manager" by default, arrow 4 on the image) and drag and drop "IDMGCExt.crx" (arrow 5 on the image) file into "Extensions" page opened in…