《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