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.
