Home >Web Front-end >JS Tutorial >How to use UglifyJS to compress and merge JS files under node
This article mainly shares with you a method of using UglifyJS to compress and merge JS files under node. The latest version of UglifyJS is now 2.8.13. Its main function is JS compression and merging. Let’s go directly to the tutorial:
Installation:
<span style="font-size:18px;color:#006600;">npm install uglify-js -g</span>
Install uglifyjs as a global variable so that we can use it anywhere.
<span style="color:#006600;">下面是shell命令的中文解释: * source-map [string],生成source map文件。 * –source-map-root [string], 指定生成source map的源文件位置。 * –source-map-url [string], 指定source map的网站访问地址。 * –source-map-include-sources,设置源文件被包含到source map中。 * –in-source-map,自定义source map,用于其他工具生成的source map。 * –screw-ie8, 用于生成完全兼容IE6-8的代码。 * –expr, 解析一个表达式或JSON。 * -p, –prefix [string], 跳过原始文件名的前缀部分,用于指定源文件、source map和输出文件的相对路径。 * -o, –output [string], 输出到文件。 * -b, –beautify [string], 输出带格式化的文件。 * -m, –mangle [string], 输出变量名替换后的文件。 * -r, –reserved [string], 保留变量名,排除mangle过程。 * -c, –compress [string], 输出压缩后的文件。 * -d, –define [string], 全局定义。 * -e, –enclose [string], 把所有代码合并到一个函数中,并提供一个可配置的参数列表。 * –comments [string], 增加注释参数,如@license、@preserve。 * –preamble [string], 增加注释描述。 * –stats, 显示运行状态。 * –acorn, 用Acorn做解析。 * –spidermonkey, 解析SpiderMonkey格式的文件,如JSON。 * –self, 把UglifyJS2做为依赖库一起打包。 * –wrap, 把所有代码合并到一个函数中。 * –export-all, 和–wrap一起使用,自动输出到全局环境。 * –lint, 显示环境的异常信息。 * -v, –verbose, 打印运行日志详细。 * -V, –version, 打印版本号。 * –noerr, 忽略错误命令行参数。</span>
# How to use UglifyJS2
> There are 2 ways to use UglifyJS2
1. Shell command call
2. API call
shell command:
Merge and compress the two JS files start.js and test.js
~> uglifyjs start.js test.js -o new.min.js -- source-map new.min.js.map
API call:
var fs = require('fs'); var uglifyjs = require("uglify-js"); var result = uglifyjs.minify("../test.js",{ mangle:false });
A basic core method minify above, let’s look at this method separately
This is a Very smart method, a total of 2 parameters
The first parameter*
The first parameter can be a string, path, or path array;
1.String The parameter
is the javascript code we wrote. It can be directly used as a string parameter parameter function, but there needs to be a second parameter to tell the function. This is the first one above the javascript source code string
var result = uglifyjs.minify("var fun=function(){ alert('itKingOne博客');};",{ mangle:false, fromString:true, });
The first parameter is passed in the javascript source code. The second parameter formString: true tells the minify function that the previous parameter is the javascript source code that needs to be compressed.
String path
This is the function One of the methods supported by default is to directly specify the path of a JavaScript file that needs to be compressed with a single parameter. Of course, it can also use two parameters.
var result = uglifyjs.minify("../test.js");
The above function is executed in my superior directory. test.js is compressed. When one parameter is used by default, it indicates the file path
The array specifies multiple paths
You can have one parameter, but this parameter is an array ['path1','path 2','Path 3'] Similar to this, the result is that all the javascript in the above path is compressed and returned to the result object. Later we will talk about the result return value separately.
var result = uglifyjs.minify([ "../test.js", "../mian.js"]);
The second parameter*
Parameter Description
romString attribute (default false) Specifies that the string in the first parameter is javascript source code
The mangle attribute defaults to true; when specified as false, it means no execution Obfuscated compression
width and max-line-len attributes follow the instructions, this should refer to the length of the compressed file
outSourceMap attribute is used to specify the function return value result.map string is converted to The value of the file attribute after Object
The sourceRoot attribute is used to specify the function return value result.map string is converted into the value of the sourceRoot attribute after Object
Return value result *
Return The value result is an object. The code attribute corresponds to the compressed script
{"code":"这里是压缩后的 javascript 脚本","map":null}
Related recommendations:
Example of php merging js requests_PHP tutorial
phpExample of merging js requests_PHP
The above is the detailed content of How to use UglifyJS to compress and merge JS files under node. For more information, please follow other related articles on the PHP Chinese website!