使用 gulp 壓縮 JS

NimoChu發表於2015-05-08
JS

請務必理解如下章節後閱讀此章節：

  1. 安裝 Node 和 gulp

訪問論壇獲取幫助

壓縮 js 程式碼可降低 js 檔案大小，提高頁面開啟速度。在不利用 gulp 時我們需要通過各種工具手動完成壓縮工作。

所有的 gulp 程式碼編寫都可以看做是將規律轉化為程式碼的過程。

規律

找到 js/ 目錄下的所有 js 檔案，壓縮它們，將壓縮後的檔案存放在 dist/js/ 目錄下。

gulp 程式碼

你可以 下載所有示例程式碼 或 線上檢視程式碼

建議：你可以只閱讀下面的程式碼與註釋或同時閱讀程式碼解釋

gulp 的所有配置程式碼都寫在 gulpfile.js 檔案。

一、新建一個 gulpfile.js 檔案

chapter2
└── gulpfile.js

二、在 gulpfile.js 中編寫程式碼

// 獲取 gulp
var gulp = require('gulp')

require() 是 node （CommonJS）中獲取模組的語法。

在 gulp 中你只需要理解 require() 可以獲取模組。

三、獲取 gulp-uglify 元件

// 獲取 uglify 模組（用於壓縮 JS）
var uglify = require('gulp-uglify')

四、建立壓縮任務

// 壓縮 js 檔案
// 在命令列使用 gulp script 啟動此任務
gulp.task('script', function() {
    // 1. 找到檔案
    gulp.src('js/*.js')
    // 2. 壓縮檔案
        .pipe(uglify())
    // 3. 另存壓縮後的檔案
        .pipe(gulp.dest('dist/js'))
})
  • gulp.task(name, fn) - 定義任務，第一個引數是任務名，第二個引數是任務內容。
  • gulp.src(path) - 選擇檔案，傳入引數是檔案路徑。
  • gulp.dest(path) - 輸出檔案
  • gulp.pipe() - 管道，你可以暫時將 pipe 理解為將操作加入執行佇列

參考：gulp API文件

五、跳轉至 gulpfile.js 所在目錄

開啟命令列使用 cd 命令跳轉至 gulpfile.js 檔案所在目錄。

例如我的 gulpfile.js 檔案儲存在 C:\gulp-book\demo\chapter2\gulpfile.js。

那麼就需要在命令列輸入

cd C:\gulp-book\demo\chapter2

Mac 使用者可使用 cd Documents/gulp-book/demo/chapter2/ 跳轉

六、使用命令列執行 script 任務

在控制檯輸入 gulp 任務名 可執行任務，此處我們輸入 gulp script 回車。

注意：輸入 gulp script 後命令列將會提示錯誤資訊

// 在命令列輸入
gulp script

Error: Cannot find module 'gulp-uglify'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)

Cannot find module 'gulp-uglify' 沒有找到 gulp-uglify 模組。

七、安裝 gulp-uglify 模組

因為我們並沒有安裝 gulp-uglify 模組到本地，所以找不到此模組。

使用 npm 安裝 gulp-uglify 到本地

npm install gulp-uglify

安裝成功後你會看到如下資訊：

gulp-uglify@1.1.0 node_modules/gulp-uglify
├── deepmerge@0.2.7
├── uglify-js@2.4.16 (uglify-to-browserify@1.0.2, async@0.2.10, source-map@0.1.34, optimist@0.3.7)
├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)
└── gulp-util@3.0.4 (array-differ@1.0.0, beeper@1.0.0, array-uniq@1.0.2, object-assign@2.0.0, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, chalk@1.0.0, lodash.template@3.3.2, vinyl@0.4.6, multipipe@0.1.2, dateformat@1.0.11)
chapter2 $

在你的資料夾中會新增一個 node_modules 資料夾，這裡面存放著 npm 安裝的模組。

目錄結構：

├── gulpfile.js
└── node_modules
    └── gulp-uglify

接著輸入 gulp script 執行任務

gulp script
[13:34:57] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js
[13:34:57] Starting 'script'...
[13:34:57] Finished 'script' after 6.13 ms

