111
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

サックっと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

最後に

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
111
Help us understand the problem. What are the problem?