QOXホームへ

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

Yuko Hashimoto

Yuko Hashimoto


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

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

とりあえず導入

入れまーす。

$ npm install -g grunt-cli

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

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

$ yo --version
1.5.0

$ grunt --version
grunt-cli v0.1.13
grunt v0.4.5

$ bower --version
1.6.5

だいじょぶだいじょぶ。

Sass、Bootstrap、Modernizr、全部入り!

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

npm install -g generator-webapp

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

$ mkdir [フォルダ名]
$ cd [フォルダ名]
$ yo webapp 

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

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

$ grunt serve

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

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

$ npm install -g generator-zf5

雛形準備はこう。

$ yo zf5

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

$ grunt

書き出す時はこう

$ grunt publish

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

参考

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

Yuko Hashimoto

Yuko Hashimoto デザイナー

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

記事一覧
Go up