経験知ロゴ

日々の経験を知識として発信するブログ

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

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」するだけでいいのは嬉しいです。

▼この記事をシェアできるリンク


▼このブログをフォロー・RSS購読できるリンク