gulp で BrowserSync を使う

導入

gulp を使うことを前提に導入の方法をざっくり。 Node と gulp はすでに導入済みとして進めます。

最低限ブラウザに表示させることを前提に、以下の package 構成にします。

package.json

{
  "devDependencies": {
    "browser-sync": "~1.6.2",
    "gulp": "~3.8.9"
  },
  "private": true
}

gulp は npm のグローバルでインストールされているなら、必ず必要というわけではないですが、一応入れておきます。

尚、 browser-sync は -g のオプションを付けてグローバルでインストールするのもありです。その場合はローカルのプロジェクトでの導入としては不要だったりします。

逆にグローバルなしでも、ローカルにさえあれば browser-sync は動作します。

gulpfile.js での利用

準備ができたら gulp で利用するために、 gulpfile.js にタスクを用意します。

gulpfile.js

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

gulp.task('server', function () {
  browserSync({
    notify: false,
    server: {
      baseDir: "html"
    }
  });
});

これで $ gulp server で html をルートにして http://localhost:3000 でサーバーが起動します。

reload も自動化

いわゆる livereload を利用するためには、 browser-sync の .reload メソッドを利用します。

gulpfile.js : livereload

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

gulp.task('server', function () {
  browserSync({
    notify: false,
    server: {
      baseDir: "html"
    }
  });

  gulp.watch('html/**/*.html', reload);
});

gulp の watch タスクで htmlファイルが更新されたら browserSync.reload を利用できるようにした例です。

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) : GitHub gulpjs/gulp

上の例では html ファイルの更新が前提になりますが、cssやjsでも同様に指定することで reload の機能が使えるようになります。

その他様々なオプションが用意されていて、portを変えたり、起動時のopenを無効化したりなどなどが可能です。

尚、 baseDir は １つのディレクトリではなくて、複数指定も可能で、散らばったファイルなどをまとめて一つのサーバーの用に扱うことも可能になっています。

gulp.task('server', function () {
  browserSync({
    server: {
      baseDir: ["app", "dist"]
    }
  });
});

ディレクトリによってリライトのような動作も routes のオプションで可能だったりしますが、その他いろいろな機能はドキュメントをみて活用してみてください。

BrowserSync options