gulp學習筆記

概念

要學習gulp，首先是瞭解what is gulp。

gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器；它不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成；使用它，咱們不只能夠很愉快的編寫代碼，並且大大提升咱們的工做效率。它是基於Nodejs的自動任務運行器， 它能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。

做用及與grunt對比

我嘗試翻譯一下這個幻燈片中的內容。

首先，咱們要把咱們的項目想象成許多水管，裏面流動着文件。而不是想象成一個裝滿貨物的貨車。同時，想要成爲一名編程開發人員，瞭解流控制是一個必要條件，而理解新式流控制技術可以讓你更加高效。

接下來，讓咱們想象一個畫面：從某個文件系統中讀取文件，通過一系列的修改後再提交到文件系統。
若是你的腦海中浮現的畫面是：

那你多是一個grunt使用者。
事實上，理想的流程應該是下面這樣：

也就是說，咱們並不須要修改一次就提交一次。應該在屢次修改後一次性提交到文件系統。

在gulp以前，人們使用着grunt，它有不少強大的插件，但熟悉它的朋友可能會遇到以下的問題：

1. 插件會作過多的事件，好比我想要一個banner卻去使用一個js壓縮插件來實現；
2. 插件會作不少不須要的事情，好比我想要爲本身的代碼添加一個單元測試，這也須要使用一個插件來實現；
3. grunt的配置文件試圖去實現全部事情卻搞得一團糟；
4. 糟糕的流控制致使產生不少臨時文件

gulp的理念與grunt相反，它試圖讓咱們的項目構建系統更加自由，約束更少。也就是說，這個構建系統應該只控制文件，其餘的事交給別的工具來處理。

下面是gulp和grunt的區別：

1. 使用gulp，你的構建文件僅僅是代碼，而不是一系列配置；
2. 使用gulp插件時，只須要理解插件自己依賴的那個庫的原始配置就能夠了，而不是像grunt那樣，常常都是將配置包裝一層後再暴露給使用者；
3. 插件每每不超過20行代碼，由於它們只專一於解決一個問題；
4. 併發執行任務；
5. 理想狀態的文件輸入輸出流。

所以，gulp提供了文件流和一個基礎的任務系統，而你要學習gulp，只須要理解5個方法：

1. gulp.task(name, fn)：定義一個名爲name的任務，你也能夠自定義該任務的前置任務；
2. gulp.run(tasks...)：以最大的併發數開始執行任務；
3. gulp.watch(glob, fn)：監聽文件變化，並在變化事件觸發時執行相應的回調函數；
4. gulp.src(glob)：這個方法會返回一個可讀文件流；
5. gulp.dest(path[, options])：向目標地址輸出文件，若文件不存在則先新建該文件。

好了，你已是一個gulp專家了（滑稽臉）。

實戰

瞭解了gulp的基本概念，以及能夠用gulp解決的問題後，讓咱們來實際體驗一次gulp。

新建一個demo文件夾，並執行

npm init

初始化項目，而後安裝gulp

npm install gulp -g

最後，新建gulpfile.js。

在gulpfile.js中，輸入以下代碼：

var gulp = require("gulp");
//壓縮js、css文件
var uglify = require("gulp-uglify");
var cleanCss = require('gulp-clean-css');
//自定義script任務，處理js文件壓縮
//pipe()是node.js的stream中的方法
//參數是一個function，這個function做用是接受上一個流（stream）的結果，並返回一個處理後流的結果
gulp.task('script', function () {
    gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});
//自定義css任務，處理css文件壓縮
gulp.task('css', function () {
    gulp.src('css/*.css')
        .pipe(cleanCss())
        .pipe(gulp.dest('dist/css'));
});

以後，咱們要新建兩個文件夾：js和css，其中分別新建index.js和index.css兩個文件。最後，在命令行中輸入

gulp css
gulp script

gulp就會執行任務，自動新建dist文件夾，將壓縮後的文件放入該文件夾。
若是要在修改代碼後自動更新，使用gulp.watch方法：

gulp.task('modify', function () {
    gulp.watch('js/*.js', ['script']);
    gulp.watch('css/*.css', ['css']);
})

命令行輸入

gulp modify

以後修改css文件，命令行會顯示

[13:44:41] Starting 'modify'...
[13:44:41] Finished 'modify' after 14 ms
[13:44:48] Starting 'css'...
[13:44:48] Finished 'css' after 15 ms

最後文件目錄以下：

相關插件

gulp功能強大彷佛都是由於其豐富的插件生態，因此最後打算介紹一下主流使用的插件：

插件名	做用
gulp-sass	編譯sass成css文件
gulp-imagemin	壓縮 png/jpg/git/svg 格式圖片文件
gulp-gzip	gzip插件
gulp-util	集合了許多 Gulp 中經常使用的小工具，例如 log() 、 colors 等等
gulp-spriter	自動合併雪碧圖
gulp-watch	這個插件能夠自定義觸發事件，並且經過插件提供回調機制配合你們熟悉的 console 能夠很方便的觀察到構建流程。
gulp-colors	設置 CLI 輸出文字的顏色
gulp-rev	將 MD5 指紋寫入文件名
gulp-sourcemaps	生成 Source Map
gulp-uglify	壓縮js文件
gulp-clean-css	壓縮css文件
gulp-concat	合併 JS 或 CSS 文件

參考

gulp經常使用插件
gulp 使用指南