寫在前面：這篇文章 基于gulp3版本寫的。如果是gulp4版本運行下面一些指令可能會報錯，個別已給出 gulp4版本的解決方案，但是自動刷新的功能找不到gulp4的解決方案，所以仍然提供的是gulp3版本方案。
安裝Gulp
安裝Gulp之前你需要先安裝Node.js。
安裝完Node.js，使用Terminal(終端，win下是cmd)用下面命令安裝Gulp
sudo npm install gulp -g
-g 表示全局安裝，這樣你在電腦上任何位置都能只用gulp 命令。
npm install 是指定從Node Package Manager安裝的命令。
只有mac用戶才需要sudo命令，Mac 用戶需要管理員權(quán)限才能全局安裝，所以需要sudo。
接下來使用Gulp創(chuàng)建項目。
創(chuàng)建Gulp項目
首先，我們新建一個project文件夾，然后進到目錄下執(zhí)行 npm init 命令：
npm init
npm init命令會為你創(chuàng)建一個package.json文件，這個文件保存著這個項目相關(guān)信息。比如你用到的各種依賴（這里主要是插件）（終端會自動出現(xiàn)下面內(nèi)容，這里先隨便填就行）
創(chuàng)建完之后，我們執(zhí)行下面的命令：
npm install gulp--save-dev
這一次，我們局部安裝Gulp。使用—save-dev，將通知計算機在package.json中添加gulp依賴。
在正式開始之前，我們再來明確下項目的目錄結(jié)構(gòu)。
目錄結(jié)構(gòu)
Gulp非常之靈活，理解它的內(nèi)部工作，你就能在項目中得心應(yīng)手。
這篇文章，我們使用通用的webapp目錄結(jié)構(gòu)：
在這個結(jié)構(gòu)中，我們使用app文件夾作為開發(fā)目錄（所有的源文件都放在這下面），dist文件夾用來存放生產(chǎn)環(huán)境下的內(nèi)容。
這些文件名，你想怎么起都行，但請務(wù)必記住你的目錄結(jié)構(gòu)?，F(xiàn)在我們來創(chuàng)建gulpfile.js。
第一個Gulp任務(wù)
你需要先在根目錄下創(chuàng)建一個gulpfile.js文件。
// gulpfile.js 文件引入
var gulp = require('gulp');
這行命令告知Node去node_modules中查找gulp包，先局部查找，找不到就去全局環(huán)境中查找。找到之后就會賦值給gulp變量，然后我們就可以使用它了。
簡單的任務(wù)如下所示：
寫個Hello World，是這樣的：
gulp.task('hello',function() {
console.log('Hello World!');
});
命令行中執(zhí)行 gulp hello，發(fā)現(xiàn)編譯過程如下圖所示，說明這個任務(wù)已經(jīng)跑起來了。
但是如果編譯如下圖，說明出錯了，可能是gulp的版本問題。
可以改成這樣就沒問題了：
gulp.task('hello', async() => {
await console.log('Hello World!');
});
Gulp任務(wù)通常都會比這難一丁點，就一丁點。通常會包含兩個特定的Gulp方法和一些列Gulp插件。
大概這樣：
gulp.task('task-name',function() {
return gulp.src('source-files')
.pipe(aGulpPlugin())
.pipe(gulp.dest('destination'))
})
正如你所見，兩個Gulp方法，src,dest，一進一出。下面用編譯Sass來舉栗子。
Gulp執(zhí)行預(yù)處理
我們使用gulp-sass插件來編譯Sass。安裝插件的步驟是這樣的：
使用npm install 命令安裝
npm install gulp-sass --save-dev
在gulpfile中引入插件，用變量保存
var gulp =require('gulp');
var sass =require('gulp-sass');
在任務(wù)中使用
gulp.task('sass',function(){
return gulp.src('source-files') //這里是傳入的需要gulp的源文件
.pipe(sass()) // 這里是前面require進來的gulp-sass插件
.pipe(gulp.dest('destination')) //這里是輸出的目標(biāo)文件
});
我們需要給sass任務(wù)提供源文件和輸出位置。所以我們先在項目中創(chuàng)建app/scss文件夾，再在scss文件夾下新建styles.scss文件。這個文件將在gulp.src中用到。
sass處理之后，我們希望它生成css文件并產(chǎn)出到app/css目錄下，可以這樣寫：
gulp.task('sass',function(){
return gulp.src('app/scss/styles.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
});
然后在styles.scss 寫一些樣式代碼：
命令行執(zhí)行g(shù)ulp sass,你將看到app/css/styles.css文件下會有下面的代碼：
styles.css是gulp自動為我們生成的。
使用Sass就這么簡單。但是通常我們不止有一個scss文件。這時候可以使用Node通配符
Node中的通配符
通配符是一種匹配模式，允許你匹配到多個文件。不止是Node，很多平臺都有，有點像正則表達式。
使用通配符，計算機檢查文件名和路徑進行匹配。
大部分時候，我們只需要用到下面4種匹配模式：
*.scss ： * 號匹配當(dāng)前目錄任意文件，所以這里 *.scss 匹配當(dāng)前目錄下所有scss文件
*/.scss ：匹配當(dāng)前目錄及其子目錄下的所有scss文件。
!not-me.scss ：！號移除匹配的文件，這里將移除not-me.scss
*.+(scss|sass) ：+號后面會跟著圓括號，里面的元素用|分割，匹配多個選項。這里將匹配scss和sass文件。
那么還是上面的栗子，改造一下：
gulp.task('sass',function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
})
我們這會再在scss文件夾下新建一個style2.scss文件。
命令行執(zhí)行g(shù)ulp sass。然后再看app/css目錄下，現(xiàn)在已經(jīng)有兩個文件了，分別是：style.css 和 style2.css。
現(xiàn)在我們能處理多個文件了，但是不想每次都要執(zhí)行命令，怎么辦？Gulp就是為懶人而生的，我們可以使用watch命令，自動檢測并執(zhí)行。
監(jiān)聽Sass文件
Gulp提供watch方法給我們，語法如下：
gulp.watch('files-to-watch', ['tasks','to','run']);
將上面的栗子再改下：
gulp.watch('app/scss/**/*.scss', ['sass']);
通常我們監(jiān)聽的還不只是一個文件，把它變成一個任務(wù)：
gulp.task('watch',function(){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
})
執(zhí)行g(shù)ulp watch命令。
如果是gulp4 版本的會報錯如下：
['sass']是Gulp3的方式指定依賴任務(wù)，在Gulp4中使用gulp.series和gulp.parallel。
改成這樣就好：
gulp.task('watch', function(){
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
// Other watchers
});
有了監(jiān)聽，每次修改文件保存之后，Gulp都將自動為我們執(zhí)行任務(wù)。
還不夠，修改完直接幫我刷新瀏覽器行嗎。
使用Browser Sync自動刷新
Browser Sync 幫助我們搭建簡單的本地服務(wù)器并能實時刷新瀏覽器
新插件？記?。“惭b，引入，使用。
npm install browser-sync--save-dev
引入：
var browserSync =require('browser-sync');
我們創(chuàng)建一個broswerSync任務(wù)，我們需要告知它，根目錄在哪里。
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir:'app'
},
})
})
我們稍微修改一下之前的代碼，讓每次css文件更改都刷新一下瀏覽器：
gulp.task('sass',function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scssin app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream:true
}))
});
然后改一下watch任務(wù)如下：
gulp.task('watch', gulp.series('sass', 'browserSync', function(){
gulp.watch('app/scss/**/*.scss', gulp.series('sass'));
// Other watchers
}));
執(zhí)行 gulp watch:
?。?！但是改動文件之后，并沒有實時刷新，終端也沒有監(jiān)聽得到。找了很久沒有找到方法解決，我最后把gulp的版本降回了3.9。
cnpm install gulp@3.9.1
然后改了gulpfile.js 文件的watch任務(wù)寫法如下：
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
});
再執(zhí)行g(shù)ulp wacth 此時發(fā)現(xiàn) 再改動scss文件。終端立馬監(jiān)聽得到并且瀏覽器頁面也自動刷新了。真是折騰?。。?！
不止是scss修改的時候需要刷新瀏覽器吧？再改改：
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
現(xiàn)在不論是改動scss，還是html，還是js都能自動刷新了。
附上gulpfile.js 的代碼：
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
gulp.task('hello', async() => {
await console.log('Hello World!');
});
//編譯Sass
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app'
},
})
});
//監(jiān)聽
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});
今天參考網(wǎng)上的文章學(xué)習(xí)了gulp，一邊記錄下來。希望能加深記憶的同時幫到需要的人。
