Grunt前端自动化工具常用插件

1、使用uglify压缩js文件：grunt-contrib-uglify

//包装函数
module.exports = function(grunt) {
    // 项目配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),//读取grunt配置项
        uglify : {
            options : {
          //此处定义banner注释将插入到压缩文件的顶部
                banner : '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build : {
                src : 'src/<%=pkg.file %>.js',
                dest : 'dest/<%= pkg.file %>.min.js'
            }
        }
    });
    // 加载"uglify"任务插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 默认任务
    grunt.registerTask('default', ['uglify']);
};

2、清理文件和文件夹：grunt-contrib-clean

module.exports = function(grunt) {
    grunt.initConfig({
        clean : {
            build : ['.tmp', 'build'],
            release : ['release']
        }
    });
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.registerTask('default', ['clean']);
};

3、合并文件： grunt-contrib-concat

module.exports = function(grunt) {
    // 项目配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            options : {
                separator : ';'//定义一个用于插入合并输出文件之间的符号
            },
            dist : {
                src : ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],//将要合并的js
                dest : 'dest/libs.js'//合并后的js和存放的位置
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 默认任务
    grunt.registerTask('default', ['concat']);
}

4、合并并压缩文件：方式一、先合并再压缩，首先将三个文件合并成一个文件libs.js，然后再将文件libs.js压缩成libs.min.js

module.exports = function(grunt) {
    // 项目配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat : {
            options : {
                separator : ';'
            },
            dist : {
                src : ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
                dest : 'dest/libs.js'
            }
        },
        uglify : {
            build : {
                src : 'dest/libs.js',
                dest : 'dest/libs.min.js'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    // 默认任务
    grunt.registerTask('default', ['concat', 'uglify']);
}

方式二：先压缩后合并，其实这里只需要grunt-contrib-uglify一个插件就可以完成代码的压缩及合并。

module.exports = function(grunt) {
    // 项目配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        uglify : {
            "target" : {
                "files" : {
                    'dest/libs.min.js' : ['src/zepto.js', 'src/underscore.js', 'src/backbone.js']
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 默认任务
    grunt.registerTask('default', ['uglify']);
}

5、CSS文件压缩grunt-contrib-cssmin

cssc: {
            build: {
                options: {
                    consolidateViaDeclarations: true,
                    consolidateViaSelectors: true,
                    consolidateMediaQueries: true
                },
                files: {
                    'build/css/master.css': 'build/css/master.css'
                }
            }
        }