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...