gulp で BrowserSync を使う

このエントリーをはてなブックマークに追加

HTML・CSS・JS 周りを含むプロジェクトを進める際に、これまでなら MAMP などのローカルでのサーバー環境を用意して進めていたのですが、 grunt や gulp などが出てきてからは、それらをベースに BrowserSync などを利用して開発を進めるようになりました。

毎回準備する手間が省けるのと、デプロイ場所をいろいろと変更してもひとまとめで扱うことができるため、今では無くてはならないツールになっています。

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 は 1つのディレクトリではなくて、複数指定も可能で、散らばったファイルなどをまとめて一つのサーバーの用に扱うことも可能になっています。

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

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

BrowserSync options