Zurb Foundation 6 で、jadeまたはEJSを使ってコーディングする

概要

掲題の通り。Foundation 6からはPaniniというHTMLプリプロセッサが導入されましたが、個人的にJade派なのでJadeでコーディングできるようにしました。あと、社内から「jadeは学習コストが…」とかいう甘ったれた声が聞こえてきたので、申し訳程度にEJSにも対応しています。

ここでは、その手順について説明します。

前提条件

• Foundatin CLIがインストールされていて、扱うスキルがある
  • スキルと言っても大層なものではありません。私の過去記事を参照してください。
• jade または EJS の作法・記法を知っている
• gulpがインストールされている

こんなところです。
この記事では、基本的にjadeでコーディングできる前提で話を進めます。

一連の流れ

Basic Templateで準備する。

私の過去記事では、foundation newというコマンドで新たなプロジェクトを準備することになっていましたが、今回は少し違ったやり方になります。

• Foundation for Sites 6 Docs | Starter Projects

上記記事を参考に、Basic Templateという方法でプロジェクトファイルを準備します。

ターミナル等でプロジェクトを作成したいディレクトリに移動し、まずプロジェクト名をつけたディレクトリを作ります。

さらに、そのディレクトリに入り、下記コマンドを実行します。

foundation new --framework sites --template basic

すると、プロジェクト名をどうするか尋ねるプロンプトが出ますので、devと入力。

入力が通れば、Foundationのプロジェクトファイルが落っこちて来ます。

hoge_proj
└ dev
  └Foundation一式

上記のようになっていればOKです。

package.jsonを入れ替える

• Foundation 6 with jade or EJS

こちらのgistに書いてある内容に、package.jsonを書き換えます。

その後、npm installします。

bower install

bower install

Foundationに必要なSCSSやJSが落っこちて来ます

gulpfile.jsを書き換える

• f6 with jade gulpfile.js

次に、このgistに書いてある内容に、gulpfile.jsを書き換えます。

jadeファイルを用意する。

hoge_proj/dev/index.htmlの内容をjade記法に変換します。内容を全部コピーして、下記サービスに貼り付け、変換しましょう。

• jade converter

変換した内容は、hoge_proj/dev/jade/index.jadeとしてファイルを作成し、保存します。

または、下記gistをそのまま貼り付けてもOK。

• Jade version of index.html for Foundation 6

CSSとJSのパスを書き換える

index.jadeのヘッダー、フッター箇所を以下のように書き換えます。

オリジナル

index.jade

link(rel='stylesheet', href='css/app.css')

index.jade

script(src='bower_components/jquery/dist/jquery.js')
script(src='bower_components/what-input/what-input.js')
script(src='bower_components/foundation-sites/dist/foundation.js')
script(src='js/app.js')

書き換え後

index.jade

link(rel='stylesheet', href='/common/css/app.css')

index.jade

script(src='/common/js/jquery.min.js')
script(src='/common/js/what-input.min.js')
script(src='/common/js/foundation.min.js')
script(src='/common/js/app.js')

なんでこうするの？

まず、commonディレクトリ挟むのは、うちの会社ルール都合です。すんません。困る方は、適当にgulpfile.jsをいじっちゃってください。

今回のgulpfile.jsでは、devと同階層にdistというディレクトリを作ります。その後、プロセスされたHTMLとCSSをdistに展開する設定になっています。dist/commonディレクトリを作り、cssとjsをbower_componentsなどから引っ張ってくる設定にしています。

gulpってみよう

さて、準備が整いました。cd devして、gulpしてみましょう。うまくいけば、localhost:3000でブラウザが立ち上がり、プレビューされているはずです。

こんな時はどうする？？

Foundation以外のJSプラグインやアリモノのCSSを使いたい

「カルーセルはslick使いたいんだよね」とかそういう事情は割とよくあります。そんな時は、以下の過程を踏んでください。

• bower install hogehoge
• bower_componentsの中にある、distされたファイル（minされてるのが良い）のパスをコピー
• gulpfile.jsの51行目あたりにあるcopy_jsというファイルに追記
• gulp copy

CSSやbowerにないものも、基本的には同じ流れです。devの中に配置したファイルのパスを、copy_js、copy_cssの配列に収めてあげればOK。

なお、gulp copyはwatchされていませんので、追加する時だけコマンドを叩いてください。このコマンドの内容は、ただ単純にファイルを複製して、common以下のディレクトリにコピーしているだけです。

Git管理してるねんけど

以下のファイルに変更が入った後は、各自でアップデート・再インストールをしてください。

• bower.json　→ bower install
• package.json →　npm install

うちの社内では、上記２つに加え、gulpfile.jsに変更が入った時は、声がけするようにしています。

EJSで使いたい

ファイルの移動

dev直下にejsディレクトリを作り、そこにindex.htmlを移動させます。

hoge_proj
└ dev
   └ ejs
　　　　　　　　　　　　└ index.html

gulpfile.jsを編集

gulpfile.jsの9行目を編集。jadeからejsに

gulpfile.js

//var html_preprocessor = "jade";
var html_preprocessor = "ejs";

あとは、devでgulpすればOK

なんでJSはcopyするだけなん？

concatしてminifyしたいところではありますが、社内ではCMSテンプレート作成案件がほとんどです。CMS側でCSS/JSの連結圧縮をすることもあるので、テンプレート作成時では、あえてバラバラに取り扱えるようにしています。

課題

• とはいえ、concat-minifyバージョンも欲しいな
• cssmapファイル未対応