YuYu Note･ᴗ･

Gulp主要用於前端自動化，什麼是前端自動化呢?自動化主要是幫你完成一些事情，使工作流程簡單化，像是css、js、image的小化、預處理器編譯、livereload...等。

而Gulp是建立在nodejs(開發平台)上的一個套件，然後再利用npm(打包管理工具)安裝相關plugin。

我們現在就開始操作吧!!

1.安裝Node.js和Gulp

於官網下載Node.js，我自己是選擇了左邊的穩定版。(安裝Node同時也已經具有npm)

安裝好之後於Command-line輸入 node -v 與 npm -v 檢查是否安裝成功並顯示版本。

然後於Command-line輸入npm install -g gulp安裝gulp取得gulp CLI。

2.於專案檔案下建立必備檔案package.json(整理gulp plugin)和gulpfile.js(撰寫工作流程)

建立之後會長這樣

再來輸入npm install --save-dev gulp gulp-autoprefixer 後方為需要的plugin名稱

安裝完之後可以看一下packpage.json

完成這兩個部分基本設置都大致上完成囉!!

接下來我們來解說gulpfile.js該如可撰寫，以下是常見的api用法

gulp.task(name[,deps],fn)         //定義任務名稱，指定任務工作內容

gulp.src(globs[,options])           //指定檔案來源

gulp.dest(path[,options])          //檔案儲存位置

gulp.watch(globs[,options],cb) //關注特定檔案是否更動

一般來說在gulpfile.js開頭我們會先載入剛剛下載的plugin

然後再開始寫任務流程

此為css縮小化，使用plugin有 

gulp-plumber               //gulp-plumber為避免pipe因為gulp plugin 錯誤而造成崩潰

gulp-sourcemaps        

gulp-autoprefixer        //為css檔案加上prefix。

gulp-rename              //重新命名檔案，主要用來建立縮小化的檔案

gulp-minify-css          //將css縮小化

gulp-notify                 //產生提示訊息

一般來說我們還會有個任務clean，先將目的檔案清除再做新建，避免已經被刪除的原檔案還存在於目的檔案。

default為預先執行檔案，會在其他任務開始前就先執行。

最後會建立一個監聽任務，當檔案發生變動，就會執行對應的任務。

當上序設定完畢後，於Command-line輸入gulp即可執行。

gulp除了可以縮小化css、js、images還具有許多功能，像是sass編譯及後處理...等，比起使用compass去編譯，gulp對編譯速度方面快上許多。

關於編譯部分就要等有空才能再寫一篇了~

最後，感謝大家努力看完文章~

雖然寫的文筆、觀念不是很好，但希望也能幫助到大家，讓大家知道gulp的好。