grunt之concat、cssmin、uglify

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

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

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

　　concat(V0.5.0)的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(V0.11.0)的options（github地址）

1. 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地址）

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: 关于压缩后的.map文件的选项，关于.map文件，详情可见阮一峰老师的BLOGsourceMap: 设置为true则生成.map文件，默认为false
    sourceMapName: 重新定义.map文件的名字，压缩后的js中对.map的引用会同时更新
    sourceMapIn: 涉及Coffee，不懂，不妄言
    sourceMapIncludeSouces: 是否在.map文件中添加源文件到sourcesContent属性

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

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