請務必理解如下章節后閱讀此章節：
壓縮 js 代碼可降低 js 文件大小，提高頁面打開速度。在不利用 gulp 時我們需要通過各種工具手動完成壓縮工作。
所有的 gulp 代碼編寫都可以看做是將規律轉化為代碼的過程。
規律
找到de >js/de>?目錄下的所有 js 文件，壓縮它們，將壓縮后的文件存放在de >dist/js/de>?目錄下。
gulp 代碼
建議：你可以只閱讀下面的代碼與注釋或同時閱讀代碼解釋
gulp 的所有配置代碼都寫在de >gulpfile.jsde>?文件。
一、新建一個de >gulpfile.jsde>?文件
chapter2└── gulpfile.js
二、在de >gulpfile.jsde>?中編寫代碼
// 獲取 gulpvar gulp = require('gulp')
de >require()de>?是 node （CommonJS）中獲取模塊的語法。
在 gulp 中你只需要理解de >require()de>?可以獲取模塊。
三、獲取de >gulp-uglifyde>?組件
// 獲取 uglify 模塊（用于壓縮 JS）var uglify = require('gulp-uglify')
// 獲取 concat模塊（用于合并 JS）var concat= require('gulp-concat')
四、創建壓縮任務
// 壓縮 js 文件// 在命令行使用 gulp script 啟動此任務gulp.task('script', function() {? ? // 1. 找到文件（想要控制合并js的順序 gulp.src(['a.js', 'b.js', 'c.js'])）
? ? gulp.src('js/*.js')? ? // 2. 壓縮文件? ? ? ? .pipe(uglify())
// 3. 把以上的js的文件合并到main.js
.pipe(concat('main.js'))
? ? // 3. 另存壓縮后的文件? ? ? ? .pipe(gulp.dest('dist/js'))})
de >gulp.task(name, fn)de>?- 定義任務，第一個參數是任務名，第二個參數是任務內容。
de >gulp.src(path)de>?- 選擇文件，傳入參數是文件路徑。
de >gulp.dest(path)de>?- 輸出文件
de >gulp.pipe()de>?- 管道，你可以暫時將 pipe 理解為將操作加入執行隊列
參考：gulp API文檔
五、跳轉至de >gulpfile.jsde>?所在目錄
打開命令行使用de >cdde>?命令跳轉至de >gulpfile.jsde>?文件所在目錄。
例如我的de >gulpfile.jsde>?文件保存在de >C:\gulp-book\demo\chapter2\gulpfile.jsde>。
那么就需要在命令行輸入
cd C:\gulp-book\demo\chapter2
Mac 用戶可使用de >cd Documents/gulp-book/demo/chapter2/de>?跳轉
六、使用命令行運行 script 任務
在控制臺輸入de >gulp 任務名de>?可運行任務，此處我們輸入de >gulp scriptde>?回車。
注意：輸入de >gulp scriptde>?后命令行將會提示錯誤信息
// 在命令行輸入gulp scriptError: Cannot find module 'gulp-uglify'? ? at Function.Module._resolveFilename (module.js:338:15)? ? at Function.Module._load (module.js:280:25)
de >Cannot find module 'gulp-uglify'de>?沒有找到de >gulp-uglifyde>?模塊。
七、安裝de >gulp-uglifyde>?模塊
做項目大概用到的模塊
npm install gulp-clean-css gulp-uglify gulp-concat gulp-rename --save-dev
npm?install?jshint?gulp-jshint?--save-dev
因為我們并沒有安裝de >gulp-uglifyde>?模塊到本地，所以找不到此模塊。
使用 npm 安裝de >gulp-uglifyde>?到本地
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 $
在你的文件夾中會新增一個de >node_modulesde>?文件夾，這里面存放著 npm 安裝的模塊。
目錄結構：
├── gulpfile.js└── node_modules
? ? └── gulp-uglify
接著輸入de >gulp scriptde>?執行任務
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 目錄下的de >.jsde>?后綴文件。
創建de >a.jsde>?文件，并編寫如下內容
// a.jsfunction demo (msg) {? ? alert('--------\r\n' + msg + '\r\n--------')}demo('Hi')
目錄結構：
├── gulpfile.js├──? js│? ? └── a.js└── node_modules
? ? └── gulp-uglify
接著在命令行輸入de >gulp scriptde>?執行任務
gulp 會在命令行當前目錄下創建de >dist/js/de>?文件夾，并創建壓縮后的de >a.jsde>?文件。
目錄結構：
├── gulpfile.js├──? js│? ? └── a.js├──? dist│? ? └── js│? ? ? ? └── a.js└── node_modules
? ? └── gulp-uglify
function demo(n){alert("--------\r\n"+n+"\r\n--------")}demo("Hi");
九、檢測代碼修改自動執行任務
de >js/a.jsde>一旦有修改 就必須重新在命令行輸入de >gulp scriptde>?，這很麻煩。
可以使用de >gulp.watch(src, fn)de>?檢測指定目錄下文件的修改后執行任務。
在de >gulpfile.jsde>?中編寫如下代碼：
// 監聽文件修改，當文件被修改則執行 script 任務gulp.watch('js/*.js', ['script']);
但是沒有命令可以運行de >gulp.watch()de>，需要將de >gulp.watch()de>?包含在一個任務中。
// 在命令行使用 gulp auto 啟動此任務gulp.task('auto', function () {? ? // 監聽文件修改，當文件被修改則執行 script 任務? ? gulp.watch('js/*.js', ['script'])})
接在在命令行輸入de >gulp autode>，自動監聽de >js/*.jsde>?文件的修改后壓縮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
此時修改de >js/a.jsde>?中的代碼并保存。命令行將會出現提示，表示檢測到文件修改并壓縮文件。
[21:11:01] Starting 'script'...[21:11:01] Finished 'script' after 2.85 ms
至此，我們完成了 gulp 壓縮 js 文件的自動化代碼編寫。
注意：使用de >gulp.watchde>?后你的命令行會進入“運行”狀態，此時你不可以在命令行進行其他操作?？赏ㄟ^de >Ctrl + Cde>?停止 gulp。(Mac 中使用de >control + Cde>)
Mac 下使用de >control + Cde>?停止 gulp
十、使用 gulp.task('default', fn) 定義默認任務
增加如下代碼
gulp.task('default', ['script', 'auto']);
此時你可以在命令行直接輸入de >gulpde>?+回車，運行de >scriptde>?和de >autode>?任務。
最終代碼如下：
// 獲取 gulpvar 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以查看更多用法。
