サックっとbrowser-syncを設定

  • 79
    Like
  • 0
    Comment
More than 1 year has passed since last update.

タスクランナーまわりのスターターキット的なものはいろいろあると思うけど、「そこまで機能いらないから、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

最後に

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