Learning GruntJS : Part 4 – Useful Grunt Plugins

Earlier we have seen how to get started with GruntJs and JavaScript and CSS task management with GruntJs. In this article of the series we will learn some Grunt plugins that are very helpful in day to day tasks. We will cover:

  • WireDep – Wired dependencies
  • Watch – Watch the file changes
  • Clean – Clean directoried
  • Copy – Copy files/directpories
  • ImageMin – Minify images
  • Responsive Images – Create multiple image sets
  • HtmlMin – Minify HTML

In this series of articles we will learn Grunt basics and also explore a number of important Grunt plugins to automate your front-end workflow. This series covers following tutorials on GruntJs:

1. Learning GruntJs:Part 1 – Getting Started with GruntJs
2. Learning GruntJs:Part 2 – Manage JavaScript Tasks
3. Learning GruntJs:Part 3 – Manage CSS Tasks
4. Learning GruntJs:Part 4 – Some Useful Grunt Plugins

Grunt Wiredep

grunt-wiredep (wired dependecy) is a Grunt plug-in, which finds your components and injects them directly into the HTML file you specify from the bower components directory. If you do not know about bower, see our getting started with bower tutorial.

Install wiredep npm package

$ npm install --save wiredep

Install wiredep grunt package

$ npm install grunt-wiredep --save-dev

Configure wiredep

In your HTML file you need to add few comments. These comments act as placeholders and components are injected into these comments.

// app/index.html

<html>
  <!-- bower:css -->
  <!-- endbower -->

..

  <!-- bower:js -->
  <!-- endbower -->
</html>

Wiredep Task

// Gruntfile.js

grunt.loadNpmTasks('grunt-wiredep');

grunt.initConfig({
    wiredep: {
      my_htm: {
        src: 'app/index.html' // point to your HTML file.
      }
    }
})

This plugins takes the path of your html file and all the componenets are injected into the placeholder comments.

Run Wiredep

$ grunt wiredep

Sample Output

// app/index.html

<!-- bower:css --> 
<link href="../bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- endbower -->

..
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->

Grunt Watch

Watch is a grunt utility that detects the changes in code files and runs specified tasks when changes are detected. It is very helpful as you do not need to run the tasks manually each time code is changed.

Install Grunt Watch

$ npm install grunt-contrib-watch --save-dev

Watch Task

// Gruntfile.js

grunt.initConfig({
    watch: {
      scripts: {
        files: ['app/javascript/*.js'],
        tasks: ['jscs', 'jshint', 'concat', 'uglify'],
        options: {
          spawn: false,
        },
      },
      css: {
        files: ['app/stylesheets/*.css', 'app/stylesheets/*.scss'],
        tasks: ['sass', 'concat', 'cssmin', 'autoprefixer', 'uncss'],
      }
    }
})

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

Each target takes the array of files to be watched and a list of tasks to be run when files are changed.

Run Watch Task

# run both the watch tasks
$ grunt watch

# watch  the JS changes
$ grunt watch:scripts

# watch  the CSS changes
$ grunt watch:css

Grunt Clean

Grunt Clean is a plugin to clean the directories/files.

Install Grunt Clean

$ npm install grunt-contrib-clean --save-dev

Clean Task

// Gruntfile.js

grunt.initConfig({
     clean: {
      build: ["app/build/js", "app/build/css"],
      release: ["app/release/js", "app/release/css"]
    }
})

grunt.loadNpmTasks('grunt-contrib-clean');

This task will remove all the content from app/build/css and app/release/css folders.

Run Clean Task

$ grunt clean

# run specific clean task
$ grunt clean:build

Grunt Copy

Grunt copy is used for copying files or folders from one location to other.

Install Copy

$ npm install grunt-contrib-copy --save-dev

Copy Task

// Gruntfile.js

grunt.initConfig({
     copy: {
      main: {
        src: 'app/**',  // Single * for one level copy
        dest: 'bkp/',
      },
    }
})

grunt.loadNpmTasks('grunt-contrib-copy');

