瀏覽器同步檢視

套件名稱：browser-sync

安裝

npm install browser-sync --save-dev

用法

var browserSync = require('browser-sync').create();    //載入 browser-sync

gulp.task('browsersync', function () {
  browserSync.init({
    server: "./dist" //要瀏覽器同步的資料夾
  });
});

其次在需要同步的 task 裡加入.pipe(browserSync.stream())，例如

gulp.task('html', function() {
  return gulp.src('src/*.html')    //所有要壓縮的 .html 檔案
    .pipe(htmlmin({collapseWhitespace: true}))    //去除檔案裡多餘的空格
    .pipe(gulp.dest('dist'));    //壓縮後檔案輸出位置
    .pipe(browserSync.stream());    // 瀏覽器同步
});

gulp.task('style', function() {
   return gulp.src('src/css/*.css')    //所有要壓縮的 .css 檔案
    .pipe(cleanCSS({compatibility: 'ie8'}))    //將 css 最小化
    .pipe(concat('style.min.css'))    //將所有 css 合併成 style.min.css
    .pipe(gulp.dest('dist/css'))    //壓縮後檔案輸出位置
    .pipe(browserSync.stream());    // 瀏覽器同步
});

gulp.task('script', function () {
  return gulp.src('src/js/*.js')    //所有要壓縮的 .js 檔案
    .pipe(uglify())    //將 JavaScript 最小化
    .pipe(concat('main.min.js')) //將所有 js 合併成 main.min.css
    .pipe(gulp.dest('dist/js'));    //壓縮後檔案輸出位置
    .pipe(browserSync.stream());    // 瀏覽器同步
});

執行

gulp browsersync

執行後會自動開啟http://localhost:3000/並顯示內容，但如果想要檔案異動儲存後瀏覽器自動同步新畫面，該怎麼做呢？

gulp watch browsersync

加上監看事件，是不是所寫即所得了呢～～～