gulp簡單來講，是一個基於流的自動化構建工具，聽起來有點奇怪，但是簡單理解就是前端工程化工具，它的出現使得我們能夠將一些操作或者處理工作直接交給工具去做，充分提高了開發的效率，基於流的意思是通過資料流的方式讀取，處理然後再輸出到檔案

為什麼需要gulp?
* 模組化我們的html,css,js檔案，使得專案的結構更加的清晰
* 轉譯我們的模組檔案（例如：js es6->es5 , panini->html ,Sass->css,）
* 圖片及css檔案的壓縮處理極大的提高網頁效能
* 解決各種瀏覽器相容性問題
* 基於管道思想的pipe多重處理，你可以自定義你想要的處理任務，一切交給gulp自動完成

準備工作

必備：npm包管理器

流程：

1. 在專案目錄下進行 npm init -y

2. npm install gulp –save-dev 作為專案依賴安裝

3. 專案根目錄下新建檔案gulpfile.js

4. 在gulpfile.js中寫入你要gulp為你自動化處理的任務

var gulp = require('gulp')     //請求gulp模組

gulp.task('name', function(){   //給gulp的任務，任務名+任務會執行的函式
    //執行的任務
})

命令列中執行gulp name的時候，gulp就會自動找到你自己定義的那個任務

gulp能做得更多

管道理念

簡單來講，你的任務一定會有原始檔，管道相當於處理方法，管道可以接多條，管道的盡頭就是輸出檔案

我們有專門的資料夾來存放我們的原始檔和輸出檔案，它們的目錄分別為src和dist

gulp本身也給我們提供了很多現成的管道，官網有許多的plugin可以用，上面都有示例程式碼

我們可以用npm像安裝模組一樣把它們一一安裝，在node中一切皆模組，npm可以快速的幫助我們運用這些已經寫好的模組作為我們的一個個管道

gulp管道的使用方法

這裡以sass編譯任務為例：

var gulp = require('gulp')
var sass = require('gulp-sass'
 
) //完整的模組名,請求模組

gulp.task('sass', () => {   //注意node支援es6的語法
    gulp.src('./src/原始檔目錄.sass')    //告訴gulp我們想要處理的檔案
        .pipe(sass())   //將sass處理方法封裝成管道
        //.pipe 處理1
        //.pipe 處理2
        .pipe(gulp.dest('./dist/css/'))     //最後將管道導向輸出，也就是輸出目錄當中生成輸出檔案
})

新增gulp觀察者以便對原始檔的更改進行實時處理

gulp.task('watch',() => {
    gulp.watch('追蹤更改的檔案目錄',['每次更改儲存就執行的task'])
})

附：

• 任務名若為default命令列中直接輸入gulp就會立即執行
• gulp.task(‘default’, [‘styles’, ‘jshint’, ‘watch’])

gulp可以進行多工,讓一個任務同時呼叫多個任務

• 在指定目錄中可以用*號和字尾匹配目錄下的全部同類型檔案

gulp.src('js/**/*.js')