[baserCMS]gulpを利用して、baserCMSのテーマ制作やプラグイン開発時にブラウザをオートリロードする #gulp

gulpは、フロントエンドのタスクを自動化できるツールです。
その gulp には、複数のブラウザ動作を同時に確認できる browser-sync プラグインがあります。
そして、browser-sync にはブラウザのオートリロード機能があるので、これを利用して、baserCMSのテーマやプラグインを作っている最中のリロードの省エネやってみました。

発生状況

テーマ作ってる最中のリロードを省きたい
複数のブラウザでまとめて確認したい
制作時間の短縮図りたい

環境

サーバ: MAMP
- PHP 5.4.19
- baserCMS 3.1.0-dev（ローカルで動作するなら何でも良い）
Node.js v0.12.0
- npm : 2.7.3
  - gulp: CLI version 3.8.11
  - browser-sync: 2.4.0

導入

Node.js と gulp のインストールの詳細については省略。
この辺とか見てみると良いです。

というワケで、MacPorts を利用した場合でのメモ。

MacPosrts で Node.js と Node Package Manager をインストール

$ port install nodejs
$ port install npm

※エラー出たら sudo で実行

準備

導入して環境できたら必要ファイルの準備です。

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 を作成して内容記載。
「proxy」のURLにはこのプロジェクトのURLを記載します。

gulpfile.js

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

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

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

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

上記では、gulp.watch に theme 配下全部と app/Plugin 配下全部入れてます。
必要に応じて変更してください。

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

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

$ gulp

External のURLでブラウザが起動し、ページが開かれます。
theme 配下を何か変更して保存。
ブラウザの開いてるページがオートリロードされたらOKです。

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

baserCMS制作時のTips

■ フロントのビュー確認時
install.php の debug モードを 1 にしてビューキャッシュが利用されない状態にしておくと吉です。
　→ リロードされてもビューキャッシュが効いてる状態のときは見た目変わらない
　→ Undefined のようなエラーを発見しやすくなる

■ package.json にURLを指定しておく例

package.json

"name": "example.localhost:8888",

gulpfile.js

'use strict';
var gulp = require('gulp');
var browserSync = require('browser-sync');
var pkg = require('./package.json');    // これが追加

// タスクの設定
gulp.task('browser-sync', function () {
    browserSync({
        proxy: pkg.name,    // package.json の name が設定できる
        open: 'external',
    });

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

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

やってみた感想

実際にテーマ作り、改修時に導入してみたんですが、ウィンドウ切替える、リロードする、IDEに戻る、の3つの作業が減らせました。

[baserCMS]gulpを利用して、baserCMSのテーマ制作やプラグイン開発時にブラウザをオートリロードする