サックっとbrowser-syncを設定

タスクランナーまわりのスターターキット的なものはいろいろあると思うけど、「そこまで機能いらないから、html/js/css書いてちょっとした表示テストしたいなっ」って時、browser-syncの設定方法をいつも忘れて調べるのに手間取るので、css/html/jsを保存するたびに、ブラウザシンク＆リロードする設定のメモ。

※node npm gulpはインストールされてる前提

##こんなディレクトリ構成を想定した場合

ターミナル起動し、

$ cd (myprojのパス)

$ npm install browser-sync

##gulpfile.js作成

myproj以下にgulpfile.jsを下記の内容で作成。
下記はXtraFinderなどの、「新規ファイルテンプレート」とかに登録しとくと楽。

gulpfile.js

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

gulp.task('default', ['browser-sync']);


gulp.task('browser-sync', function() {
    browserSync({
        server: {
             baseDir: "./htdocs/"		//対象ディレクトリ
            ,index  : "index.html"		//インデックスファイル
        }
    });
});

//
//ブラウザリロード
//
gulp.task('bs-reload', function () {
    browserSync.reload();
});
 
//
//監視ファイル
//
gulp.task('default', ['browser-sync'], function () {
	gulp.watch("./htdocs/*.html",            ['bs-reload']);
	gulp.watch("./htdocs/commons/css/*.css", ['bs-reload']);
	gulp.watch("./htdocs/commons/js/*.js",   ['bs-reload']);
});

##実行

おもむろに

$ gulp

で http://localhost:3000 が立ち上がって html/css/js を保存するたびに全ブラウザがリロードされて同期すればOK。

##その他TIPS

スマホでも開きたい場合、手っ取り早くローカルIPを調べるには、Alfred Workflow のIP Address Workflowとかだと、さっと調べられてコピれて便利。
（Workflowは有料版の機能）

##最後に

違うよ！もっとこうした方がいいよ！
ってのがありましたら、ご指摘いただけると嬉しいです。