1. 使用cli命令行的方式壓縮輸出
- 需先全局安裝uglify-es后可用命令行壓縮
- 缺點:若需批量壓縮,需要用
yarn global add uglify-es
或者npm install -g uglify-es
uglifyjs [input files] [options]
使用示例
//例如壓縮jquery.js到/dist目錄中jquery.min.js,前提要先創(chuàng)建dist文件夾,命令不會自動創(chuàng)建文件夾
uglifyjs ./jquery.js -o ./dist/jquery.min.js
2. 使用node的方式壓縮輸出,
- 需先安裝uglify-es后,新建
main.js
,寫入如下代碼,通過options
里的Entrypath
和Outpath
來配置輸入輸出路徑,options
的其他屬性配置壓縮參數(shù),其API詳見uglifyes
var UglifyJS = require("uglify-es");
var fs = require('fs')
const { resolve } = require('path')
let array = []//src文件夾內(nèi)的js目錄集合
let codeArray = []//壓縮后的代碼集合
let jsname = []//src文件夾的js名集合
const options = {
//*******配置輸入輸出口*********/
Entrypath: '/ddd',//需要批量壓縮js的文件夾入口
Outpath: '/aaa',//批量壓縮后js的文件夾
//*******配置輸入輸出口*********/
//*******配置uglifyjs其他參數(shù)*********/
//詳見https://github.com/LiPinghai/UglifyJSDocCN/blob/master/README.md
warnings: false,
parse: {
// parse options
},
compress: {
// compress options
},
mangle: {
// mangle options
properties: {
// mangle property options
}
},
output: {
// output options
},
sourceMap: {
// source map options
},
nameCache: null, // or specify a name cache object
toplevel: false,
ie8: false,
}
init()//開始
//**********函數(shù)部分***************
//判斷輸出路徑是否存在
function judgeDir() {
fs.exists(options.Outpath.split('/')[1], function (exists) {
if (exists) {
console.log(`${options.Outpath}目錄已存在,進入下一步`)
} else {
console.log('指定目錄不存在,進入下一步')
creatFolder(options.Outpath)
}
//執(zhí)行創(chuàng)建完文件夾,執(zhí)行壓縮代碼
for (let i = 0; i < array.length; i++) {
let patharray = jsname[i]
let item = codeArray[i]
startCompress(options.Outpath, patharray, item, i + 1)
}
})
}
//創(chuàng)建文件夾,默認dist
function creatFolder(dirName = '/dist') {
fs.mkdir(resolve('./') + dirName, function (err) { })
console.log(`創(chuàng)建${options.Outpath}成功`)
}
//執(zhí)行寫入壓縮后的代碼
function startCompress(dirName = '/dist', array, item, n = 0) {
console.log(`開始寫入第${n}條壓縮后代碼`)
let length = array.lastIndexOf('.')
fs.writeFileSync(`${resolve('./')}${dirName}/${array.slice(0, length)}.min.js`, item);
console.log('寫入代碼成功')
}
//遍歷入口文件夾
function startLoop(dirName = '/src') {
fs.readdir(resolve('./') + dirName, function (err, files) {
if (err) {
console.log(err);
}
// console.log(files);
files.forEach(item => {
let list = item.split('.')
let tempLength = list.length
if (list[tempLength - 1] == 'js') {
array.push(resolve('./') + options.Entrypath + '/' + item)
jsname.push(item)
}
})
console.log(`遍歷${options.Entrypath}目錄成功,共有${array.length}個js文件`)
// console.log(array)
console.log('執(zhí)行uglify,壓縮代碼')
toUglify()
})
}
//導(dǎo)入uglifyCode
function toUglify() {
// console.log(array)
array.forEach((item) => {
let code = fs.readFileSync(item, "utf8");
let uglifyCode = UglifyJS.minify(code).code;
codeArray.push(uglifyCode)
})
}
//初始化
function init() {
console.log('初始化開始')
startLoop(options.Entrypath)
console.log('判斷輸出路徑是否存在')
judgeDir()
}
最后附上github地址compressES6
- 使用:
-
npm install
或者yarn
- 將需要被壓縮的js放入
/src
路徑 - 在命令行中輸入
node ./main.js
或者npm run compress
,或者yarn compress
- 成功后將在
/dist
路徑生成壓縮好的*.min.js
文件