gulpとBrowsersyncを使ってファイル変更検知と自動ブラウザリロードする

gulpとBrowsersyncを使うと、scssファイルの変更を検知したら、コンパイルしてブラウザを自動リロードすることができる。

説明書

Browsersync + Gulp.js

環境

$ node -v
v6.9.1
 
$ npm -v
3.10.8

インストール

$ npm install browser-sync --save-dev
browsersync@1.0.0 /home/vagrant/work/browsersync
└─┬ browser-sync@2.18.5

stylesタスク

gulpからlibsassを使うの記事に書いたのと同じタスクを使う。cssを書き出した後にbrowserSync.stream()を入れておく。

styles.babel.js

import gulp from 'gulp';
import gulpLoadPlugins from 'gulp-load-plugins';
import browserSync from 'browser-sync';
 
const $ = gulpLoadPlugins();
const src = 'frontend/app/styles';
const dist = 'public/assets/styles';
 
gulp.task('styles', () => {
  return gulp.src(src + '/*.scss')
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.sass.sync({
      outputStyle: 'expanded',
      precision: 10,
      includePaths: ['.']
    }).on('error', $.sass.logError))
    //.pipe($.autoprefixer({browsers: ['last 1 version']})) // vendor prefixを使いたい場合
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest(dist))
    .pipe(browserSync.stream());
});
 
gulp.task('styles:minify', ['styles'], () => {
  return gulp.src(dist + '/**/*.css', {base: dist})
    .pipe($.if('*.css', $.minifyCss({compatibility: '*'})))
    .pipe($.rename((path) => {
      path.basename += '.min';
    }))
    .pipe(gulp.dest(dist));
});

serveタスク

notify: trueにすると、画面右上に"Connected to BrowserSync"みたいなメッセージが表示される
proxy: Railsアプリを動かしている場合は、webrickなどのIPやポート番号を設定する
port: ブラウザーからアクセスする場合のポート番号。開発時にhttp://192.168.35.21:3000を開いていた場合はhttp://192.168.35.21:9000になる
ui: 設定用画面を有効にするかどうか。{port: 9001}にすると9001番ポートで設定用画面にアクセスできる。

serve.babel.js

import gulp from 'gulp';
import browserSync from 'browser-sync';
 
gulp.task('serve', ['serve:styles'], () => {
});
 
gulp.task('serve:styles', () => {
  browserSync({
    // show "Connected to BrowserSync" at right-top when reloaded
    notify: true,
    // proxy original http://192.168.35.21:3000
    proxy: '192.168.35.21:3000',
    // Let's access to http://192.168.35.21:9000
    port: 9000,
    ui: false
    //ui: {port: 9001}
  });
 
  gulp.watch('frontend/app/styles/**/*.scss', ['styles']);
});

npm-scripts

説明書によると、package.jsonに"scripts"フィールドを設定しておくと、npm run gulpでnode_modules/.bin/gulpを実行できるようになる。

package.json

{
  "scripts": {
    "gulp": "gulp"
  }
}

これで、npm run gulp serveとしておくと、勝手にコンパイル＋自動リロードができるようになった。

他のツールを使う場合

https://github.com/Browsersync/recipes
- 他のツールとの組み合わせの設定例が載ってる。