Node环境下使用UglifyJs的四种方法

Node环境下使用UglifyJs的四种方法

文档地址：https://www.npmjs.com/package/uglify-js

指令压缩

1. 安装node,npm——详细见nodejs安装与使用入门

2. 安装 uglifyjs——npm install -g uglify-js

3. 示例：uglifyjs test.js -c -m -o test-min.js

windows bat脚本批量压缩

1. 新建xxx.bat

注意修改为你的路径

@echo off
:: 设置压缩JS文件的根目录，脚本会自动按树层次查找和压缩所有的JS
SET JSFOLDER=D：\uglifyDestination（注意路劲中不能有空格）
echo 正在查找JS文件
chdir /d %JSFOLDER%
for /r . %%a in (*.js) do (
    @echo 正在压缩 %%~a ...
    uglifyjs %%~fa  -m -o %%~fa
)
echo 完成!
pause & exit

1. cmd运行即可

编码方式压缩

说明：编写一个build.js文件，使用node命令执行该文件。build.js中的代码会去调用UglifyJS的接口函数以执行压缩任务。

1. Github下载最新的UglifyJS。

git clone git://github.com/mishoo/UglifyJS.git

1. 新建一个项目（文件夹）myApp，将uglify-js.js和lib目录拷贝到自己的项目中。如下

1. 编写Js方法

说明：取fs模块，它是node的文件模块、UglifyJS的两个模块。

var fs  = require('fs');
var jsp = require("./uglify-js").parser;
var pro = require("./uglify-js").uglify;
// 读取一个文件，压缩之
function buildOne(flieIn, fileOut) {
    var origCode = fs.readFileSync(flieIn, 'utf8');
    var ast = jsp.parse(origCode);
        ast = pro.ast_mangle(ast);
        ast = pro.ast_squeeze(ast);
    var finalCode = pro.gen_code(ast);
    fs.writeFileSync(fileOut, finalCode, 'utf8');
}

1. 执行

buildOne('main.js', 'main.min.js');

编码方式批量压缩（推荐）

1. 替换代码中的路径，然后通过node执行即可。

/**
 * 执行说明：
 * 执行前需要安装node环境，
 * 执行 npm install uglify-js
 * npm install uglifycss
 * 安装环境结束，调用js使用node xxx.js调用就可以了
 */
const fs = require('fs');
const join = require('path').join;
const UglifyCss = require('uglifycss');
const UglifyJS = require('uglify-js');

// 查找目录
const address = 'D:\\待压缩文件路径';

//过滤后缀
const minjs = '.min.js';
const mincss = '.min.css';

let length = 0;
let pace = 0;

//增加后匹配原型
String.prototype.endWidth=function(endStr){
	var d=this.length-endStr.length;
	return (d>=0&&this.lastIndexOf(endStr)==d);
}

/**
 * @param jsonPath 地址
 * @param type = 类型，js和css
 */
function getJsonFiles(jsonPath, type) {
	let jsonFiles = [];
	function findJsonFile(path) {
		let files = fs.readdirSync(path);
		files.forEach(function (item, index) {
			let fPath = join(path, item);
			let stat = fs.statSync(fPath);
			//如果文件存在下一级继续查找
			if (stat.isDirectory() === true) {
				findJsonFile(fPath);
			}
			if (stat.isFile() === true) {
 
				if (fPath.endWidth(type) && !fPath.endWidth(minjs) && !fPath.endWidth(mincss)) {
					//找到名为.js文件的地址
					jsonFiles.push(fPath);
				}
			}
		});
	}
	findJsonFile(jsonPath);

	return jsonFiles;
}

//获取js文件内容 css文件内容 写入文件
function getJsData(path) {
	for (let i = 0; i < path.length; i++) {
		let data = [];
		let pathArr = path[i].split('\\');
		let pathName = pathArr[pathArr.length - 1];
		let code = fs.readFileSync(path[i], 'utf-8');
		//文件压缩
		let uglifyCode = UglifyJS.minify(code, { warnings: false, ie8: false, toplevel: false });
		//新增文件夹打包
		//setDir(dirJs,pathName,uglifyCode.code);

		//覆盖老文件打包
		oldFiles(path[i], uglifyCode.code);
	}
}

//获取css文件内容
function getCssData(path) {
	for (let i = 0; i < path.length; i++) {
		//css 文件压缩
		let arr = [path[i]];
		let pathArr = path[i].split('\\');
		let pathName = pathArr[pathArr.length - 1];
		let uglifyCode = UglifyCss.processFiles(arr, { expandVars: true });
		//新建文件夹打包
		//setDir(dirCss, pathName, uglifyCode);

		//覆盖老文件打包
		oldFiles(path[i], uglifyCode);
	}
}

//写入文件 新文件
function setDir(dir, name, data) {
	if (!fs.existsSync(dir)) {
		fs.mkdirSync(dir);
	}
	let addressName = dir + '/' + name;
	console.log(name);
	fs.writeFileSync(addressName, data, 'utf-8');
}

//覆盖原文件
function oldFiles(name, data) {
	console.log(name + " ===> [" + (++pace) + "/" + length + "]");
	fs.writeFileSync(name, data, 'utf-8');
}

//获取所有js文件
let jspath = getJsonFiles(address, '.js');
//获取所有css文件
let csspath = getJsonFiles(address, '.css');
length = jspath.length + csspath.length
getJsData(jspath);
getCssData(csspath);
console.log("压缩完成！");