利用UglifyJS和uglifycss压缩前端js和css

网上有一些就是太墨迹了,我就是想copy一下代码,不想研究具体的原理,非要一个个方法解释,还贴图,不知道直接给我代码,我直接执行就完事了吗,浪费我好多时间,真的是好气。

不说了,直接将代码转换一下贴上来

ps:手动自己敲的,怎么说也是转载(原创)吧,就是原创,哈哈。

/**
 * 执行说明:
 * 执行前需要安装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("压缩完成!");

贴一张转换的效果图吧

转换前:

转换后:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值