gulp

類似Bower,Yeoman,Webpack,grunt, gulp 是個新一代的前端專案構建工具，你可以使用它及其外掛對你的專案程式碼進行編譯，還可以壓縮你的js、css、sass程式碼，甚至壓縮你的圖片，gulp 的API較少，因此非常容易學習。 

優點

gulp讓簡單的事情繼續簡單，複雜的任務變得可管理。另外它是基於stream的。通過Node.js強大的流，不需要寫中間檔案，可以很快的完成專案的構建。gulp還自帶有用的外掛，簡單的使用即可完成你期望的工作。例如"gulp-browserify"，"gulp-uglify"，"gulp-rev-append"等。

安裝

Gulp由Node.js催生並編寫的出的，因為需要先安裝Node，然後npm安裝即可。這裡全域性安裝。

npm install -g gulp

package.json檔案

npm init

根據提示，一步步即可生成package.json檔案。

安裝gulp包

npm install gulp --save-dev

帶--save-dev，會自動加到devDependencies裡面。新建gulpfile.js檔案，最簡單的如下：

//在專案根目錄引入gulp和uglify外掛
var gulp = require('gulp');

gulp.task('default',function(){
    // TODO
});

Watch

希望可以執行gulp命令時執行 watch 任務。這個任務隨後會監聽變化並更新檔案。這裡建立一個'js-watch'任務，執行前先執行'js'任務，之後通知browserSync重新載入

// 建立一個任務確保JS任務完成之前能夠繼續響應瀏覽器過載
gulp.task('js-watch', ['js'], browserSync.reload);
 

BrowserSync

用於監聽檔案變化的工具並能自動重新整理服務。開發中hot deploy能提高開發效率。其監聽的檔案一旦有改變，瀏覽器立即重新整理頁面。呼叫browserSync.reload可以實現這點。

npm install browser-sync --save-dev

安裝依賴

//用該外掛打包專案
npm install gulp-browserify -save -dev

//用於合併檔案
npm install gulp-concat -save -dev

//開發中不可避免的要對URL新增MD5版本號，專案中我沒使用，有興趣可以嘗試。
npm install gulp-rev-append -save -dev

//這個是最近看到的一個，主要用於對sass進行壓縮
npm install gulp-sass -save -dev

//用到壓縮
npm install gulp-uglify -save -dev
 

示例

我的專案中完整如下：

// gulpfile.js
var gulp = require('gulp');
var concat = require('gulp-concat');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify')
var browserSync = require('browser-sync').create();

var sass = require('gulp-sass');

var reload = browserSync.reload;

var config = {
	baseDir : '',//當前目錄為程式根目錄
	//監控app資料夾下的html,css,js檔案的change
	watchFiles : ['app/*.html', 'app/css/*.css', 'app/script/*.js']
}

gulp.task('server', function () {
	browserSync.init({
		files : config.watchFiles,
		server : {
			baseDir : config.baseDir
		}
	});
	//監聽原始檔的change
	gulp.watch("app/css/*.css",['css']);
	gulp.watch("app/script/*.js",['js-watch']);
	gulp.watch("app/js/*.js",['js-watch']);
	gulp.watch("app/*html").on('change', reload);
	gulp.watch("index.html").on('change', reload);
})

//scss編譯後的css將注入到瀏覽器裡實現更新
gulp.task('css', function() {
	return gulp.src('app/css/*.css')
	// .pipe(scss())
	.pipe(concat('all.css'))//合併後的檔名
	.pipe(gulp.dest('css'))
	.pipe(reload({stream : true}));
});

//處理完JS檔案後返回流
gulp.task('js', function () {
	return gulp.src(["app/script/*.js", "app/js/loginController.js"])
	.pipe(browserify())//使用browserify進行打包
	.pipe(uglify())//壓縮檔案
	.pipe(concat('all.js'))//合併後的檔名
	.pipe(gulp.dest('js'));//合併後的檔案路徑
});
// 建立一個任務確保JS任務完成之前能夠繼續響應瀏覽器過載
gulp.task('js-watch', ['js'], browserSync.reload);

//定義預設任務
gulp.task('default', ['server']);

目錄說明

原始碼和生成的檔案最好分開存放。app資料夾下都是編寫的原始碼，打包生成的檔案都存放在相應的目錄下，如css、js等。