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

そろそろ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

だいじょぶだいじょぶ。

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

$ npm install -g generator-webapp

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

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

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

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

$ grunt serve

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

$ npm install -g generator-zf5

雛形準備はこう。

$ yo zf5

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

$ grunt

書き出す時はこう

$ grunt publish

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

デザイナー

虚弱と加齢の狭間でよれよれになりながら、使いやすいデザインについて日々ボンヤリと考えています。手芸、園芸、寺社仏閣や博物館が好きです。通信制大学を始めました。