批量 es6 js文件壓縮,批量輸出

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里的EntrypathOutpath來配置輸入輸出路徑,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}目錄已存在,進(jìn)入下一步`)
        } else {
            console.log('指定目錄不存在,進(jìn)入下一步')
            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)建文件夾,默認(rèn)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

  • 使用:
  1. npm install或者yarn
  2. 將需要被壓縮的js放入/src路徑
  3. 在命令行中輸入node ./main.js或者npm run compress,或者yarn compress
  4. 成功后將在/dist路徑生成壓縮好的*.min.js文件
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容