八、編寫 js 檔案

我們發現 gulp 沒有進行任何壓縮操作。因為沒有js這個目錄，也沒有 js 目錄下的 .js 字尾檔案。

建立 a.js 檔案，並編寫如下內容

// a.js
function demo (msg) {
    alert('--------\r\n' + msg + '\r\n--------')
}

demo('Hi')

目錄結構：

├── gulpfile.js
├──  js
│    └── a.js
└── node_modules
    └── gulp-uglify

接著在命令列輸入 gulp script 執行任務

gulp 會在命令列當前目錄下建立 dist/js/ 資料夾，並建立壓縮後的 a.js 檔案。

目錄結構：

├── gulpfile.js
├──  js
│    └── a.js
├──  dist
│    └── js
│        └── a.js
└── node_modules
    └── gulp-uglify

dist/js/a.js

function demo(n){alert("--------\r\n"+n+"\r\n--------")}demo("Hi");

九、檢測程式碼修改自動執行任務

js/a.js一旦有修改 就必須重新在命令列輸入 gulp script ，這很麻煩。

可以使用 gulp.watch(src, fn) 檢測指定目錄下檔案的修改後執行任務。

在 gulpfile.js 中編寫如下程式碼：

// 監聽檔案修改，當檔案被修改則執行 script 任務
gulp.watch('js/*.js', ['script']);

但是沒有命令可以執行 gulp.watch()，需要將 gulp.watch() 包含在一個任務中。

// 在命令列使用 gulp auto 啟動此任務
gulp.task('auto', function () {
    // 監聽檔案修改，當檔案被修改則執行 script 任務
    gulp.watch('js/*.js', ['script'])
})

接在在命令列輸入 gulp auto，自動監聽 js/*.js 檔案的修改後壓縮js。

$gulp auto
[21:09:45] Using gulpfile ~/Documents/code/gulp-book/demo/chapter2/gulpfile.js
[21:09:45] Starting 'auto'...
[21:09:45] Finished 'auto' after 9.19 ms

此時修改 js/a.js 中的程式碼並儲存。命令列將會出現提示，表示檢測到檔案修改並壓縮檔案。

[21:11:01] Starting 'script'...
[21:11:01] Finished 'script' after 2.85 ms

至此，我們完成了 gulp 壓縮 js 檔案的自動化程式碼編寫。

注意：使用 gulp.watch 後你的命令列會進入“執行”狀態，此時你不可以在命令列進行其他操作。可通過 Ctrl + C 停止 gulp。(Mac 中使用 control + C)

Mac 下使用 control + C 停止 gulp

十、使用 gulp.task('default', fn) 定義預設任務

增加如下程式碼

gulp.task('default', ['script', 'auto']);

此時你可以在命令列直接輸入 gulp +回車，執行 script 和 auto 任務。

最終程式碼如下：

// 獲取 gulp
var gulp = require('gulp')

// 獲取 uglify 模組（用於壓縮 JS）
var uglify = require('gulp-uglify')

// 壓縮 js 檔案
// 在命令列使用 gulp script 啟動此任務
gulp.task('script', function() {
    // 1. 找到檔案
    gulp.src('js/*.js')
    // 2. 壓縮檔案
        .pipe(uglify())
    // 3. 另存壓縮後的檔案
        .pipe(gulp.dest('dist/js'))
})

// 在命令列使用 gulp auto 啟動此任務
gulp.task('auto', function () {
    // 監聽檔案修改，當檔案被修改則執行 script 任務
    gulp.watch('js/*.js', ['script'])
})


// 使用 gulp.task('default') 定義預設任務
// 在命令列使用 gulp 啟動 script 任務和 auto 任務
gulp.task('default', ['script', 'auto'])

去除註釋後，你會發現只需要 11 行程式碼就可以讓 gulp 自動監聽 js 檔案的修改後壓縮程式碼。但是還有還有一些效能問題和缺少容錯性，將在後面的章節詳細說明。

你可以訪問 gulp-uglify 以檢視更多用法。

訪問論壇獲取幫助

接著閱讀：使用 gulp 壓縮 CSS

相關文章