[htmlコーディング] gulpを利用してコーディング時に（複数）ブラウザをオートリロードする

内容としては、以前に「gulpを利用して、baserCMSのテーマ制作やプラグイン開発時にブラウザをオートリロードする」で公開したものとほぼ同じ。
■ http://qiita.com/materializing/items/fa6c11e17af65783c9f5

この内容を、普段はhtml、cssやJavaScript(以下、js）を書いてるフロントエンジニアさん向けにしたもの。。。です。
以前は書いていたMAMPも不要。

なにができるの？

• html、css、js に変更を入れた際に、ブラウザでオートリロード
• 複数のブラウザでまとめて確認できる
  • 複数ブラウザ間のスクロール操作、フォーム入力の同期

導入.1

Node.js と gulp の詳細については省略。
ここではさっくり導入手順のみ紹介します。
環境は Mac を前提としてます。

黒い画面（ターミナル）開いて操作してください。
Node.js と Node Package Manager をインストールします。

概要を掴むにはこの辺一読すると良いです。
■ MEANスタックで始めるWebアプリ開発入門（2）：いまさら聞けないNode.jsの基礎知識とnpm、Gulpのインストール (1/2) - ＠IT http://www.atmarkit.co.jp/ait/articles/1501/09/news040.html

Homebrew の場合

$ brew install node

MacPosrts の場合

$ port install nodejs
$ port install npm

※エラー出たら sudo で実行

導入.2

$ npm install -g gulp

これを実行することで、モジュールのコマンドを実行できるようになります。
「gulp」のコマンドを使えるようにするために実施します。

準備

導入して環境できたら必要ファイルの準備です。
ここからの操作は、プロジェクトフォルダ配下に移動して実行してください。

package.json の作成

プロジェクトフォルダに移動して以下。
※ここでのプロジェクトフォルダとは、ローカル環境で作成中のウェブサイトのディレクトリ直下のことを指します。

$ npm init

package.json が作成されます。
この json ファイルには、gulp の情報が記載されます。
全部 Enter でOK。

browser-sync と gulp をインストール

プロジェクトフォルダに移動して以下。

$ npm install browser-sync gulp --save-dev

※ --save-dev で package.json へのgulp情報の追記
　 → 別の環境に package.json 持って行って $ npm install と叩くだけで、package.json に記載内容と同一の内容が構築できる
※エラー出たら sudo で実行

インストールすると「node_modules」フォルダが作成されます。
この中身に動作に必要なファイル群が入ってます。
バージョン管理からは ignore しとくと良いです。

gulpfile.js の作成

プロジェクト直下に gulpfile.js を作成して内容記載。以下をコピペでOKです。

gulpfile.js

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

gulp.task('browser-sync', function () {
    browserSync({
        server: {
            baseDir: './'
        },
        // external 指定すると、実行時のアクセスURLがIPアドレス指定側で開くことができる
        open: 'external',
    });

    // 指定フォルダ以下のファイルを監視
    gulp.watch(['./**/*.html', './**/*.css', './**/*.js'], function() {
        // ファイルに変更があれば同期しているブラウザをリロード
        browserSync.reload();
    });
});

gulp.task('default', ['browser-sync']);

上記では、gulp.watch にプロジェクト内の html、css、js ファイル全てを変更の監視対象としてます。
必要に応じて変更してください。

実施: browser-sync を利用したオートリロード

プロジェクト直下で以下のコマンド実行。

$ gulp

1. External のURLでブラウザが起動し、ページが開かれる
2. プロジェクト内の html、css、js の何か変更して保存
3. ブラウザで開いてるページがオートリロードされたらOK

ここまでできたら完了です。
おめでとござますー。

実施: 複数のブラウザでまとめて確認

そもそもは browser-sync という名の通り、複数のブラウザで同じ動作をさせるためのプラグインです。
オートリロードされるブラウザのURLを、他のブラウザ（Chrome、Firefox、Safari 等）で開いてください。

その後、「2. プロジェクト内の html、css、js の何か変更して保存」を実施すると、同じURLを開いているブラウザ全てがリロードされます。

また、スクロール操作も、ひとつのブラウザでスクロールを行うと、他のブラウザはその動作に追従します。

表示している html にフォーム入力が存在する場合は、ひとつのブラウザの入力欄に何か入力すると、他のブラウザにもその内容が入力欄に反映されます。

その他のTips

css、js の変更がオートリロードで反映されない場合があるかもしれません。これはブラウザのキャッシュの影響です。
その際には以下を参考にどうぞ。

• ブラウザが持つ開発ツールを用いて、ブラウザキャッシュをOFFる
  • 例: Chromeの場合、開発ツールの Settings 内に Disable cache

やってみた感想

静的ファイルのサイト、CMS組込み前のhtml作成時も自在にオートリロードできて、複数ブラウザ間での確認がラクになりました。
また、レスポンシブの場合も、ウィンドウサイズを変えた状態で複数ウィンドウを開いておくことで同時に確認できます。

まとめ

• 「導入.1、導入.2」は初回だけ
• プロジェクト毎での実施は「準備」を行う

という手順になります。
また、利用することにより、プロジェクト内に以下のファイル、フォルダが作成されます。

• node_modules フォルダ
• gulpfile.js
• package.json

これらは、git や svn のようなバージョン管理からは ignore したり、コミットしないようにしておくと良いです。

参考記事

いくつか gulp を利用した記事をご紹介。

• http://office7f.com/2014/12/19/megumi201412/