Automate AngularJS Build Using Grunt

Grunt is very popular tool for creation build and deployment of application. Grunt is responsible to automate all thing after development, it’s very handy and easy to use, in previous article Grunt – JavaScript Task Runner for Automate Your Development, We have learnt how to install 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 framework now days, Every backend language uses angular technology for frontend 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,

What I will do:

We are concatenating all js/css files into single file then minified this js/css file.I am assuming you have installed npm and grunt, if not please refer previous tutorial .

Folder Structure:

grunt with angular

Where As :

.tmp : This folder will store result of concate css and js file.
dist : This folder will contain you build all 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.
Source: Your source code of application.

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

Step 2: I have created 'source' and 'dist' folder, The source folder will contains your source file css/style.css,css/bootstrap.css and js/bootstrap.js, js/common.js file 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.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "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 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.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--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, 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).