2015年11月20日 星期五

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內程式碼儲存檔案後將自動刷新。


沒有留言:

張貼留言