Run Copy Task

$ grunt copy

# run specific clean task
$ grunt copy:main

Copy a single File Tree

copy: {
  main: {
    src: 'src/*',
    dest: 'dest/',
  },
},
$ grunt copy
Running "copy:main" (copy) task
Created 1 directories, copied 1 files

Done, without errors.
$ tree -I node_modules
.
├── Gruntfile.js
├── dest
│   └── src
│       ├── a
│       └── subdir
└── src
    ├── a
    └── subdir
        └── b

Copy and modify a file

copy: {
  main: {
    src: 'src/a',
    dest: 'src/a.bak',
    options: {
      process: function (content, srcpath) {
        return content.replace(/[sad ]/g,"_");
      },
    },
  },
},

Replaces all occurrences of the letters “s”, “a” and “d”, as well as all spaces, will be changed to underlines in a.bak

Grunt ImageMin

ImageMin is Grunt plugin to minify and compress the images.

Install ImageMin

$ npm install grunt-contrib-imagemin --save-dev

ImageMin Task

// Gruntfile.js

imagemin: {                          // Task
  my_img: {                          // Another target
    options: {                       // Target options
      progressive: true,             // for jpeg
      optimizationLevel: 7           // for png
    },
    files: [{
      expand: true,                  // Enable dynamic expansion
      cwd: 'app/images',             // Src matches are relative to this path
      src: ['**/*.{png,jpg,gif}'],   // Actual patterns to match
      dest: 'app/dist/images'        // Destination path prefix
    }]
  }
}

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

Run ImageMin

$ grunt imagemin

Grunt Responsive Images

Responsive images is a Grunt plugin to generate set of responsive images. This plugin needs GraphicsMagick or ImageMagick to be installed on your system.

Install Responsive Images

$ npm install grunt-responsive-images --save-dev

Responsive Images Task

// Gruntfile.js

responsive_images: {
    dev: {
    options: {
      engine: "im", //imagemagick
      rename: true,
      sizes: [
      {
        width: 320,
        height: 240
      },
      {
        name: 'medium',
        width: 640
      },
      {
        name: "large",
        width: 1024,
        suffix: "_x2",
        quality: 60    //1-100
      }]
    },
    files: [{
      expand: true,
      src: ['images/*.{jpg,gif,png}'],
      cwd: 'app/',
      dest: 'app/dist/images'
    }]
  }
},

grunt.loadNpmTasks('grunt-responsive-images');

This task takes the src folder of images and created the responsive image set in dest folder. Various other options can be explored here.

Run imagemin

$ grunt imagemin

Grunt HtmlMin

HtmlMin is a Grunt plugin to minify the HTML files using HtmlMinifier.

Install HtmlMin

$ npm install grunt-contrib-htmlmin --save-dev

HtmlMin Task

// Gruntfile.js

htmlmin: {                                     // Task
  dist: {                                      // Target
    options: {                                 // Target options
      removeComments: true,
      collapseWhitespace: true
    },
    files: {                                   // Dictionary of files
      'app/dist/index.html': 'app/index.html'  // 'destination': 'source'
    }
  }
}

grunt.loadNpmTasks('grunt-contrib-htmlmin');

Run HtmlMin

$ grunt htmlmin

HtmlMin options

removeComments:                Strip HTML comments
removeCommentsFromCDATA:       Strip HTML comments from scripts and styles
removeCDATASectionsFromCDATA:  Remove CDATA sections from script and style elements
collapseWhitespace:            Collapse white space that contributes to text nodes in a document tree
conservativeCollapse:          Always collapse to 1 space (never remove it entirely). Must be used in conjunction with collapseWhitespace=true
preserveLineBreaks:            Always collapse to 1 line break (never remove it entirely) when whitespace between tags include a line break. Must be in 
                               conjunction with collapseWhitespace=true
minifyJS:                      Minify Javascript in script elements and on* attributes (uses UglifyJS)
minifyCSS:                     Minify CSS in style elements and style attributes (uses clean-css)

More options can be found here.

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/