使用 grunt-contrib-uglify 美化 javascript 代码

Question

我有以下文件：package.json

{
  "name": "uglify",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-uglify": "^3.0.0"
  }
}

还有以下文件：Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        uglify: {
            options: {
                beautify: true,
                mangle: {
                    properties: true
                }
            },
            log_sum_9: {
                src: 'log_sum_9.js',
                dest: 'log_sum_9.min.js'
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.registerTask('log_sum_9', ['uglify:log_sum_9']);
}

还有以下文件：log_sum_9.js

(function() {
    var
        sum = "2+3+4",
        calc = function(operation) {
            return eval(operation);
        }
    ;
    console.log(calc(sum));
})();

然后我做：

安装所需的 NodeJS 模块：

$ npm install

丑化log_sum_9.js:

$ grunt log_sum_9

然后我得到丑化文件：log_sum_9.min.js:

!function() {
    var sum = "2+3+4", calc = function(operation) {
        return eval(operation);
    };
    console.log(calc("2+3+4"));
}();

两个脚本都能正常工作：

$ node log_sum_9.js
9

$ node log_sum_9.min.js
9

我的问题是丑化文件log_sum_9.min.js没有改变变量的名称：sum、calc、operation（所有这些变量都是本地的变量）。

如果文件 log_sum_9.js 的内容被引入以下在线混淆器：https://www.javascriptobfuscator.com/Javascript-Obfuscator.aspx

然后你得到以下代码：

var _0x257f = ["\x32\x2B\x33\x2B\x34", "\x6C\x6F\x67"];
(function() {
    var _0xb897x1 = _0x257f[0],
        _0xb897x2 = function(_0xb897x3) {
            return eval(_0xb897x3)
        };
    console[_0x257f[1]](_0xb897x2(_0xb897x1))
})()

您可以看到前面的 3 个变量：sum、calc、operation 已更改名称。

如果你把上面的代码放在文件中：log_sum_9.online.js，那么你可以这样做：

$ node log_sum_9.online.js
9

（它也能正常工作）

我的问题是：

我必须如何配置文件：Gruntfile.js 才能混淆前 3 个变量？

Answer 1

grunt-contrib-uglify，（据我所知）不提供与您在 post 中链接到的在线工具相同级别的混淆 - 它似乎编码使用 JavaScript 十六进制转义 codes/sequences 的字符串。

然而，grunt-contrib-uglify utlilizes uglify-js 为 mangling 名称提供选项。您可以将 toplevel 和 eval 属性的 mangle 值设置为 true.

Gruntfile.js

你的uglify任务中的options可以设置如下：

// ...
options: {
    beautify: true,
    mangle: {
        properties: true,
        toplevel: true, // <-- Add this
        eval: true  // <-- Add this
    }
},
// ...

注意： 在修改名称时，您需要勤勉地确保您的代码仍能按预期运行。那里可能是某些你不想被破坏的名字（例如 jQuery 是一个很常见的名字）。 uglify-js 文档的摘录如下：

When mangling is enabled but you want to prevent certain names from being mangled, you can declare those names with --mangle reserved — pass a comma-separated list of names...

要排除某些名称在你的 grunt uglify 任务中被破坏，你可以使用 reserved 属性:

提供一个名称数组

例如

以下配置破坏了除 operation 和 jQuery 之外的所有名称：

// ...
options: {
    beautify: true,
    mangle: {
        properties: true,
        toplevel: true,
        eval: true,
        reserved: ['operation', 'jQuery'] // Exclude mangling specific names.
    }
},
// ...

使用 grunt-contrib-uglify 美化 javascript 代码

Uglifying javascript code with grunt-contrib-uglify

javascript

node.js

gruntjs

grunt-contrib-uglify