LoginSignup
108

More than 5 years have passed since last update.

サックっとbrowser-syncを設定

Last updated at Posted at 2014-08-14

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

最後に

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
108