我將會挑幾個常用插件來學習，主要是通過實戰來了解Gulp的應用。在開發過程中，根據自己項目需求去尋找對應插件使用，來滿足需求及提高開發效率。

在項目中，先初始化創建package.json。
npm init
安裝Gulp依賴包
npm gulp -save-dev
切換項目中目錄下，創建gulpfile.js來編寫你的任務
- 首先指定構建內容，通過gulp插件來完成構建，最終輸出指定目錄裡。
- 使用前，需要安裝這兩個gulp插件(npm i gulp-sass, npm i gulp-autoprefixer)
  `
  const gulp = require(‘gulp’);
  const sass = require(‘gulp-sass’);
  const autoprefixer = require(‘gulp-autoprefixer’);

gulp.task(‘default’, function() {
console.log(‘hello world’)
})

gulp.task(‘styles’, function() {
gulp.src(‘sass/*/.scss’)
.pipe(sass())
.pipe(autoprefixer({
browsers: [‘last 2 version’]
}))
.pipe(gulp.dest(‘./css’))
})
`

代碼說明

定義gulp任務及執行

gulp.task(“任務名稱”, func)
我們可以用任務名稱來執行任務，在terminal輸入gulp taskname

指定gulp任務內容

gulp.src(*/.js).pipe(plugin1()).pipe(plugin2())

gulp.src(內容來源)方法會返回Stream物件，可以通過pipe方法將內容傳遞給插件。所有插件都接受pipe傳來數據，處理數據可允許鏈式方式去呼叫。

說白點：從文件來源裡取出處理，通過pipe方法將文件來源裡數據傳給對應插件。此插件就會幫我們處理。例如sass文件，browser讀不懂，我們就使用工具來幫我們編譯sass轉換成純css，然後將處理完數據，給予指定目錄去輸出。

.pipe(gulp.dest(指定目錄))
處理完後，從pipe傳過來值給予指定位置輸出。

Gulp 流 (Streams)

Gulp會將輸入文件轉換成一個內存流，因此I/O只在所有任務開始或最後完成。也就是說所有操作在內存中進行，不需要操作磁盤，大大提升構建速度。

額外學習

Sass

Sass

寫css是最煩事情，例如重覆，無法使用變數或像編程一樣寫法。前端技術迅速發展，除了解決開發效率外，帶來給我們便利。

據我所知css預處理有三個（stylus，less，sass，postcss）。可以通過編寫再編譯成純css，可供browser解析。

參考來源：

gulp實戰筆記

目錄

前置作業

Gulp全局安裝

開始

代碼說明

Gulp 流 (Streams)

額外學習

Sass