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

首页 Nodejs 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("压缩完成!");

复制链接 资源下载
资源下载

本文没有可供下载资源

点击下载

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

分类:Nodejs

链接:https://www.tongtian.icu/content/116

版权:通天技术网(www.tongtian.icu)所分享发布内容,部分为网络转载,如有侵权请立即联系方式,我们第一时间删除并致歉!

本文转载或引用了以下内容:

https://www.cnblogs.com/wishyouhappy/p/3647149.html,https://blog.csdn.net/a627428179/article/details/102913228

真诚感谢以上无私奉献的作者,本站将一如既往秉承尊重原创的基本原则 ,呵护分享精神的火花。

评论 (评论区只画了下样式,还没做功能,这里短时间内不会更新,有问题弹射至网站底部工单系统)

电子邮件地址不会被公开。 必填项已用 * 标注

  • 通天技术网
    回复

    热烈庆祝通天技术网开业大吉

  • 通天技术网
    回复

    热烈庆祝通天技术网开业大吉

    相关文章