批量 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}目錄已存在,進入下一步`)
        } 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

  • 使用:
  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)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子丹弱,更是在濱河造成了極大的恐慌隘截,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件洛姑,死亡現(xiàn)場離奇詭異揪漩,居然都是意外死亡,警方通過查閱死者的電腦和手機吏口,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門奄容,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人产徊,你說我怎么就攤上這事昂勒。” “怎么了舟铜?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵戈盈,是天一觀的道長。 經(jīng)常有香客問我谆刨,道長塘娶,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任痊夭,我火速辦了婚禮刁岸,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘她我。我一直安慰自己虹曙,他們只是感情好迫横,可當(dāng)我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著酝碳,像睡著了一般矾踱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上疏哗,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天呛讲,我揣著相機與錄音,去河邊找鬼返奉。 笑死圣蝎,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的衡瓶。 我是一名探鬼主播徘公,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼哮针!你這毒婦竟也來了关面?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤十厢,失蹤者是張志新(化名)和其女友劉穎等太,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蛮放,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡缩抡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了包颁。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瞻想。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖娩嚼,靈堂內(nèi)的尸體忽然破棺而出蘑险,到底是詐尸還是另有隱情,我是刑警寧澤岳悟,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布佃迄,位于F島的核電站,受9級特大地震影響贵少,放射性物質(zhì)發(fā)生泄漏呵俏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一滔灶、第九天 我趴在偏房一處隱蔽的房頂上張望普碎。 院中可真熱鬧,春花似錦宽气、人聲如沸随常。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽绪氛。三九已至,卻和暖如春涝影,著一層夾襖步出監(jiān)牢的瞬間枣察,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工燃逻, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留序目,地道東北人。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓伯襟,卻偏偏與公主長得像猿涨,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子姆怪,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內(nèi)容