Help us understand the problem. What is going on with this article?

サックっとbrowser-syncを設定

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

最後に

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

itoz
http://itoz.jp/ 最近はnuxt。
http://itoz.jp/
kakusininc
Webサイト構築 から実空間でセンサー系デジタルエンターテイメントまで幅広く制作するデジタル・クリエイティブスタジオ
http://kakus.in/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした