concat、cssmin、uglify

浏览数：48 / 时间：2015年06月09日

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

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

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

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

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