Nice Grunt Plugins

JavaScript task runners such as Grunt have become extremely popular with front-end developers. This is because they help to do the one thing which we all want to do in our jobs – save time!. With more than 5,000 (and counting) Grunt plugins now available, it can be hard for developers to find those ‘diamonds in the rough’. So here are listed top grunt plugins one may use.

I recommend using Jekyll asset plugin for the task as this is straight solution.

PLUGINDESCRIPTION
jshintValidate files using jshint
uglifyMinify JS files using UglifyJS
watchRun tasks whenever watched files are changed
cleanClean up files and folders
copyCopy files and folders
concatCombine files into a single file
cssminCompress CSS files
lessCompile LESS files to CSS
imageminMinify PNG, JPG, and GIFs
compassCompile SASS to CSS using Compass
htmlminMinify HTML files

.

Few Notable Plugins

Uglify [JS Parsing, Magling, Minification, Compression & Beautification]

  • This tasks delegates to UglifyJS2, so consider UglifyJS2 Documentation for advanced task configurations
  • Uglify performs JavaScript parsing, magling, minification, compression and beautification via UglifyJS2
  • This plugin can also add a banner or header text to each javascript file and minifies them using grunt uglify
  • Install plugin to project folder by executing from shell in root folder of project npm install grunt-contrib-uglify --save command.
  • This will add an entory to package.json file. Now inside gruntfile.js add following lines
	//Load plugin
    grunt.loadNpmTasks('grunt-contrib-uglify');
	
	//Plugin configuration
    uglify: {
      options: {
        banner: '/*\nPKG: <%= pkg.name %>\nVER: <%= pkg.version %>\nREPO: <%= pkg.repository.url %>\nAUTHOR: <%= pkg.author %>\nUGLIFIED: <%= grunt.template.today("dd-mm-yyyy") %> \n*/\n'
      },
      build: {
        files: {
          'js/image-dialog.min.js': ['js/image-dialog.js']
        }
      }
    }

jshint

  • JShint is a JavaScript code quality tool, see DEMO
  • JShint documentation is availaible here
  • Execute grunt jshint and you’ll see code quality errors in your JavaScript files
  • You’ve to place this file in repository root for same as ‘.jsintrc’ for this to work
    {
      "node": true,
      "esnext": true,
      "bitwise": true,
      "camelcase": true,
      "curly": true,
      "eqeqeq": true,
      "immed": true,
      "indent": 2,
      "latedef": true,
      "newcap": true,
      "noarg": true,
      "quotmark": "single",
      "regexp": true,
      "undef": true,
      "unused": true,
      "strict": true,
      "trailing": true,
      "smarttabs": true,
      "white": true
}
  • Install plugin to project folder by executing npm install grunt-contrib-jshint --save command.
  • This will add an entory to package.json file. Now inside gruntfile.js add following lines
	//Load plugin
    grunt.loadNpmTasks('grunt-contrib-jshint');
	
	//Plugin configuration
	jshint: {
		all: ['assets/languages/*.js']
	},

Many more cool GRUNT PLUGIN compilation at:

https://gitlab.com/refgits/essential-grunt-plugins.git

smile