Home > Web Front-end > JS Tutorial > How to use UglifyJS to compress and merge JS files under node

How to use UglifyJS to compress and merge JS files under node

小云云
Release: 2018-03-09 09:36:17
Original
1546 people have browsed it

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>
Copy after login

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>
Copy after login

# 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
});
Copy after login

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,
});
Copy after login

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");
Copy after login

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"]);
Copy after login

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}
Copy after login

Related recommendations:

JS merge json object instance

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template