QOXホームへ

Yeomanおじさんにsass環境を用意してもらう

Yuko Hashimoto

Yuko Hashimoto


そろそろSass使わないとなー、導入めんどくさいなー、と悩んでいたのですが、Yeomanおじさんが解決してくれました。

プロジェクトひな型生成の「Yo」とパッケージマネージャー「Bower」、そして「Grunt」の3つで構成される「Yeoman」。
sassでコーディングして自動で反映される機能もあります。面倒見のいいおじさんにおんぶにだっこでサクッと環境を用意してみます。

とりあえず導入

入れまーす。

ここで私はnode.jsとnpmが古いよと怒られたので、そっちも入れ直しました。

バージョン確認してみます。

だいじょぶだいじょぶ。

Sass、Bootstrap、Modernizr、全部入り!

webアプリの雛形を入れます。

入れたら、今度からこれでテンプレートを準備してくれます。

Sass、Bootstrap、Modernizrは使う?と聞いてくるので適宜選択。
SassもBootstrapも用意してくれるんだ!おじさんありがとう!
yeoman

grunt serveでブラウザが立ち上がって、出来上がりが表示されます。

Foundation5も使えるようにしとこう

BootstrapだけじゃなくFoundationも使えるようにしたいなー
ジェネレータがあるので入れてみます。
Font Awesome入れる?と聞いてくれます。

雛形準備はこう。

表示はwebappの時とちょっと違うっぽい

書き出す時はこう

フレームワークが楽に準備できるようになったぞー

参考

Yeomanを使ってSass/LESSをもっと簡単スピーディに 〜導入編〜
初めてのYeoman (Grunt/Bowerを使ってみる)
YEOMAN Advent Calendar 15日目:generator-zf5 を紹介します
generator-zf5

Yuko Hashimoto

Yuko Hashimoto デザイナー

デザインって何だろう、と悶々としながら、オシャレさん目指して試行錯誤する日々です。ハト好き。寺社と散歩と時代劇が好きです。気がつくと荷物が多くなるのが悩み。

記事一覧
Go up