BrowserSyncを使ったホットリロードに関して

投稿日：2018年11月11日

BrowserSyncを使ったブラウザのホットリロードに関して。

ホットリロードとは「エディタなどで更新があった際にブラウザがすぐに検知して、最新の状態に自動更新してくれる」状態にブラウザをすることです。

一般的にはnpmでパッケージ管理し、gulpやlaravel-mixなどのタスクランナーを使って管理することが多いかと思われます。

とりあえず自分が動いたケースを。

下記がディレクトリ構成です(一般的にはgulpfile.jsがapp_dir以下に来るケースが多いのでちょっと特殊かも。)

.
├── node_modules
├── gulpfile.js
├── app_dir
         ├── css 生成された実CSSがここに格納される
         ├── images
         ├── index.html 生成された実HTMLがここ
         ├── js
         └── src
              └── ejs 元のejs
              └── css 元のsass

├── node_modules

├── gulpfile.js

├── app_dir

├── css 生成された実CSSがここに格納される

├── images

├── index.html 生成された実HTMLがここ

├── js

└── src

└── ejs 元のejs

└── css 元のsass

gulpfile.js

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var runSequence = require('run-sequence');
var gulp_sass = require('gulp-sass')
var ejs = require("gulp-ejs");
var rename = require("gulp-rename");

gulp.task('server', function() {
  browserSync.init({
      server: './app_dir'
  });
});

const browserReload = function() {
  browserSync.reload()
}

const compileSass = function(){
  console.log('sass execute')
  return gulp.src(['app_dir/src/css/style.scss'])
      .pipe(gulp_sass({outputStyle:'expanded'}))
      .pipe(gulp.dest('app_dir/css'))
}
gulp.task('sass', compileSass)


const compileEjs = function(){
  gulp.src('app_dirl/src/ejs/layout.ejs')
    .pipe(ejs()) // 拡張子の指定
    .pipe(rename({extname:'.html',basename:"index"}))
  .pipe(gulp.dest('app_dir/'));
}

gulp.task('ejs', compileEjs);

gulp.task('watch', function() {
  gulp.watch('./app_dir/**/*', function(){
    compileSass()
    compileEjs()
    browserReload()
  })
});

gulp.task('default', function() {
  return runSequence(
    'server',
    'sass',
    'watch'
  );
})

var gulp = require('gulp');

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

var runSequence = require('run-sequence');

var gulp_sass = require('gulp-sass')

var ejs = require("gulp-ejs");

var rename = require("gulp-rename");

gulp.task('server', function() {

browserSync.init({

server: './app_dir'

});

const browserReload = function() {

browserSync.reload()

}

const compileSass = function(){

console.log('sass execute')

return gulp.src(['app_dir/src/css/style.scss'])

.pipe(gulp_sass({outputStyle:'expanded'}))

.pipe(gulp.dest('app_dir/css'))

}

gulp.task('sass', compileSass)

const compileEjs = function(){

gulp.src('app_dirl/src/ejs/layout.ejs')

.pipe(ejs()) // 拡張子の指定

.pipe(rename({extname:'.html',basename:"index"}))

.pipe(gulp.dest('app_dir/'));

}

gulp.task('ejs', compileEjs);

gulp.task('watch', function() {

gulp.watch('./app_dir/**/*', function(){

compileSass()

compileEjs()

browserReload()

})

});

gulp.task('default', function() {

return runSequence(

'server',

'sass',

'watch'

);

})

この状態でnpx gulpを実行するとnodeの内部にインストールされているビルトインのサーバーがlocalhost:3000で立ち上がり、ejsやsassのファイルを更新した時点で自動反映されます。

参考図書

Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門

ソース

https://github.com/umanari145/front_end