前言
现在前端自动化已经是家常便饭，各种工具也是层出不穷，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项目时候要保证严格的依赖注入风格，否则合并后会报错的。