Node环境下使用UglifyJs的四种方法
文档地址:https://www.npmjs.com/package/uglify-js
指令压缩
-
安装node,npm——详细见nodejs安装与使用入门
-
安装 uglifyjs——npm install -g uglify-js
-
示例:
uglifyjs test.js -c -m -o test-min.js
windows bat脚本批量压缩
- 新建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
- cmd运行即可
编码方式压缩
说明:编写一个build.js文件,使用node命令执行该文件。build.js中的代码会去调用UglifyJS的接口函数以执行压缩任务。
- Github下载最新的UglifyJS。
git clone git://github.com/mishoo/UglifyJS.git
- 新建一个项目(文件夹)myApp,将uglify-js.js和lib目录拷贝到自己的项目中。如下
- 编写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');
}
- 执行
buildOne('main.js', 'main.min.js');
编码方式批量压缩(推荐)
- 替换代码中的路径,然后通过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.aqwdzy.com/content/116
版权:通天技术网(www.aqwdzy.com)所分享发布内容,部分为网络转载,如有侵权请立即联系方式,我们第一时间删除并致歉!
本文转载或引用了以下内容:
https://www.cnblogs.com/wishyouhappy/p/3647149.html,https://blog.csdn.net/a627428179/article/details/102913228
真诚感谢以上无私奉献的作者,本站将一如既往秉承尊重原创的基本原则 ,呵护分享精神的火花。
热烈庆祝通天技术网开业大吉
@通天技术网 热烈庆祝通天技术网开业大吉
热烈庆祝通天技术网开业大吉
@通天技术网 热烈庆祝通天技术网开业大吉