周末有点懒，跑去看了《智取威虎山》，手撕鬼子的神剧情节被徐老怪一条回忆线就解释过去了，牛到极致尽是这种四两拨千斤的处理方式，手撕加分，四星推荐。
-----------------------------闲话分割线-----------------------------
concat、cssmin、uglify对应的分别是合并、css压缩、js压缩混淆，至于为什么把这三个放在一起，在后面的usemin模块会给出解释。
concat(V0.5.0)的options(github地址)
separator: 就是源文件之间的分隔符，默认是grunt.util.linefeed，也就是换行符。如果源文件是js，而且之后需要进行uglify，将此option改为";"
- banner: 目标文件的头部注释，默认是""
- footer: 目标文件的底部注释，默认是""
- stripBanners: 合并时是否删除源文件头部的注释，默认false
- process: 对目标文件进行内容替换，接受三种类型：Boolean、Funtion、Object。有两种替换模式，一种是设为function进行全部替换，一种是设为true或object进行模板（<% =var %>）替换。
- 新建两个文件，分别为helloworld.js
(function(){
console.log('hello world');
})();hellogrunt.js
(function(){
console.log('hello grunt');
})(); - 在Gruntfile.js中进行配置
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
var path = {
dest: 'dest/',
src: 'src/'
};
grunt.initConfig({
gpath: path,
concat: {
test: {
files: [
{
src: '<%= gpath.src %>*.js',
dest: '<%= gpath.src %>hello.js'
}
]
}
}
});
grunt.registerTask('default', ['concat']);
}; - 以上是一个不设置process的concat任务，输出的目标文件
(function(){
console.log('hello grunt');
})();
(function(){
console.log('hello world');
})(); - 将process设置为Function，修改Gruntfile.js中的concat:test如下
test: {
options: {
process: function(src, filepath) {
return src.replace(/hello/g, 'hi');
}
},
files: [
{
src: '<%= gpath.src %>*.js',
dest: '<%= gpath.dest %>hello.js'
}
]
}目标文件
(function(){
console.log('hi grunt');
})();
(function(){
console.log('hi world');
})(); - 将process设置为true，这样源文件中就可以使用模板了，Gruntfile.js不贴了，源文件如下
(function(){
if(<%= concat.test.options.process %>) {
console.log('hello world');
}
})();目标文件
(function(){
console.log('hello grunt');
})();
(function(){
if(true) {
console.log('hello world');
}
})();需要注意的是，当process设为true时模板的Global对象是grunt.initConfig的传入参数，如果想修改Global对象，往下看
- 将process设为Object，Global对象放在data属性中，Gruntfile如下
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
var path = {
dest: 'dest/',
src: 'src/'
}, global = {
bool: true
};
grunt.initConfig({
gpath: path,
concat: {
test: {
options: {
process: {
data: global
}
},
files: [
{
src: '<%= gpath.src %>*.js',
dest: '<%= gpath.src %>hello.js'
}
]
}
}
});
grunt.registerTask('default', ['concat']);
};源文件
(function(){
if(<%= bool %>) {
console.log('hello world');
}
})();输出的目标文件如5
- sourceMap、sourceMapName、sourceMapStyle: 暂未研究，待以后补充
cssmin(V0.11.0)的options（github地址）
- report: 接受'min' and 'gzip'，默认前者，生成的文件都是一样的（不知道是否和我环境是window有关），选择'gzip'时会汇报gzip文件的大小
//min
Running "cssmin:test" (cssmin) task
File dest/base.css created: 2.95 kB → 2.34 kB
File dest/main.css created: 1.05 kB → 954 B
//gzip
Running "cssmin:test" (cssmin) task
File dest/base.css created: 2.95 kB → 2.34 kB → 803 B (gzip)
File dest/main.css created: 1.05 kB → 954 B → 428 B (gzip)
uglify(V0.7.0)的options（github地址）
- mangle: 混淆，接受两种类型：Boolean、Object，默认值是{}
源文件helloworld.js(function() {
var hello = 'hello ',
world = 'world';
console.log(hello + world);
})();当不设置mangle时，目标文件helloworld.min.js
!function(){var a="hello ",b="world";console.log(a+b)}();设置mangle为false时，目标文件
!function(){var hello="hello ",world="world";console.log(hello+world)}();设置mangle为Object时，将不进行混淆的变量放置在"except"属性中
mangle: {
except: ['hello']
}目标文件
!function(){var hello="hello ",a="world";console.log(hello+a)}(); - compress: 压缩，去除不必要的代码，接受两种类型：Boolean、Object，默认值是{}。当类型是Object时属性略多，贴出官方地址，以下仅演示global_defs属性的应用
开发时期下需要打log，而上线后需要将log去除，那么就可以用到compress的global_defs属性
源文件(function(){
var hello = 'hello ',
world = 'world';
DEBUG&&console.log(hello + world);
DEBUG&&alert(hello + world);
})();开发环境下的Gruntfile.js
compress: {
global_defs: {
DEBUG: true
}
}目标文件
!function(){var a="hello ",b="world";!0&&console.log(a+b),!0&&alert(a+b)}();发布环境下的Gruntfile.js
compress: {
global_defs: {
DEBUG: false
}
}由于所有的执行代码全部被取消，生成的目标文件为空文件
PS: 以上是为了演示global_defs的用处，如果要简单的去除console语句，可以直接用drop_console（默认false）属性
源文件(function(){
var hello = 'hello ',
world = 'world';
console.log(hello + world);
alert(hello + world);
})();Gruntfile.js
compress: {
drop_console: true
}目标文件
!function(){var a="hello ",b="world";alert(a+b)}(); - beautify: 一般可理解为保留换行，接受两种类型：Boolean、Object，默认值是false。参数比较多，官方地址。
- expression: 将一段JSON字符串解析成一个标准的JSON，与mangle、compress冲突，默认为false
- enclose: 将js使用匿名函数wrap，与mangle冲突，接受Object，默认为undefined
Gruntfile.js
compress: false,
mangle: false,
enclose: {
'window.name': 'name',
}源文件
(function() {
var hello = 'hello ',
world = 'world';
console.log(hello + world + name); //name为外部变量
})();目标文件
!function(name){!function(){var hello="hello ",world="world";console.log(hello+world+name)}()}(window.name); - wrap: 将js使用匿名函数wrap，并对外暴露一个对象作为接口，与mangle冲突，接受String，默认为undefined
Gruntfile.jsmangle: false,
wrap: 'test'源文件
(function() {
var hello = 'hello ',
world = 'world';
exports.name = hello + world; //exports为对外暴露的对象
console.log(window.test.name); //test为上面设置的wrap，对应exports
})();目标文件
!function(exports,global){global.test=exports,function(){var hello="hello ",world="world";exports.name=hello+world,console.log(window.test.name)}()}({},function(){return this}()); - maxLineLen: 每行限制长度，为0取消限制，接受Number，默认为32000
- ASCIIOnly: 将js中的非ASCII字符用unicode表示，默认为false
- exportAll: 将js中的所有变量自动添加到exports
源文件//注意不在匿名函数里面了
var hello = 'hello ',
world = 'world';
exports.name = hello + world;
console.log(window.test.name);Gruntfile.js
mangle: false,
wrap: 'test',
exportAll: true目标文件
!function(exports,global){global.test=exports;var hello="hello ",world="world";exports.name=hello+world,console.log(window.test.name),exports.hello=hello,exports.world=world}({},function(){return this}()); - preserveComments: 保留注释相关，接受false、'all'、'some'、Function
/*!
* comment 'all' 'some' 保留
*/
// @preserve preserve 'all' 'some' 保留
// @license license 'all' 'some' 保留
// @cc_on cc_on 'all' 'some' 保留
// @tarol 'all' 保留
(function() {
console.log('hello world');
})();Funtion传入参数arguments[1].value为注释内容，返回true则保留该注释
- banner、footer: 略
- sourceMap、sourceMapName、sourceMapIn、sourceMapIncludeSources: 关于压缩后的.map文件的选项，关于.map文件，详情可见阮一峰老师的BLOGsourceMap: 设置为true则生成.map文件，默认为false
sourceMapName: 重新定义.map文件的名字，压缩后的js中对.map的引用会同时更新
sourceMapIn: 涉及Coffee，不懂，不妄言
sourceMapIncludeSouces: 是否在.map文件中添加源文件到sourcesContent属性
-----------------------------结尾分割线-----------------------------
心力憔悴，这样写有点累，下篇介绍clean和copy，怎么写看心情。