[Grunt] Minifying your output with grunt-uglify

For production we want to use minified javascript to reduce the payload that is sent from the server. This can easily be accomplished with grunt-uglify.

 

Install:

---

npm install grunt-contrib-uglify --save-dev

 

Example:

---

 

 

/**
 * Created by Answer1215 on 11/16/2014.
 */
module.exports = function(grunt) {
    grunt.initConfig({
        stylus:{
            compile:{
                options: {
                    compress: false
                },
                files: {
                    "app/css/app.css": "styl/app.styl"
                }
            }
        },
        watch:{
            stylus:{
                files: ['styl/**/*.styl'],
                tasks: ['stylus:compile']
            },
            css:{
                options: {livereload: true},
                files: ['app/css/**.css']
            },
            html:{
                options: {livereload: true},
                files: ['**.html']
            },
            script: {
                options: {livereload: true},
                files: ['app/js/**.js']
            }
        },
        concat:{
            options: {
                separator: ';'
            },
            js:{
                src: ['bower_components/angular/angular.min.js', 'app/js/app.js', 'app/js/**.js'],
                dest: "build/app.js"
            }
        },
        uglify: {
            js: {
                src: ["build/app.js"],
                dest: "build/app.min.js"
            }
        }
    });


    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-stylus');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
}

 

Use:

---

 

grunt uglify