Automate AngularJS Build Using Grunt JS(Task Runner)

Grunt is very popular build tool for creation build and deployment of application. Grunt JS is responsible to automate all thing after development, it’s very handy and easy to use, We have learn how to install grunt and use GRUNT in your application, here is I am describing use of grunt with angular application.

Why i use angular:

Angular is very popular front-end framework now days, Every back-end language uses angular technology for front end UI creation, Angular application has a lot of js and css file that can be used to concatenate all files and minified these file into single js/css file.

You can also check other tutorial of angular,

• Angular Loading spinner or Preloading image with finally

What I will do:

We can concatenate all js/css files into single file then minified this js/css file.I am assuming you have installed npm and grunt.

Folder Structure:

Where As :

.tmp : This folder will store result of concatenate css and js files.
dist : This folder will contain all your build files with minified css and js file.
node_modules: This folder will keep all dependent modules of grunt that you will use in your grunt task runner project that will help to create build.
Source: Your source code of application.

Step 1: We need to create a folder, where we will run grunt task. I have created 'test-grunt' folder.

Step 2:We have created 'source' and 'dist' folder, The source folder will contain your source code files css/style.css,css/bootstrap.css and js/bootstrap.js, js/common.js and /dist folder will store your angularjs build files.

Step 3: I have create package.json file and put the below code into this file.

{
  "name": "phpflow-Test-Project",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
 "grunt-contrib-concat": "~0.3.0",
 "grunt-contrib-uglify": "~0.2.7",
 "grunt-contrib-cssmin": "~0.7.0",
 "grunt-usemin": "~2.0.2",
 "grunt-contrib-copy": "~0.5.0",
 "grunt-contrib-clean": "~0.5.0",
 "grunt-cache-breaker" : "~1.0.1"
  }
}

This file is containing all grunt dependency module list and responsible to load all modules in your application.

Step 4: I have create Gruntfile.js and put the below code into this file.

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
  
        clean: ["dist", '.tmp'],
  
        copy: {
             main: {
                expand: true,
                cwd: 'source/',
                src: ['**'],
                dest: 'dist/'
            }
        },
  
        useminPrepare: {
            html: 'source/index.html'
        },
  
        usemin: {
            html: ['dist/index.html']
        },
 
        uglify: {
            options: {
                report: 'min',
                mangle: false
            }
        },
  
  cachebreaker: {
   dev: {
            options: {
               match: ['dist/assets/js/phpflow.min.js', 'dist/assets/phpflow.min.css']
            },
            files: {src: ['dist/index.html']}
         }
  }
    });
 
    grunt.loadNpmTasks('grunt-contrib-clean');
    
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-usemin');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-cache-breaker');
 
    // Tell Grunt what to do when we type "grunt" into the terminal
    grunt.registerTask('default', [
        'useminPrepare', 'copy', 'concat', 'uglify', 'cssmin', 'usemin','cachebreaker']);
  
};

Above file is responsible to run task for your activities what you defined in this file, the sequence of task run would be as mentioned in last line of this file.

Step 5: Now we have defined which file we used for concatenate and minifying, we will list down all file like below between build comment tag.

<!--phpflow CSS -->
      <!-- build:css assets/css/phpflow.min.css -->
                      <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
                      <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-theme.css">
                      <link rel="stylesheet" type="text/css" href="assets/css/animate.css">
      <!-- endbuild -->
  
  <!--phpflow JS -->
 <!-- build:js assets/js/phpflow.min.js -->
      <script src="assets/libs/jquery-2.1.1.js"></script>
      <script src="assets/libs/jquery-ui-1.10.4.js"></script>
      <script src="assets/libs/bootstrap.js"></script>
 <!-- endbuild -->

Step 6: Now open cmd line and got to project folder and run 'npm install'.
above command will download all dependency files in to your project and kept into node_modules/ folder.

Step 7: Now run 'grunt' command, this will done all tasks of listed grunt file Gruntfile.js, like copy the file and concatenate then minimized all css and js files and store into single file.

You can download source code from below link.

I hope its help, You have any question feel free to drop a mail (find on contact us page).