HTML
CSS
JavaScript
gulp

サックっとbrowser-syncを設定

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

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


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

directory

ターミナル起動し、

$ 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は有料版の機能)

ip address workflow


最後に

違うよ!もっとこうした方がいいよ!

ってのがありましたら、ご指摘いただけると嬉しいです。