Gulp.js簡易入門指南

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')