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

# 概要

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

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

# 前提条件

* Foundatin CLIがインストールされていて、扱うスキルがある
    * スキルと言っても大層なものではありません。私の[過去記事](http://qiita.com/kohki-shikata/items/1abe8d79388ab90e3730)を参照してください。
* jade または EJS の作法・記法を知っている
* gulpがインストールされている

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

# 一連の流れ

## Basic Templateで準備する。

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

* [Foundation for Sites 6 Docs | Starter Projects](http://foundation.zurb.com/sites/docs/starter-projects.html)

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

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

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

```
foundation new --framework sites --template basic
```

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

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

```
hoge_proj
└ dev
  └Foundation一式
```

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

## package.jsonを入れ替える

* [Foundation 6 with jade or EJS](https://gist.github.com/kohki-shikata/c5c6d1cf3e25b98ce13906dd94f33875)

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

その後、`npm install`します。

## bower install

```
bower install
```

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

## gulpfile.jsを書き換える

* [f6 with jade gulpfile.js](https://gist.github.com/kohki-shikata/b7b9b0bf166fc3f5b82bc896505c0e91)

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

## jadeファイルを用意する。

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

* [jade converter](html2jade.org)

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

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

* [Jade version of index.html for Foundation 6](https://gist.github.com/kohki-shikata/b69fef5c2e4b94cfb18c3baa86d0356b)

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

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

### オリジナル
```jade:index.jade
link(rel='stylesheet', href='css/app.css')
```

```jade: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')
```

### 書き換え後
```jade:index.jade
link(rel='stylesheet', href='/common/css/app.css')
```

```jade: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に

```js:gulpfile.js
//var html_preprocessor = "jade";
var html_preprocessor = "ejs";
```

あとは、devで`gulp`すればOK

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

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

# 課題

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