周末有点懒，跑去看了《智取威虎山》，手撕鬼子的神剧情节被徐老怪一条回忆线就解释过去了，牛到极致尽是这种四两拨千斤的处理方式，手撕加分，四星推荐。

-----------------------------闲话分割线-----------------------------

　　concat、cssmin、uglify对应的分别是合并、css压缩、js压缩混淆，至于为什么把这三个放在一起，在后面的usemin模块会给出解释。

　　concat的options(github地址)

1. separator: 就是源文件之间的分隔符，默认是grunt.util.linefeed，也就是换行符。如果源文件是js，而且之后需要进行uglify，将此option改为";"

2. banner: 目标文件的头部注释，默认是""
3. footer: 目标文件的底部注释，默认是""
4. stripBanners: 合并时是否删除源文件头部的注释，默认false
5. process: 对目标文件进行内容替换，接受三种类型：Boolean、Funtion、Object。有两种替换模式，一种是设为function进行全部替换，一种是设为true或object进行模板（<% =var %>）替换。
1. 新建两个文件，分别为helloworld.js

   (function(){    console.log(‘hello world‘);})();

   hellogrunt.js

   (function(){    console.log(‘hello grunt‘);})();

    

2. 在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‘]);};

    

3. 以上是一个不设置process的concat任务，输出的目标文件
   

   (function(){    console.log(‘hello grunt‘);})();(function(){    console.log(‘hello world‘);})();

    

4. 将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‘);})();

    

5. 将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对象，往下看

6. 将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

6. sourceMap、sourceMapName、sourceMapStyle: 暂未研究，待以后补充

　　cssmin的options（github地址）

1. report: 接受‘min‘ and ‘gzip‘，默认前者，生成的文件都是一样的（不知道是否和我环境是window有关），选择‘gzip‘时会汇报gzip文件的大小
   

   //minRunning "cssmin:test" (cssmin) taskFile dest/base.css created: 2.95 kB → 2.34 kBFile dest/main.css created: 1.05 kB → 954 B//gzipRunning "cssmin:test" (cssmin) taskFile 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的options（github地址）

1. 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)}();

2. 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)}();

    

3. beautify: 一般可理解为保留换行，接受两种类型：Boolean、Object，默认值是false。参数比较多，官方地址。
4. expression: 将一段JSON字符串解析成一个标准的JSON，与mangle、compress冲突，默认为false
5. 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);

    

6. wrap: 将js使用匿名函数wrap，并对外暴露一个对象作为接口，与mangle冲突，接受String，默认为undefined
   Gruntfile.js
   

   mangle: 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}());

    

7. maxLineLen: 每行限制长度，为0取消限制，接受Number，默认为32000
8. ASCIIOnly: 将js中的非ASCII字符用unicode表示，默认为false
9. 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}());

    

10. 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则保留该注释

11. banner、footer: 略
12. sourceMap、sourceMapName、sourceMapIn、sourceMapIncludeSources: 暂略

-----------------------------结尾分割线-----------------------------

心力憔悴，这样写有点累，下篇介绍clean和copy，怎么写看心情。

concat、cssmin、uglify