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

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 を利用した場合でのメモ。

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を記載します。

'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']);

ここまでで準備完了です。

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

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

$ gulp

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

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

その他のTips

■ フロントのビュー確認時
install.php の debug モードを 1 にしてビューキャッシュが利用されない状態にしておくと吉です。

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

"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']);

参考記事

あとがき

勝手にリロードしてくれるんでおいしいです丶(･ω･)ノ
これからバシバシ使ってこうと決めました。

Qiita載せておきました。
■ http://qiita.com/materializing/items/fa6c11e17af65783c9f5

そういやこの方法、自分の環境だとbaserCMSに限らずローカル稼働してる色んなものに使えそう。

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