請務(wù)必理解如下章節(jié)后閱讀此章節(jié)：

1. 安裝 Node 和 gulp

訪問論壇獲取幫助

壓縮 js 代碼可降低 js 文件大小，提高頁面打開速度。在不利用 gulp 時(shí)我們需要通過各種工具手動(dòng)完成壓縮工作。

所有的 gulp 代碼編寫都可以看做是將規(guī)律轉(zhuǎn)化為代碼的過程。

規(guī)律

找到 js/ 目錄下的所有 js 文件，壓縮它們，將壓縮后的文件存放在 dist/js/ 目錄下。

gulp 代碼

你可以 下載所有示例代碼 或 在線查看代碼

建議：你可以只閱讀下面的代碼與注釋或同時(shí)閱讀代碼解釋

gulp 的所有配置代碼都寫在 gulpfile.js 文件。

一、新建一個(gè) 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')

四、創(chuàng)建壓縮任務(wù)

// 壓縮 js 文件
// 在命令行使用 gulp script 啟動(dòng)此任務(wù)
gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('js/*.js')
    // 2. 壓縮文件
        .pipe(uglify())
    // 3. 另存壓縮后的文件
        .pipe(gulp.dest('dist/js'))
})

• gulp.task(name, fn) - 定義任務(wù)，第一個(gè)參數(shù)是任務(wù)名，第二個(gè)參數(shù)是任務(wù)內(nèi)容。
• gulp.src(path) - 選擇文件，傳入?yún)?shù)是文件路徑。
• gulp.dest(path) - 輸出文件
• gulp.pipe() - 管道，你可以暫時(shí)將 pipe 理解為將操作加入執(zhí)行隊(duì)列

參考：gulp API文檔

五、跳轉(zhuǎn)至 gulpfile.js 所在目錄

打開命令行使用 cd 命令跳轉(zhuǎn)至 gulpfile.js 文件所在目錄。

例如我的 gulpfile.js 文件保存在 C:\gulp-book\demo\chapter2\gulpfile.js。

那么就需要在命令行輸入

cd C:\gulp-book\demo\chapter2

Mac 用戶可使用 cd Documents/gulp-book/demo/chapter2/ 跳轉(zhuǎn)

六、使用命令行運(yùn)行 script 任務(wù)

在控制臺(tái)輸入 gulp 任務(wù)名 可運(yùn)行任務(wù)，此處我們輸入 gulp script 回車。

注意：輸入 gulp script 后命令行將會(huì)提示錯(cuò)誤信息

// 在命令行輸入
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 模塊

因?yàn)槲覀儾]有安裝 gulp-uglify 模塊到本地，所以找不到此模塊。

使用 npm 安裝 gulp-uglify 到本地

npm install gulp-uglify

安裝成功后你會(huì)看到如下信息：

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 $

在你的文件夾中會(huì)新增一個(gè) node_modules 文件夾，這里面存放著 npm 安裝的模塊。

目錄結(jié)構(gòu)：

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

接著輸入 gulp script 執(zhí)行任務(wù)

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 文件

我們發(fā)現(xiàn) gulp 沒有進(jìn)行任何壓縮操作。因?yàn)闆]有js這個(gè)目錄，也沒有 js 目錄下的 .js 后綴文件。

創(chuàng)建 a.js 文件，并編寫如下內(nèi)容

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

demo('Hi')

目錄結(jié)構(gòu)：

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

接著在命令行輸入 gulp script 執(zhí)行任務(wù)

gulp 會(huì)在命令行當(dāng)前目錄下創(chuàng)建 dist/js/ 文件夾，并創(chuàng)建壓縮后的 a.js 文件。

目錄結(jié)構(gòu)：

├── 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");

九、檢測代碼修改自動(dòng)執(zhí)行任務(wù)

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

可以使用 gulp.watch(src, fn) 檢測指定目錄下文件的修改后執(zhí)行任務(wù)。

在 gulpfile.js 中編寫如下代碼：

// 監(jiān)聽文件修改，當(dāng)文件被修改則執(zhí)行 script 任務(wù)
gulp.watch('js/*.js', ['script']);

但是沒有命令可以運(yùn)行 gulp.watch()，需要將 gulp.watch() 包含在一個(gè)任務(wù)中。

// 在命令行使用 gulp auto 啟動(dòng)此任務(wù)
gulp.task('auto', function () {
    // 監(jiān)聽文件修改，當(dāng)文件被修改則執(zhí)行 script 任務(wù)
    gulp.watch('js/*.js', ['script'])
})

接在在命令行輸入 gulp auto，自動(dòng)監(jiān)聽 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

此時(shí)修改 js/a.js 中的代碼并保存。命令行將會(huì)出現(xiàn)提示，表示檢測到文件修改并壓縮文件。

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

至此，我們完成了 gulp 壓縮 js 文件的自動(dòng)化代碼編寫。

注意：使用 gulp.watch 后你的命令行會(huì)進(jìn)入“運(yùn)行”狀態(tài)，此時(shí)你不可以在命令行進(jìn)行其他操作?？赏ㄟ^ Ctrl + C 停止 gulp。

Mac 下使用 control + C 停止 gulp

十、使用 gulp.task('default', fn) 定義默認(rèn)任務(wù)

增加如下代碼

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

此時(shí)你可以在命令行直接輸入 gulp +回車，運(yùn)行 script 和 auto 任務(wù)。

最終代碼如下：

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

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

// 壓縮 js 文件
// 在命令行使用 gulp script 啟動(dòng)此任務(wù)
gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('js/*.js')
    // 2. 壓縮文件
        .pipe(uglify())
    // 3. 另存壓縮后的文件
        .pipe(gulp.dest('dist/js'))
})

// 在命令行使用 gulp auto 啟動(dòng)此任務(wù)
gulp.task('auto', function () {
    // 監(jiān)聽文件修改，當(dāng)文件被修改則執(zhí)行 script 任務(wù)
    gulp.watch('js/*.js', ['script'])
})

// 使用 gulp.task('default') 定義默認(rèn)任務(wù)
// 在命令行使用 gulp 啟動(dòng) script 任務(wù)和 auto 任務(wù)
gulp.task('default', ['script', 'auto'])

去除注釋后，你會(huì)發(fā)現(xiàn)只需要 11 行代碼就可以讓 gulp 自動(dòng)監(jiān)聽 js 文件的修改后壓縮代碼。但是還有還有一些性能問題和缺少容錯(cuò)性，將在后面的章節(jié)詳細(xì)說明。

你可以訪問 gulp-uglify 以查看更多用法。

訪問論壇獲取幫助