《Gulp 入門指南》- 前言

gulp 是基於 node 實現 Web 前端自動化開發的工具，利用它能夠極大的提高開發效率。

在 Web 前端開發工作中有很多“重複工作”，比如壓縮CSS/JS檔案。而這些工作都是有規律的。找到這些規律，並編寫 gulp 配置程式碼,讓 gulp 自動執行這些“重複工作”。

你可以直接訪問 GitHub: gulp-book 檢視本書

目錄

• 安裝 Node 和 gulp
• 使用 gulp 壓縮 JS
• 使用 gulp 壓縮 CSS
• 使用 gulp 壓縮圖片
• 使用 gulp 編譯 LESS
• 使用 gulp 編譯 Sass
• 使用 gulp 構建一個專案

將規律轉換為 gulp 程式碼

現有目錄結構如下：

└── js/ └── a.js

規律

1. 找到 js/目錄下的所有 .js 檔案
2. 壓縮這些 js 檔案
3. 將壓縮後的程式碼另存在 dist/js/ 目錄下

編寫 gulp 程式碼

// 壓縮 JavaScript 檔案
gulp.task('script', function() {
    // 1. 找到
    gulp.src('js/*.js')
    // 2. 壓縮
        .pipe(uglify())
    // 3. 另存
        .pipe(gulp.dest('dist/js'));
});

程式碼執行結果

程式碼執行後檔案結構

└── js/
│   └── a.js
└── dist/
    └── js/
        └── a.js

a.js 壓縮前

function demo (msg) {
    alert('--------\r\n' + msg + '\r\n--------')
}

demo('Hi')

a.js 壓縮後

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

此時 dist/js 目錄下的 .js 檔案都是壓縮後的版本。

你還可以監控 js/ 目錄下的 js 檔案，當某個檔案被修改時，自動壓縮修改檔案。啟動 gulp 後就可以讓它幫助你自動構建 Web 專案。

---

gulp 還可以做很多事，例如：

1. 壓縮CSS
2. 壓縮圖片
3. 編譯Sass/LESS
4. 編譯CoffeeScript

5. markdown 轉換為 html

   • 開始閱讀：安裝 Node 和 gulp
   • 目錄
   • 訂閱本書
   • 訂閱部落格

若作者顯示不是Nimo（被轉載了），請訪問Github原文進行討論：https://github.com/nimojs/blog/issues/19