最近一段時間，在做一個很古老的項目，簡直是上古時期的寫作方式了。

還是那些傳統的方式，一個頁面從上到下引入幾十個「js」文件，里面到處充斥著 jquery 的 DOM 操作，維護起來相當的糟糕，變量與函數之間跨文件引用。

<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/url.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script> <script src="offlinemap/map_load.js"></script> <script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-ui-datepicker.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-ui-timepicker-addon.js" type="text/javascript" charset="utf-8"></script> <script src="js/dtree.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.ui.touch.punch.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/common.js" type="text/javascript" charset="utf-8"></script> <script src="js/index.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.ztree.core.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.ztree.excheck.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.ztree.exedit.js" type="text/javascript" charset="utf-8"></script> 復制代碼

雖然很難，但是經過一段時間的努力吧，算是有個穩定的版本了，所以在上線之前呢，我們是需要把代碼給壓縮混淆一下，一來是減少文件的體積，二來是去掉源碼的可讀性。

接下來，我們就直接進入主題，廢話不多少，如何利用 gulp 去做代碼的壓縮與混淆。

至于 gulp 是什么我就不做過多的解釋了，它是一個自動化的構建工具。

安裝

全局安裝 gulp

npm install --global gulp 復制代碼

作為項目的依賴安裝

npm install --save-dev gulp 復制代碼

創建文件

在項目的根目錄下，創建名為 gulpfile.js 的文件

var gulp = require('gulp');gulp.task('default', function() {//需要處理的任務 }); 復制代碼

運行

gulp taskname 復制代碼

壓縮html

//壓縮html gulp.task("minhtml", function () {gulp.src("./src/*.html").pipe(htmlmin({collapseWhitespace: true, //去空格removeComments: true //去注釋})).pipe(gulp.dest("./dist")) }); 復制代碼

壓縮css

//壓縮css gulp.task("mincss", function () {gulp.src("./src/*.css").pipe(cssmin()).pipe(gulp.dest("./dist/css")); }); 復制代碼

壓縮混淆js

//壓縮js gulp.task("minjs", function () {return gulp.src("./src/js/*.js").pipe(uglify()).pipe(gulp.dest("./dist/js") }); 復制代碼

以上，就可以愉快的一鍵壓縮我們的代碼了，當然項目中肯定不止這么簡單的需求，還有更多更玩的，大家可以根據自己的需求定制一些個性話東西。

總結

以上是生活随笔為你收集整理的如何利用 gulp 压缩混淆 “上古”时期的项目文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。