gulp browserSync - yagisawatakuya/Wiki GitHub Wiki

BrowserSyncインストール

npm install browser-sync --save-dev

・gulpfile.jsに下記記述

// server追加
gulp.task('default', ['watch', 'scss', 'server']);

・ブラウザのリロードを自動化

gulp.task('watch', () => {
  gulp.watch(`./src/**/scss/**/*.scss`, ['scss']);
  gulp.watch(`./src/**/*`, ['server-reload']);
});

gulp.task('server-reload', () => {
  browserSync.reload();
});

・対象ディレクトリとインデックスファイルの指定

gulp.task('server', () => {
  browserSync({
    server: {
      baseDir: './src/',
      index: 'index.html'
    }
  });
});

・ローカル共有

      Local: http://localhost:3000
    External: http://192.168.0.57:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.57:3001

BrowserSync（ブラウザシンク）

参考：https://qiita.com/niusounds/items/a95978f9a1cb328d3021

// プロジェクトにインストール
npm install browser-sync --save-dev
// グローバルインストール
npm install -g browser-sync

gulpfile.js 作成サンプル

var gulp = require('gulp');
var browserSync =require('browser-sync');

gulp.task('default', ['browser-sync']);


gulp.task('browser-sync', function() {
    browserSync({
        server: {
             baseDir: "./★★★/"       //対象ディレクトリ
            ,index  : "index.html"      //インデックスファイル
        }
    });
});

//
//ブラウザリロード
//
gulp.task('bs-reload', function () {
    browserSync.reload();
});

//
//監視ファイル
//
gulp.task('default', ['browser-sync'], function () {
    gulp.watch("./★★★/*.html",            ['bs-reload']);
    gulp.watch("./★★★/commons/css/*.css", ['bs-reload']);
    gulp.watch("./★★★/commons/js/*.js",   ['bs-reload']);
});

監視対象の指定 サンプル

browser-sync start --server --files *.html
browser-sync start --server --files "*.html, *.css, *.js"
browser-sync start --server --files *