grunt-contrib-uglify v0.5.0 使用 UglifyJS 压缩文件

Question

Getting Start

这个插件需要 Grunt ^0.4.0 支持（译注：0.4.0或以上版本）。

如果在此之前你还没用过Grunt，最好先阅读一下Getting Start指南，这个指南解释了如何创建Gruntfile以及如何安装和使用Grunt插件。一旦你熟悉这个过程之后，可以使用下面这条命令安装这个插件：

npm install grunt-contrib-uglify --save-dev

安装好插件之后，还需要在你的Gruntfile中使用下面这行JavaScript启用这个插件：

grunt.loadNpmTasks('grunt-contrib-uglify');

Uglify Task

可以使用grunt uglify命令运行这个任务

任务目标(target)，文件和选项的指定和任务配置指南中的描述一致即可。

2.x到3.x升级注意事项

3.x版引入了更改source map配置介绍。但是如果你不用source map选项可以无缝升级。如果要用source map，请阅读下面的说明。

移除的选项

sourceMapRoot - source 位置现在会在sourceMap选项设置为true的时候给你计算。

sourceMapPrefix - 综合上述原因这个就不需要了。

sourceMappingUrl - 这个也是自动计算的。

改变的选项

sourceMap - 只接受一个Boolean值。生成一个带默认名字的map文件。

新选项

sourceMapName - 接受一个字符串或者改变map位置或名称的函数。

sourceMapIncludeSources - 直接将源文件的内容嵌入到 map expression 中 - 接受一个Boolean只。解析单个表达式（JSON或者是独立函数）。

选项

这个任务主要是委托给UglifyJS2做，因此请考虑将UglifyJS 文档作为高级配置的必读文档。

mangle

类型：Boolean Object

默认值：{}

开启或关闭缩短变量名的默认选项。如果指定一个Object，会直接传递给ast.mangle_names()和ast.compute_char_frequency()（模仿命令行行为）。

compress

类型：Boolean Object

默认值：{}

开启或关闭文件压缩的默认选项。如果指定一个Object，会作为选项传递给UglifyJS.Compressor()。

beautify

类型：Boolean Object

默认值：false

开启美化生成的源代码。Object会被合并，并且和选项一起被发送给UglifyJS.OutputStream()。

expression

类型：Boolean

默认值：false

解析单个表达式，而不是程序（解析JSON）。

report

选项：'min'，`'gzip'

默认值：'min'

要么到处压缩结果，要么到处压缩并启用gzip的结果。这对于查看clean-css到底是如何执行的很有用，但是在任务中使用需要5-10倍的时间才能完成。示例输出。

sourceMap

类型：Boolean

默认值：false

如果设置为 true，会在目标文件相同目录生成一个source map文件。默认情况下和目标文件同名，但是带有一个 .map 扩展名。

sourceMapName

类型：String Function

默认值：undefined

为了自定义生成的 source map 的名称或者位置，可以传入一个字符串来指示在哪里写入 source map 文件。如果提供一个函数，uglify 目标会作为参数传入，并且其返回值会用作文件名。

sourceMapIn

类型：String Function

默认值：undefined

从预编译中输入的 source map 的位置，比如从CoffeeScript中。如果提供一个函数，uglify source 会作为参数传递，并且其返回值将被用作 sourceMap 名称。这只在只有一个源文件的时候有意义。

sourceMapIncludeSources

类型：Boolean

默认值：false

如果你想将源文件内容包含到source map 的 sourcesContent 属性中就要传递这个标记。

enclose

类型：Object

默认值：undefined

用一个可配置的参数列表将所有的代码包裹在闭包里面，enclose对象中的每个键值(key-value)对实际上就是一个参数对。

wrap

类型：String

默认值：undefined

将所有代码包裹到闭包中，一种确保没有遗漏的简单方式。对于变量需要公共的 export 和 global 变量让其有效。包裹的值也就是全局变量到处的可用信息。

exportAll

类型：Boolean

默认值：false

当使用 wrap 的时候会让所有的全局函数和变量通过export变量使用。

preserveComments

类型：Boolean String Function

默认值：undefined

选项：false 'all' some

开启注释保留：

• false 移除所有注释
• 'all' 保留还没有被压缩或移除的代码块中的所有注释
• 'some' 保留以!开头的或者包含一个closure compiler风格指令（@preserve，@lisence，@cc_on）的所有注释。
• Function 指定自己的注释保留函数。将会传入当前节点和注释并预期返回true或false。

banner

类型：String

默认值：空字符串

这个字符串会前置插入压缩后的输出中。模板字符串（比如：`<%= config.value %>）会被自动解析。

