Blog

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

2015.11.18
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

Yeoman画面

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

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