概要
掲題の通り。Foundation 6からはPaniniというHTMLプリプロセッサが導入されましたが、個人的にJade派なのでJadeでコーディングできるようにしました。あと、社内から「jadeは学習コストが…」とかいう甘ったれた声が聞こえてきたので、申し訳程度にEJSにも対応しています。
ここでは、その手順について説明します。
前提条件
- Foundatin CLIがインストールされていて、扱うスキルがある
- スキルと言っても大層なものではありません。私の過去記事を参照してください。
- jade または EJS の作法・記法を知っている
- gulpがインストールされている
こんなところです。
この記事では、基本的にjadeでコーディングできる前提で話を進めます。
一連の流れ
Basic Templateで準備する。
私の過去記事では、foundation newというコマンドで新たなプロジェクトを準備することになっていましたが、今回は少し違ったやり方になります。
上記記事を参考に、Basic Templateという方法でプロジェクトファイルを準備します。
ターミナル等でプロジェクトを作成したいディレクトリに移動し、まずプロジェクト名をつけたディレクトリを作ります。
さらに、そのディレクトリに入り、下記コマンドを実行します。
foundation new --framework sites --template basic
すると、プロジェクト名をどうするか尋ねるプロンプトが出ますので、devと入力。
入力が通れば、Foundationのプロジェクトファイルが落っこちて来ます。
hoge_proj
└ dev
└Foundation一式
上記のようになっていればOKです。
package.jsonを入れ替える
こちらのgistに書いてある内容に、package.jsonを書き換えます。
その後、npm installします。
bower install
bower install
Foundationに必要なSCSSやJSが落っこちて来ます
gulpfile.jsを書き換える
次に、このgistに書いてある内容に、gulpfile.jsを書き換えます。
jadeファイルを用意する。
hoge_proj/dev/index.htmlの内容をjade記法に変換します。内容を全部コピーして、下記サービスに貼り付け、変換しましょう。
変換した内容は、hoge_proj/dev/jade/index.jadeとしてファイルを作成し、保存します。
または、下記gistをそのまま貼り付けてもOK。
CSSとJSのパスを書き換える
index.jadeのヘッダー、フッター箇所を以下のように書き換えます。
オリジナル
link(rel='stylesheet', href='css/app.css')
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')
書き換え後
link(rel='stylesheet', href='/common/css/app.css')
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に
//var html_preprocessor = "jade";
var html_preprocessor = "ejs";
あとは、devでgulpすればOK
なんでJSはcopyするだけなん？
concatしてminifyしたいところではありますが、社内ではCMSテンプレート作成案件がほとんどです。CMS側でCSS/JSの連結圧縮をすることもあるので、テンプレート作成時では、あえてバラバラに取り扱えるようにしています。
課題
- とはいえ、concat-minifyバージョンも欲しいな
- cssmapファイル未対応