Foundation6で開発環境を整えた手順

僕が使っているCSSフレームワークの「Foundation」。

CSSだけでなく、sassやgulpなど、開発を便利にしてくれる環境も構築してくれます。

環境構築にちょっと手間取ったので、自分なりのメモ。

Homebrewのインストール

Macのパッケージ管理をしてくれるHomebrewをインストール。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Nodebrewをインストール

Node.jsのバージョンを切り替えるために、Nodebrewを導入し、その中にnode.jsを入れる。

Nodebrewをインストール。

$ brew install nodebrew

セットアップ。

$ nodebrew setup

「.bash_profile」にパスの設定を書き込む。

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

追加したパスを有効にする。

$ source ~/.bash_profile

Node.jsをインストール

Node.jsの安定板をインストール。

$ nodebrew install-binary stable

使用するバージョンを選択。

$ nodebrew use stable

他のバージョンをインストールする場合は、次のコマンドなどでバージョンを調べ、

$ nodebrew ls-all

バージョンを指定しインストール。

$ nodebrew install-binary v7.2.1

バージョンを変えるには

$ nodebrew use v7.2.1

Foundationのインストール

Foundation Cliを使うとSassの自動コンバイルやBrowsersyncの設定などしてくれるので便利。

$ npm install --global foundation-cli

新規ブロジェクトを作成したいフォルダへ移動し、下記コマンドを実行。

$ foundation new

質問を聞かれるので、矢印キーで選択してenterで決定。

? What are you building today? A website (Foundation for Sites)
作成したいのが何か聞かれる。websiteを作るのでwebsiteを選択。

? What’s the project called? (no spaces)
プロジェクト名を聞かれるので入力してenter。この名前のフォルダが作成される。

? Which template would you like to use?
どのテンプレートを使いたいか聞かれる。BrowserSyncを使いたいので、「ZURB Template: includes Handlebars templates and Sass/JS compilers」を選択。もう片方を選択するとBrowserSyncは入っていないので注意。

5分前後インストールに時間がかかるので待つ。

プロジェクトフォルダ内に入ってFoundationを起動。

$ foundation watch

「Access URLs」に書かれているアドレスにアクセスするとページが表示される。

IPアドレスの方にアクセスするとiPhoneなど他のデバイスからも見ることができる。

3001ポートの方はBrowsersyncの設定画面が表示される。

おわりに

FoundationでSassのコンパイルやBrowsersyncの環境を整えてくれるのはとても楽でした。「$ foundation watch」するだけでいいのは嬉しいです。