Gulp Plugin

Gulp為前端開發的一個重要外掛，透過簡易的配置檔我們可以將開發過程中許多的.js、.css代碼進行合併及壓縮，甚至是sass的編譯、jsHint、LiveReload等功能也能藉由此外掛達到目標，此外也不必擔心效能問題，Glup透過Nodejs的串流讓建構更加快速。

一、安裝Gulp

二、基本外掛清單

 * 編譯 Sass（gulp-ruby-sass）
 * Autoprefixer（gulp-autoprefixer）
 * 縮小化（minify）CSS（gulp-minify-css）
 * JSHint（gulp-jshint）
 * 串接（gulp-concat）
 * 醜化（Uglify）（gulp-uglify）
 * 壓縮圖檔（gulp-imagemin）
 * 即時重整（LiveReload）（gulp-livereload）
 * 快取圖片，只有變更的圖檔才會壓縮處理（gulp-cache）
 * 通知更動（gulp-notify）
 * 清除檔案，有個乾淨的建構環境（del）

三、安裝外掛

npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

四、建立gulpfile.js，並載入相關外掛

五、建立一個合併及最小化js任務來進行測試

六、接著我們嘗試livereload來觀察某些檔案，當檔案內容改變時自動刷新頁面。

接著網址列上輸入localhost:8080即可看到網頁內容，此時隨意修改js內程式碼儲存檔案後將自動刷新。