EC-CUBE と Gulp と いろいろ。

今回、久しぶりに EC-CUBE 案件を引き受けたのでメモ。


昨今のフロント界隈では、 Grunt や Gulp などのタスクランナーが当たり前のように使われていますね。
EC-CUBE でも当然その恩恵を受けることは可能です。

  • Sass のコンパイル

  • JavaScript の minify と jshint で構文チェック

  • 画像の最適化

  • ブラウザリロード

  • EC-CUBE 本体の phpunit の実行

上記 5つを自動化してみたいと思います。

0. 前提

0-1. 開発環境

  • Mac book pro retina

各ソフトウェアのバージョン

  • 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 の開発用リポジトリデータを前提として話を進めていきます。

  • バージョン : 2_13_2

EC-CUBE 公式 リポジトリ

Github にも大河内さんが非公式ミラーを立ててくださっているので、
そちらの方が見やすいかもしれません。

2014-10-01 22.07.05

また、本記事ではこのリポジトリの一番上の階層を「プロジェクトルートディレクトリ」と呼称します。

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.scsscss/main.min.css にコンパイル
  • html/user_data/packages/default/js/_main.jsjs/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 を開き、上記タグを貼り付けてください。

2014-10-02 23

ちゃんとできていれば、上記のように右上に 「Connected to BrowserSync」とのメッセージがでます。
これで、ファイルを保存するたびにブラウザがリロードしてくれます。
BrowserSync は liveReload よりも高機能なんで、
複数のデバイス・ブラウザで同期したりなんかもできます。


以上、少し長くなりましたがこれで。
沖縄が再来週に迫ってきました。

1shiharaT
本名 : 石原隆志

2013年からWeb業界に身を置き、GrowGroup株式会社でWordPressやEC-CUBEなどのCMSを中心にWeb制作をやってます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です