Saturday, March 28, 2015

Sample Grunt.js file for your javascript project

Grunt is a well-known javascript task runner. To set up your project for development and production you can use grunt to automating few steps like creating css files from your LESS or SASS module, combining all your javascript files to a single one, compressing your javascript, etc.

In this post I am going to explain a sample gruntfile for javascript project, I am not covering CSS part of the project in this post.

Follow the below steps:


Create a project directory, for example learninggrunt

Navigate to learninggrunt directory in your command prompt/terminal.

Execute the following command:

npm init

The above command will ask you various question, for now just type yes in every option and leave it.

Now you will see a package.json file created in learninggrunt folder/directory.

Execute the following commands:

npm install grunt --save-dev
npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
If above commands are successfully executed then create a gruntfile.js in learninggrunt directory.

The project folder structure you can create similar to this:



  
  • The 'dist' directory contains the uglified/minified/compressed javascript file along with it's map file.
  • The 'src' directory contains all your javascript source code
  • The 'lib' directory contains any library that  you are using in your current project, for example I am using AngularJS.


The content of gruntfile.js is below: 

module.exports = function(grunt) {
  grunt.initConfig({
    clean: {

      release: ["dist"]
    },
    uglify: {
      dev_target: {
        sources: {
          src: 'src/**/*.js'
        },
        options: {
          sourceMap: true
        },
        files: {
          'dist/main.js': ['lib/angular-1.3.15/angular.js', 'src/**/*.js']
        }
      },
      prod_target: {

        files: {
          'dist/main.js': ['lib/angular-1.3.15/angular.min.js', 'src/**/*.js']
        }
      }
    },
    watch: {
      files: ['<%= uglify.dev_target.sources.src %>'],
      tasks: ['uglify:dev_target']
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.registerTask('build_dev', ['clean', 'uglify:dev_target', 'watch']);
  grunt.registerTask('build_prod', ['clean', 'uglify:prod_target']);
};

Next you can run the build_dev or build_prod task like the below command under the learninggrunt directory:

grunt build_dev(For development release )

grunt build_prod(For production release)


After executing build_dev grunt task you will find main.js and main.js.map files:







The map file helps you to debug the javascript source code in browser.


After executing build_prod grunt task you will find only main.js file, you do not need a debugging feature in production environment.





So you can just send your 'dist' directory to production server or any module that is dependent on the feature you are developing. The main.js file contains all your javascript code which you have developed in 'src' folder along with required libraries.

1 comment:
Write comments
  1. It is nice blog Thank you porovide important information and i am searching for same information to save my time AngularJS4 Online Training

    ReplyDelete