如何gulp壓縮,丑化代碼

linkin 發(fā)布于2019-08-23 14:10 / 2112人閱讀

摘要：其中使用代碼如下部分丑化代碼注意路徑的寫法合并所有到壓縮后的文件名丑化代碼，相當(dāng)加密排除關(guān)鍵字注意路徑的寫法

為什么使用

最近在迭代公司的項(xiàng)目,發(fā)現(xiàn)項(xiàng)目有如下缺點(diǎn):

代碼沒有壓縮,js文件，內(nèi)存大，放在服務(wù)器上占空間；

源代碼沒有混淆或者丑化處理，本公司的程序員寫出來的代碼和高質(zhì)量邏輯容易被其他公司的程序員盜用；

js,css 文件數(shù)量多，瀏覽器加載起來會(huì)“手忙腳亂”和“生氣”。

這個(gè)小項(xiàng)目使用gulp構(gòu)建工具寫的，所以很自然用gulp下的一系列插件來完成。其中用到的插件有：gulp-concat整合數(shù)量大的文件為一個(gè)文件，gulp-uglify丑化代碼，不讓別人輕易得到你的源碼，gulp-uglify重新命名文件名稱等等

實(shí)現(xiàn)

運(yùn)行cnpm i gulp-concat gulp-uglify gulp-rename --save-dev 安裝這三個(gè)包 --save-dev的意思就是在開發(fā)環(huán)境；

這幾個(gè)插件使用起來還好，容易，比較曲折一點(diǎn)的就是gulp-uglify: 我一開始是上npm官網(wǎng)安裝了一個(gè)最新版的uglify可是沒有用，我百度，谷歌折騰了一會(huì)，同事和我說vue-cli項(xiàng)目就有這個(gè)gulp功能，讓我去參考如何使用。原來是uglify的版本不一樣，我把版本從最新版降級(jí)到2.0.0就可以了。

"gulp-uglify": "^2.0.0",

其中使用代碼如下：（js部分）

//丑化js代碼
gulp.task("compress", function () {
    gulp.src("./src/oldJs/*.js")    //注意路徑的寫法
        .pipe(concat("main.js"))    //合并所有js到main.js
        .pipe(rename({suffix: ".min"}))   //rename壓縮后的文件名
        .pipe(uglify({              //丑化js代碼，相當(dāng)加密
            sourceMap: false,
            compress: {
                warnings: false,
                drop_console: true,
                drop_debugger: true,
            },
            mangle: {except: ["$super", "$", "exports", "require","avalon"]} //排除關(guān)鍵字
        }))
        .pipe(gulp.dest("./src/js"));  //注意路徑的寫法
});
//

GPU云服務(wù)器云服務(wù)器壓縮代碼 js代碼還原壓縮代碼的壓縮功能代碼 asp 代碼壓縮

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/100193.html

相關(guān)文章

gulp常用功能集合（開發(fā)和生產(chǎn)分離、靜態(tài)資源壓縮優(yōu)化、代碼優(yōu)化、實(shí)時(shí)預(yù)覽、hash）

摘要：在資源很多時(shí)，例如圖片的復(fù)制，這個(gè)會(huì)加快任務(wù)的執(zhí)行速度，特別是需要實(shí)時(shí)預(yù)覽時(shí)，減少延遲。但是作為個(gè)入門短時(shí)間內(nèi)還是不能夠被取代得了的。 gulp常用功能集合（開發(fā)和生產(chǎn)分離、靜態(tài)資源壓縮優(yōu)化、代碼優(yōu)化、實(shí)時(shí)預(yù)覽、hash） tags: gulp 前端自動(dòng)化開發(fā) npm倉庫下載地址https://www.npmjs.com/package/cddgulp [TOC]本人自用在此基礎(chǔ)上的...

silvertheo 2019-08-20 14:39 評(píng)論0 收藏0
[譯]教程：如何使用Rollup打包JavaScript

摘要：教程如何使用打包通過這個(gè)系列教程一步一步學(xué)習(xí)如何使用更小更快的取代和打包文件。安裝并且創(chuàng)建配置文件。提示是告訴我們實(shí)際需要哪些插件的集合。通過下面的命令安裝兩個(gè)插件更新然后，引入插件并添加進(jìn)配置注意屬性是為了幫助模塊遷移到的一部分。教程：如何使用Rollup打包JavaScript 通過這個(gè)系列教程一步一步學(xué)習(xí)如何使用更小更快的Rollup取代webpack和Browserify打包...

luoyibu 2019-08-20 12:25 評(píng)論0 收藏0
前端構(gòu)建的初步嘗試

摘要：前言這篇文章的主要目的是告訴大家構(gòu)建工具可以做那些事情大家不必去深入研究這個(gè)東西最基本的是有個(gè)概念什么是前端構(gòu)建在平時(shí)我們?yōu)g覽一些大型的站點(diǎn)會(huì)發(fā)現(xiàn)其中的一些經(jīng)過壓縮去掉了空白符注釋經(jīng)過了混淆和壓縮一些引用的文件的鏈接會(huì)加上奇怪的字串文件例如前言這篇文章的主要目的是告訴大家,構(gòu)建工具可以做那些事情.大家不必去深入研究這個(gè)東西.最基本的是有個(gè)概念. 什么是前端構(gòu)建? 在平時(shí)我們?yōu)g覽一些...

Keven 2019-08-01 15:38 評(píng)論0 收藏0
gulp排除已壓縮文件思路

摘要：默認(rèn)排除語法的弊端有個(gè)時(shí)候我們需要時(shí)用排除已經(jīng)壓縮過的，等。主要用兩個(gè)屬性來描述文件，它們分別是路徑及內(nèi)容。判斷函數(shù)接受一個(gè)文件對(duì)象，返回一個(gè)值。官方例子僅壓縮符合條件的文件，丹斯所有文件包括不符合條件的都會(huì)被發(fā)送到目錄。 gulp默認(rèn)排除語法的弊端有個(gè)時(shí)候我們需要時(shí)用gulp排除已經(jīng)壓縮過的js，css等。如果以壓縮文件是以.min.js之類命名規(guī)范的還好，如果不是呢？而且還有其他...

Aklman 2019-08-22 10:49 評(píng)論0 收藏0
gulp詳細(xì)基礎(chǔ)教程

摘要：核心概念流流，簡(jiǎn)單來說就是建立在面向?qū)ο蠡A(chǔ)上的一種抽象的處理數(shù)據(jù)的工具。類型，設(shè)置輸出路徑以某個(gè)路徑的某個(gè)組成部分為基礎(chǔ)向后拼接。一、gulp簡(jiǎn)介 1.gulp是什么？ gulp是前端開發(fā)過程中一種基于流的代碼構(gòu)建工具，是自動(dòng)化項(xiàng)目的構(gòu)建利器；它不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化，而且在開發(fā)過程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成；使用它，不僅可以很愉快的編寫代碼，而且大大提高我們的工...

xuhong 2019-08-28 18:16 評(píng)論0 收藏0