如何利用 gulp 壓縮混淆 “上古”時期的專案檔案

六小登登發表於2019-01-16

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

還是那些傳統的方式，一個頁面從上到下引入幾十個「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")
});
複製程式碼

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

相關文章