dayjournal memo

Total 974 articles!!

gulp #008 – gulpとBrowsersyncでブラウザ同期

Yasunori Kirimoto's avatar

今回は、「gulp」と「Browsersync」でブラウザ同期する方法を紹介しようと思います。


node.js_016_02


node.js_023_01


作業フォルダでnpmでbrowser-syncをローカルインストールします。


npm install --save-dev browser-sync

node.js_023_02


gulpfile.js


var gulp = require('gulp');
var browserSync = require("browser-sync");

gulp.task("BrowserSyncOn", function () {
    browserSync({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch("./**/*", function() {
        browserSync.reload();
    });
});

gulp.task('default', ['BrowserSyncOn'])

最新のBrowsersyncでは少し書き方が違うようです。ハムさんに教えて頂きました。ありがとうございます。 ※どちらの記述方法でも動きます。

gulpfile.js


var gulp = require('gulp');
var browserSync = require("browser-sync").create();
var reload = browserSync.reload;

gulp.task("BrowserSyncOn", function () {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });

    gulp.watch("./**/*").on("change", reload);
});

gulp.task('default', ['BrowserSyncOn'])

作業フォルダでgulpを実行すると下記のようにコマンドプロンプトに表示されます。


gulp

node.js_023_06


処理が実行されると、ローカルサーバーが立ち上がり「index.html」が表示されます。

node.js_023_03


index.html


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>sample</title>
</head>

<body>

    <p>サンプル!サンプル!!</p>

</body>

</html>

「index.html」を修正して保存するとリアルタイムにブラウザ同期され自動でリロードされます。

node.js_023_05


gulpとBrowsersyncを利用することにより、gulpで保存監視・Browsersyncでローカルサーバーが立ち上がりオートリロードされます。そのため、監視するファイルを指定すればファイルが更新された時点で、ブラウザが自動でリロードされます。構築内容をリアルタイムに確認することが可能になります。 今までのように手動でリロードすることがなくなります。すごく便利なツールだと思います。私は、Bracketsのライブプレビューと使い分けて利用しています。



book

Q&A