concat、cssmin、uglify

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

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

  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文件的大小
    //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的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,怎么写看心情。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。