footer

类型：String

默认值：空字符串

这个字符串会插入呀所有的输出中。模板字符串（比如：`<%= config.value %>）会被自动解析。

用例

基本压缩

这个配置会使用默认选项压缩和缩减输入的文件。

// 项目配置
grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/input2.js']
      }
    }
  }
});

不压缩变量名

指定mangle:false可以阻止改变变量和函数名。

// Project configuration.
grunt.initConfig({
  uglify: {
    options: {
      mangle: false
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

保留标识符

你可以在mangle选项中使用except数组指定保持不变的标识符、

// Project configuration.
grunt.initConfig({
  uglify: {
    options: {
      mangle: {
        except: ['jQuery', 'Backbone']
      }
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

Source maps

通过设置sourceMap选项为true生成source map文件。生成的source map会保存在和目标文件相同的目录中。它的名称也与目标文件同名，但是带有一个.map扩展名。可以使用sourceMapName属性覆盖这个默认设置。

// Project configuration.
grunt.initConfig({
  uglify: {
    my_target: {
      options: {
        sourceMap: true,
        sourceMapName: 'path/to/sourcemap.map'
      },
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

高级 source maps

设置sourceMapIncludeSources选项为true将源文件直接嵌入map文件中。要从之前编译结果中引入source map文件将它传递给sourceMapIn选项即可。

// Project configuration.
grunt.initConfig({
  uglify: {
    my_target: {
      options: {
        sourceMap: true,
        sourceMapIncludeSources: true,
        sourceMapIn: 'example/coffeescript-sourcemap.js', // input sourcemap from a previous compilation
      },
      files: {
        'dest/output.min.js': ['src/input.js'],
      },
    },
  },
});

更多信息请参考 Uglify SourceMap 文档。

移除 console.* 函数

将drop_console: true指定为compress选项的一部分可以用来移除console.*系列函数的调用。

// Project configuration.
grunt.initConfig({
  uglify: {
    options: {
      compress: {
        drop_console: true
      }
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

代码美化

指定beautify: true可以美化代码便于调试和分析。传递一个对象来手动配置任何其他输出选项都会直接传递给UglifyJS.OutputStream()。

更多信息请查看UglifyJS Codegen 文档。

注意，手动配置需要显示设置beautify: true，如果你想照惯例，美化输出。

// Project configuration.
grunt.initConfig({
  uglify: {
    my_target: {
      options: {
        beautify: true
      },
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    },
    my_advanced_target: {
      options: {
        beautify: {
          width: 80,
          beautify: true
        }
      },
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

Banner 注释

在这个例子中，运行 grunt uglify:my_target 将会前置插入一个由插值 banner 模板字符串使用配置对象创建的banner。这里，这些属性是从package.json文件中导入的值（可以通过pkg这个配置属性访问）加今天的日期。

注意：不一定必须使用外部的JSON文件。也可以在配置里面有效的创建内联的 pkg 对象。也就说，如果你已经有JSON文件了，你不妨引用它。

// Project configuration.
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
        '<%= grunt.template.today("yyyy-mm-dd") %> */'
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

条件编译

还可以启用UglifyJS的条件遍历。通常用于为产品构建移除调试代码块。

更多信息请参考 UglifyJS 全局定义 文档。

// Project configuration.
grunt.initConfig({
  uglify: {
    options: {
      compress: {
        global_defs: {
          "DEBUG": false
        },
        dead_code: true
      }
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

动态的将所有文件编译到一个目录中

下面这个配置将会动态的编译和缩小文件。

// Project configuration.
grunt.initConfig({
  uglify: {
    my_target: {
      files: [{
          expand: true,
          cwd: 'src/js',
          src: '**/*.js',
          dest: 'dest/js'
      }]
    }
  }
});