gulp + browser-sync 同步的 RWD 開發環境

Responsive Web Design(RWD) 是現在網頁式設計時必須要考慮的要件，但是在開發的過程中，需要同時對於不同的 Device 檢視效果，gulp + browser-sync 是一種可以同時更新不同 Device 的 workflow，設定的步驟如下：

1. 安裝 nodeJS:
2. npm update: npm update
3. 安裝 global gulp :  npm install -g gulp
4. 切換到 project 目錄
5. 安裝 gulp + browser-sync + gulp-sass: npm install gulp browser-sync gulp-sass --save-dev
6. 新增 gulpfile.js:內容如下
7. 執行 gulp: gulp

 依照 Browser-sync 網站的說明，gulpfile.js 內容如下：

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var sass = require('gulp-sass'); 
 
// start server
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
// process JS files and return the stream.
gulp.task('js', function () {
return gulp.src('js/*js')
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
// use default task to launch BrowserSync and watch JS files
gulp.task('default', ['browser-sync'], function () {
// add browserSync.reload to the tasks array to make
// all browsers reload after tasks are complete.
gulp.watch("js/*.js", ['js', browserSync.reload]);
}); 

可以再加入其他的套件如 Jade, less, minify, etc...

轉載自：http://elvishsieh.blogspot.tw/2015/07/gulp-browser-sync-rwd.html