Gulp Plugin

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

一、安裝Gulp

	npm install gulp -g
	//將 gulp 安裝到本地端的專案內，並紀錄於 package.json 內的devDependencies 屬性。
	npm install gulp --save-dev

view raw install.js hosted with ❤ by GitHub

二、基本外掛清單

 * 編譯 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，並載入相關外掛

	var gulp = require('gulp'),
	sass = require('gulp-ruby-sass'),
	autoprefixer = require('gulp-autoprefixer'),
	minifycss = require('gulp-minify-css'),
	jshint = require('gulp-jshint'),
	uglify = require('gulp-uglify'),
	imagemin = require('gulp-imagemin'),
	rename = require('gulp-rename'),
	clean = require('gulp-clean'),
	concat = require('gulp-concat'),
	notify = require('gulp-notify'),
	cache = require('gulp-cache'),
	livereload = require('gulp-livereload');

view raw declared.js hosted with ❤ by GitHub

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

	gulp.task('jsMin', function () {
	return gulp.src(['js/controllers/app.js', 'js/controllers/rewardRecord.js'])
	.pipe(concat('dist/assets.js')).pipe(uglify({
	mangle: true
	})).pipe(gulp.dest('js'));
	});
	gulp.task('default', ['jsMin']);

view raw merge.js hosted with ❤ by GitHub

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

	gulp.task('server', function () {//建立臨時Server
	connect.server({
	livereload: true
	});
	});
	gulp.task('watch', function () {//監看的檔案
	gulp.watch('*', ['index']);
	gulp.watch(['js/**/*.js'], ['js']);
	gulp.watch(['views/**/*.html', 'views/*.html'], ['views']);
	gulp.watch('css/*.css', ['css']);
	gulp.watch('language/*.json', ['lang']);
	});
	gulp.task('default', ['server','watch']);

view raw start.js hosted with ❤ by GitHub

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