Foundation 6をmacOS Sierraにnpmでインストール方法を、何回かにわたって書いてきましたが、最後のfoundation-cliのインストールにたどり着きました。

Foundation 6のインストール

ここまで、環境をセットアップできた方は、例のコマンドを投げるだけです。

$ npm install --global foundation-cli

私も余裕をぶっこぎながら、コマンドをコピペし実行しました。

Cannot read property 'path' of null

困りました。あと一歩なのに、また「パス」です。Node.jsのインストールでもやってるんですけどね。ここまで来て、あきらめるわけにはいかないのでググります。

$ export PATH=$HOME/.nodebrew/current/bin:$PATH

でバスを指定して、設定を読み直します。

$ source ~/.bashrc

これでイケました。ありがとうございます。

動画で見るほどのものでもないんですが、Windowsよりもちょー早いです。Windowsでは、10分近くかかっていた気がします。

参考サイト:node.js の環境管理ツール nodebrew-Block Rockin’ Codes

プロジェクトの作成

さっそく、プロジェクトを作ってみましょう。

1. ターミナルを開きます。以下のコマンドを入力します。

$ foundation new

2. 矢印キーでA website (Foundation for Site)を選び「enter」キーを押します。

3. What's the project called? (no spaces)にプロジェクト名を入力します。「enter」キーを押します。

4. Whitch template would you liketo use?でテンプレートを選びます。お好みですが、今回はZURB Templateを選びました。「enter」キーを押します。

5. 全部で3分ほどでプロジェクトが完成します。Windows環境では、延々15分とかかかっていましたからね。Macは何て快適なんでしょうか。

あんまりうれしくて、また動画です。

foundation watchを使ってみる

プロジェクトができたので、編集してみます。

ホームディレクトリにブロジェクト名のフォルダができています。今回のプロジェクト名は「test」です。

$ cd test
$ foundation watch

で、コンパイラとローカルのウェブサーバーが起動して監視します。プロジェクトのファイルを編集し、保存した瞬間に立ち上がったブラウザーが更新されます。

動画でご覧ください。一瞬で起動してターミナルがブラウザで隠れてしまいますが、雰囲気だけでもお楽しみ下さい。