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 *