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

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

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


npm install --save-dev browser-sync

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

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

index.html


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

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

<body>

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

</body>

</html>

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

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

参考文献
gulp ICS MEDIA

dayjournal memo

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

Yasunori Kirimoto 2016/6/30

gulpfile.js

gulpfile.js

index.html