uglify使用随记

最新推荐文章于 2023-06-19 15:56:49 发布

原创最新推荐文章于 2023-06-19 15:56:49 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uglify #options

本文详细介绍uglifyJS的配置选项，包括变量名混淆、生成sourceMap、去除console.log等实用功能，并提供实际配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uglify压缩js代码不仅仅是去除空格和注释，还能混淆

参数

mangle ：true/false 是否混淆变量名

sourceMap：true/false 是否生成map文件，map文件的具体用法和作用请参考阮大的文章《Source Map 详解》
传送门→http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.htmlJavaScript

sourceMapName：接受一个字符串参数，可以指定map文件存放的位置以及文件名

drop_console：ture/false 是否去掉console.log()（这个比较6）

beautify：true/false 是否格式化代码，为了方便debug，但是有了sourceMap，这个参数的作用微乎其微，还有一个可选参数width，默认值为80，代表每一行的字符数，可以改动数值，自行体会一下

banner：参数为一个字符串，作为顶部注释一同写入压缩后的文件中

footer：参数为一个字符串，作为底部注视一同写入压缩后的文件中

preserveComments：参数为字符串 ‘all’/ ‘some’和false all是保留所有注释，some保留部分注释，比如用！标记的注释和类似于@preserve，@aa等类型的注释（官方文档解释） 2.0.0版本只有all和false有作用，还未弄清楚如何使用some

grunt.initConfig({
  uglify: {
    options: {
      mangle: false,  //不混淆变量名

      sourceMap: true,  //生成map文件

      sourceMapName: 'path/to/sourcemap.map',

      compress: {
        drop_console: true
      },  //去掉所有的console.log()

      beautify:{
        width: 80,
        beautify: true
      },  //格式化代码

     banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
        '<%= grunt.template.today("yyyy-mm-dd") %> */',  //顶部注释  动态获取package文件中的信息

     footer:'\n/*! <%= pkg.name %> 最后修改于： ' + 
        '<%= grunt.template.today("yyyy-mm-dd") %> */',  //底部注释  动态获取package文件中的信息

     preserveComments: 'all'  //保留所有注释

    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

Compiling all files in a folder dynamically
操作文件夹下的所有js文件，进行压缩，并按原文件结构放到目标文件夹中


grunt.initConfig({
  uglify: {
    my_target: {
      files: [{
          expand: true,
          cwd: 'src/js',   //源文件夹
          src: '**/*.js',  //需要压缩的源文件
          dest: 'dest/js'  //压缩后文件存放的目标文件夹
      }]
    }
  }
});

最后附上一篇很棒的传送门→http://www.cnblogs.com/artwl/p/3449303.html