今回、久しぶりに EC-CUBE 案件を引き受けたのでメモ。
昨今のフロント界隈では、 Grunt や Gulp などのタスクランナーが当たり前のように使われていますね。
EC-CUBE でも当然その恩恵を受けることは可能です。
上記 5つを自動化してみたいと思います。
0. 前提
0-1. 開発環境
各ソフトウェアのバージョン
- php : 5.4.28
- composer : 1e4229e22aefe50582734964d027fc1bfec16b1d
- node : v0.10.26
- npm : 1.4.3
- ruby : 2.0.0p353
- Sass : 3.4.3
上記が僕が実際に作業を行った環境となります。
composer は php 5.3 以上を動作環境としています。
node, npm のインストールと、sass を使用するために ruby と sass のインストールを前提としています。
0-2. ファイル階層
今回は EC-CUBE の開発用リポジトリデータを前提として話を進めていきます。
EC-CUBE 公式 リポジトリ
Github にも大河内さんが非公式ミラーを立ててくださっているので、
そちらの方が見やすいかもしれません。
また、本記事ではこのリポジトリの一番上の階層を「プロジェクトルートディレクトリ」と呼称します。
0-3. テンプレート
デフォルトテンプレートを使用します。
自作のテンプレートを作る方はご自身の環境に合わせてください。
Smarty テンプレートは通常通りの配置でOKです。
css, 画像ファイル, .js,.scss などの静的なファイルの階層は以下のとおりです。
html/
upload/
save_image/
user_data/
packages/
default/
css/
img/
js/
_main.js
scss/
main.scss
- html/user_data/packages/default/scss/main.scss を css/main.min.css にコンパイル
- html/user_data/packages/default/js/_main.js を js/scripts.min.js に コンパイル
- html/user_data/packages/default/img 内の画像ファイルを最適化
- html/upload/save_image 内の画像ファイルを最適化
大体こんなことをやっていきます。
1. Node.js パッケージ のインストール
package.json
npm の設定ファイルです。
このファイルに Gulp のプラグインや依存パッケージを定義していきます。
$ npm init
というコマンドを打つことでひな形を作成できますが、
面倒なので下記をコピペして、プロジェクトルートディレクトリに用意してください。
http://liberty-technology.biz/PublicItems/npm/package.json.html
その後、ターミナルにてプロジェクトルートディレクトリに移動し、
$ npm install
とコマンドを打てば、packages.json に定義してあるパッケージが自動的にインストールされていきます。
2. composer によるパッケージのインストール
node の npm のような、ruby でいう gem のような php の 依存管理ツールです。
comporser 自体のインストールについては、他にもリソースがあるので参考に。
http://kore1server.com/175
Composer ドキュメント日本語訳
今回は、phpunit をインストールするために使用します。
公式リポジトリ・github からダウンロードした方はそのままの comporser.json ファイルで大丈夫です。
$ comporser install
comporser.json と同じ階層 ( プロジェクトルートディレクトリ )でコマンドをターミナルで打つと
phpunit がインストールされます。
3. .jshintrc の設置
JSHint は JavaScript の 構文チェックを行うためのツールです。
利用するためには、構文チェックの設定をこの .jshintrc というファイルに定義します。
Gulp を実行する階層に設置する必要があるので、
プロジェクトルートディレクトリに設置してください。
4. Gulp のインストールと gulpfile.js の作成
Gulp は グローバルとローカル両方にインストールする必要があります。
ローカルの Gulp は最初に npm install でインストールしましたが、
まだ グローバルインストールを行っていない方は次のコマンドをターミナルで打ってください。
$ npm install -g gulp
Gulp で行う動作を定義していきます。
こちらも .jshintrc と同じくプロジェクトルートに設置します。
この gulpfile.js では、「watch」「production」というタスクを定義しています。
$ gulp watch
とターミナルでコマンドを打つと、ファイルの監視が始まり、
ファイルを保存する際に sass, js のコンパイル、
サーバーのリロード、変更があった画像の最適化を自動的に行ってくれます。
$ gulp production
production タスクを実行すると、sassのコンパイルとjsのminify、商品画像の最適化を行ってくれます。
$ gulp phpunit
を実行すると、EC-CUBEの本体のテストを実行してくれます。
5. /data/Smarty/templates/default/site_main.tpl に タグの追加
上記の gulp watch というタスクを走らせた時、
ターミナルで下のような通知が出ると思います。
[BS] Copy the following snippet into your website, just before the closing </body> tag
<script type='text/javascript'>//<![CDATA[
document.write("<script async src='//HOST:3000/browser-sync/browser-sync-client.1.5.2.js'><\/script>".replace(/HOST/g, location.hostname).replace(/PORT/g, location.port));
//]]></script>
下記の script タグを body タグの直前にコピペしてくださいって書いてあるので、そのまま実行します。
/data/Smarty/templates/default/site_main.tpl を開き、上記タグを貼り付けてください。
ちゃんとできていれば、上記のように右上に 「Connected to BrowserSync」とのメッセージがでます。
これで、ファイルを保存するたびにブラウザがリロードしてくれます。
BrowserSync は liveReload よりも高機能なんで、
複数のデバイス・ブラウザで同期したりなんかもできます。
以上、少し長くなりましたがこれで。
沖縄が再来週に迫ってきました。
