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

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

发布于 2020-10-13 字数 10996 浏览 953 评论 0

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

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

exportAll

类型:Boolean

默认值:false

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

preserveComments

类型:Boolean String Function

默认值:undefined

选项:false 'all' some

开启注释保留:

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

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'
      }]
    }
  }
});

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0