[前端自动化]grunt的简单使用

前言

如今前端自动化已是屡见不鲜，各类工具也是层出不穷，grunt、gulp、webpack是应用最广的三种工具，虽然grunt看似已垂垂老矣，可是之前写的不少项目一直用的就是grunt，温故方能知新，这里把grunt的基本操做再记录一下。

grunt经常使用插件

开始使用grunt很简单，在项目的根目录中添加两份文件：package.json 和 Gruntfile.js。npm安装模块和插件的操做就不细说了，主要是在Gruntfile.js中填写配置代码。代码目录结构以下：

而后咱们就来介绍最经常使用的几个插件：

合并：grunt-contrib-concat

合并代码是咱们最须要的一个功能了，当项目变大而且模块不少的时候，就拿咱们这个angular的单页应用项目来讲，index页面会有一列的js代码，以下图所示：

咱们须要将这些js合并为一个文件，大大减小网络请求数量所以来提高性能。grunt-contrib-concat完美胜任，下面咱们来看看基本配置用法：

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            allInOne: {
                src: ['src/js/*.js'],
                dest: 'dest/js/<%= pkg.name %>.js'
            }         
        }
    });

    grunt.loadNpmTasks('grunt-contrib-concat');

    grunt.registerTask('default', ['concat']);
};

将src/js中全部js文件合并为一个js，放在dest/js目录下，名字为package.json中项目name。这时候项目目录中就会出现一个dest的文件夹，以下所示：

压缩：grunt-contrib-uglify

合并文件后，体积仍然比较大，上线以前要将代码压缩，所以咱们接着将上一步合并后的代码压缩，这里就须要用到grunt-contrib-uglify插件。仍然直接上配置代码：

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            allOne: {
                src: ['src/js/*.js'],
                dest: 'dest/js/<%= pkg.name %>.js'
            }         
        },
        uglify: {
            buildrelease: {
                options: {
                    report: "min" //输出压缩率
                },
                files: [{
                    expand: true, 
                    cwd: 'dest/js', //js目录
                    src: '**/*.js', //全部js文件
                    dest: 'dest/js', //输出到此目录下
                    ext: '.min.js' //指定扩展名
                }]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');

    grunt.registerTask('default', ['concat', 'uglify:buildrelease']);
};

这里我将concat后的js文件仍然输出到当前目录dest/js下，以下图所示：

引用替换：grunt-usemin（grunt-contrib-copy，grunt-contrib-clean）

使用上面两个插件合并压缩后，每次都须要手动去html页面中修改引用路径，这并非咱们想要的结果，而且直接在源版本上修改也不利于测试与发布，所以首先咱们须要用到grunt-contrib-copy插件，将源代码copy一份，而后在副本上进行压缩合并，这样不管是所有压缩仍是部分压缩就比较灵活了，copy以后就可使用grunt-usemin插件了，usemin是一个多任务插件，它包括两个任务，useminPrepare和usemin。
useminPrepare用来检测html页面中的脚本块，包括脚本文件的源路径，目的路径，从而更新后续须要使用到的Grunt任务的配置信息，如前面使用的concat，uglify。useminPrepare只是分析文件，获取文件及路径信息，不更新内容。HTML中的脚本块以下：

而usemin则进行文件引用替换，将源文件中的文件块替换为压缩文件。useminPrepare已经帮助咱们自动配置了concat，uglify针对的源文件以及目的文件的路径信息,所以就无需再手动配置concat和uglify任务了。配置代码以下

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        clean: {
            src: 'build/'
        },
        useminPrepare: {
            html: 'build/index.html',
            options: {
                dest: 'build'
            }
        },
        uglify: {
            buildrelease: {
                options: {
                    report: "min" //输出压缩率
                }
            }
        },
        usemin: {
            html: 'build/index.html',
            options: {
                dest: 'build'
            }
        },
        copy: {
            html: {
                files: [{
                    expand: true,
                    cwd: 'src',
                    src: '**/*',
                    dest: 'build/'
                }]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-usemin');

    grunt.registerTask('default', ['clean', 'copy', 'useminPrepare', 'concat', 'uglify', 'usemin']);
};

上面又引入了一个clean插件，每次构建时候先清除build目录，这样build目录就是咱们打包后的要的结果了。目录结构以下：

总结

以上就是grunt最基本的使用方法，为了简单方便，插件的不少配置并无介绍与使用，能够在此基础上查看官方文档使用更强的功能便可。项目代码使用的是大漠穷秋的angular实战的一个Demo，也是我入门angular的资料，须要注意的是打包angular项目时候要保证严格的依赖注入风格，不然合并后会报错的。

参考资料

1. 中文官网
2. usemin使用