【ツール/エディタ】【Foundation】Foundation6+gulpをWindowsで動くようになるまで | Wood-Roots:blog

CSSフレームワークFoundationの新しいバージョンであるFoundation6がリリースされました。

個人でつくるサイトはFoundationを多用していたので、新バージョンもぜひ試してみたいと思います。

Mac環境ではnpmでコマンドラインツールをインストールして簡単に開発を進めることができるようなのですが、Windows環境では随分手間取ってしまいました…。
とりあえずgulpで自動ビルドをさせるところまで辿り着きましたのでよかったら参考にしてみてください。

やりたかったこと

Foundationはブラウザ上で幅や配色を設定し、カスタマイズされたHTML+CSSファイルのセットをダウンロードすることもできます。

Customize Foundation

しかしこれでダウンロードできるのはビルド済みのファイルですので、Sassが使えません。
ビルド前のSassや記述済みのgulpfile.jsが含まれるファイル一式を入手し、gulpで自動処理をさせるところを目指します。

gulpを使えるようにする

Node.jsがインストール済みの場合は、npmでインストールできます。
未インストールの場合はNode.jsやSassのためのRubyなどのインストールが必要です。

Node.jsやRubyなどのインストールはChocolateyの使用が便利です。
[ツール/エディタ]「Chocolatey」でWindowsでもモダンな開発環境を作る  |  Wood-Roots.blog

これでgulpを使用できる環境ができました。

ビルド前のFoundation6ファイルをダウンロードする

公式サイトの説明ではnpmでFoundation6用のコマンドがインストールできるようなのですが、ちゃんと起動しなかったりFoundation5のファイルがダウンロードされたりで上手くいかない…諦めました(；´Д｀)

しょうがないので手動で以下のリポジトリから一式をダウンロードし、好きなフォルダに展開します。
zurb/foundation-sites

gulpを実行する

上記ファイルを展開したフォルダでコマンドプロンプトを開き、以下のコマンドを実行して必要なモジュールをインストールします。

インストール後（大量のファイルをダウンロードするので結構時間がかかります）、gulpコマンドを入力すると監視がはじまります。

Browser-Syncが含まれるため、コマンド実行後に　http://localhost:3000/　がデフォルトのブラウザで開かれます。

gulpfile.jsを見ると、デフォルトでは以下の処理が行われるようです。

・MarkDown記法をHTMLに変換したりインクルードされたファイルを結合したりする
・Sassのコンパイル
・Javascriptファイルの結合
・Browser-Sync（ファイルを変更したらブラウザをリロードする）

ビルド後のファイルは_buildというフォルダの中に生成されます。

ファイルを編集してサイトを構築したいが…

Foundation5では手を入れるファイルはindex.htmlといくつかの.scssファイルだけでしたが、Foundation6ではテンプレートっぽい構成になっています。パーツごとにファイルを分割してインクルードしたり、本文用ファイルを流し込んで大量ページを生成したり…がデフォルトの状態で対応可能です。

たとえば全体のレイアウトの枠となるファイルはdocs/layout/default.htmlは以下のようなものです。
2重ブラケットの部分が他ファイルのインクルードとなります。

上手く使えば「ローカルで記事生成→ビルド→アップロード」という、DB不要のサイト管理もFoundation6とgulpだけで実現できそうです。
反面、CMSのテーマとして使う場合は、複雑になった分Foundation5よりも扱いにくいような印象もあります。

5でいい、gruntでいいと思う方は過去記事を参考にしてみてくださいｗ
[HTML5/CSS3][ツール/エディタ]Sass版FoundationをWindowsで使えるようにする  |  Wood-Roots.blog

参考にしました

Foundation6の概要やgulpの使い方など、下記ページを参考にさせていただきました。
ありがとうございます。

Foundation6に搭載予定の5つの新機能 – Welcart カスタマイズ
タスクランナー「gulp」の導入手順（Windows）｜WEB Drawer