Getting Started With Grunt Task Runner

• HTML file minification
• JavaScript file minification
• CSS file compression
• A task to create final build

I have created a sample project with the below folder structure:



Root folder contains app, dist, node_modules, Gruntfile.js and package.json:

• App folder is used as the development folder.
• Dist will be used as the distribution folder where all optimized folder will be stored. Initially its blank.
• Node_modules, Gruntfile.js and package.json are required to run Grunt command.

Now, let’s add tasks to Gruntfile.js

Remove all contents of “dist” folder

1. Run below command in command line:
   
   npm install grunt-contrib-clean --save-dev
   
   
2. Add below code in Gruntfile.js:
   
   1. grunt.registerTask('removeAllContents', ‘Removes all files/folders of “dist” folder’, function(){
   2. grunt.config('clean', {
   3. contents: ['dist/*']
   4. });
   5. grunt.task.run('clean');
   6. });
   8. grunt.loadNpmTasks(‘grunt-contrib-clean’);
3. Run below command in command line:
   
   grunt removeAllContents

This will remove all contents of the “dist” folder.

Copy all folders from “app” to “dist”

1. Run below command in command line:
   
   npm install grunt-contrib-copy --save-dev
   
   
2. Add below code in Gruntfile.js:
   
   1. grunt.registerTask('createFolderStructure', "Copies all subdirectories to dist folder", function(){
   2. grunt.config('copy', {
   3. main: {
   4. expand: true,
   5. cwd: 'app',
   6. src: '**',
   7. dest: 'dist/',
   8. filter: 'isDirectory'
   9. }
   10. });
   11. grunt.task.run('copy');
   12. });
   14. grunt.loadNpmTasks(‘grunt-contrib-copy);
3. Run below command in command line:
   
   grunt createFolderStructure
   
   This command should copy css and js folders to “dist” folder without copying its inner finesl. We don’t need inner files as we need minified version of css and js files.

Minify CSS file

1. Run below command in command line:
   
   npm install grunt-contrib-cssmin--save-dev
   
   
2. Add below code in Gruntfile.js:
   
   1. grunt.registerTask('minifyCSSFiles', "Minifies all CSS files", function(){
   2. grunt.config('cssmin', {
   3. target: {
   4. files:{
   5. 'dist/css/style.min.css': ['app/css/style.css']
   6. }
   7. }
   8. });
   9. grunt.task.run('cssmin');
   10. });
   12. grunt.loadNpmTasks('grunt-contrib-cssmin');
3. Run below command in command line:
   
   grunt minifyCSSFiles
   
   This command should create a new minified CSS file named style.min.css in dist/css folder. For more on CSS Minification using Grunt, please visit official site.

Minify JavaScript file

1. Run below command in command line:
   
   npm install grunt-contrib-uglify--save-dev
   
   
2. Add below code in Gruntfile.js:"
   
   1. grunt.registerTask('minifyJSFiles', "Minifies all JS files", function(){
   2. grunt.initConfig({
   3. uglify: {
   4. my_target: {
   5. files: {
   6. 'dist/js/main.min.js': ['app/js/main.js']
   7. }
   8. }
   9. }
   10. });
   11. grunt.task.run('uglify');
   12. });
3. Run below command in command line:
   
   grunt minifyJSFiles
   
   This command should create a new minified JS file named main.min.js in dist/js folder. For more on JS minification, please visit the official site.

Prepare index.html file

1. Run below command in command line:
   
   npm install grunt-htmlcompressor--save-dev
   
   
2. Add below code in Gruntfile.js:
   
   1. grunt.registerTask('minifyHTMLFiles', "Minifies all JS files", function(){
   2. var strData = grunt.file.read('app/index.html', {encoding: 'utf8'});
   4. objReg = /css\/style.css/gi;
   5. strData = strData.replace(objReg, 'css/style.min.css');
   7. objReg = /js\/main.js/gi;
   8. strData = strData.replace(objReg, 'js/main.min.js');
   10. grunt.file.write('dist/index.html' , strData );
   12. grunt.initConfig({
   13. htmlcompressor: {
   14. compile: {
   15. files: {
   16. 'dist/index.html': 'dist/index.html'
   17. },
   18. options: {
   19. type: 'html',
   20. preserveServerScript: true
   21. }
   22. }
   23. }
   24. });
   25. grunt.task.run('htmlcompressor');
   26. });
   28. grunt.loadNpmTasks('grunt-htmlcompressor');
3. Run below command in command line:
   
   grunt minifyHTMLFiles
   
   This command should:
   
   
   • Replace main.js to main.min.js in the script tag of index.html.
   • Replace style.css to style.min.css in the style tag of index.html.
   • minify and create index.html in “dist” folder.

For more on “HTML minification” please visit the official site.

How to run all commands at once

To run all the tasks on one enter, we need to arrange them sequentially. Update the code in Gruntfile.js as shown below: