Yeomanを使ってSass/LESSをもっと簡単スピーディに〜導入編〜

概要

解説編でも書きましたが、Yeomanはビルドツールです。

ファイルの変更を監視してブラウザのリロードをかけたり、Sass LESSのコンパイルを行い、最終的に実行ファイル(プレーンなHTMLやCSSファイル)を出力したりする機能があります。

今回は Yeoman1.0 (beta) のインストールについて書きます。
(※ 2013/02/21時点で安定版はv0.9.6、v1.0.0は beta の開発版です)

Yeoman インストール

Yeoman を利用するために、以下3つをインストールします。


$ npm install -g yo grunt-cli bower

yo: Yeoman本体です。 v0.9まで yeomanコマンドですべて実行していたのですが、yoコマンドに変更されました。
grunt-cli: Grunt はタスク管理ツールです。 LiveReloadやSass、LESSのコンパイルは Grunt で実行します。
bower: bower はTwitter が提供しているライブラリ管理するツールです。 jQuery や backbone.js などのライブラリは Bower で管理します。

余談ですが、v0.9.6まではYeomanが Grunt と Bower をラップ(内包)して、yeomenコマンドだけで完結する仕組みでした。

v1.0からそれぞれ単体でコマンドを使う様になりました。

どのように変更されたかという解説がこちらです。

Migrate from 0.9.6 to 1.0: http://yeoman.io/migrate.html

では続いて、正常に Yeoman がインストールされているかを確認します。


$ yo --version

1.0.0-beta.2

インストールは完了です。

テンプレート

yo コマンドを使ってひな形を生成します。


$ yo <generator> [arguments] [--help]

このひな形のことを Yeoman では generator といい、次の種類がデフォルトで利用できます。


Officially supported generators:
webapp angular ember backbone chromeapp chrome-extension bootstrap mocha jasmine testacular

また、後から generator(ひな形)をインストールすることもできます。


The webapp generator is bundled, while others can be installed with npm install <generator-name>

ここでは基本的な webapp を使ってみます。
コマンドを実行すると y/n でライブラリを使うかどうかを選択する場合があります。


$ mkdir men
$ cd men
$ yo webapp 

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

Out of the box I include HTML5 Boilerplate, jQuery and Modernizr.
Would you like to include Twitter Bootstrap for Sass? (Y/n) [enter]
Would you like to include RequireJS (for AMD support)? (Y/n) [enter]
   create Gruntfile.js
   create package.json
   create .gitignore
   create .gitattributes
   create .bowerrc
   create component.json
   create .jshintrc
   create .editorconfig
   create app/favicon.ico
   create app/404.html
   create app/robots.txt
   create app/.htaccess
   create app/scripts/vendor/bootstrap.js
   create app/styles/main.scss
   create app/scripts/app.js
   create app/index.html
   create app/scripts/main.js
   invoke   mocha:app
   create     test/index.html
   create     test/lib/chai.js
   create     test/lib/expect.js
   create     test/lib/mocha/mocha.css
   create     test/lib/mocha/mocha.js
   create     test/spec/test.js

I'm all done. Just run npm install && bower install to install the required dependencies.

ひな形が生成されました。

webapp では編集するファイルがappフォルダ以下に構成されています。

Yeoman(Grunt)プラグイン管理

grunt のプラグインをダウンロードします。
すでにpackege.jsonにこのテンプレートで必要なプラグインが記述されていれています。


{
  "name": "men",
  "version": "0.0.0",
  "dependencies": {},
  "devDependencies": {
    "grunt": "0.4.0rc7",
    "grunt-contrib-copy": "0.4.0rc7",
    "grunt-contrib-concat": "0.1.2rc6",
    "grunt-contrib-coffee": "0.4.0rc7",
    "grunt-contrib-uglify": "0.1.1rc6",
    "grunt-contrib-compass": "0.1.1rc8",
    "grunt-contrib-jshint": "0.1.1rc6",
    "grunt-contrib-mincss": "0.4.0rc7",
    "grunt-contrib-connect": "0.1.1rc6",
    "grunt-contrib-clean": "0.4.0rc6",
    "grunt-contrib-htmlmin": "0.1.1rc7",
    "grunt-contrib-imagemin": "0.1.1rc8",
    "grunt-contrib-livereload": "0.1.0rc8",
    "grunt-bower-hooks": "~0.2.0",
    "grunt-usemin": "~0.1.7",
    "grunt-regarde": "~0.1.1",
    "grunt-requirejs": "~0.3.1",
    "grunt-mocha": "~0.2.2",
    "grunt-open": "~0.1.0",
    "matchdep": "~0.1.1"
  },
  "engines": {
    "node": ">=0.8.0"
  }
}

次のコマンドを実行することで一括ダウンロードが出来ます。


$ npm install
npm WARN package.json men@0.0.0 No README.md file found!
...(省略)

結構な量のプラグインがnode_modulesフォルダにダウンロードされました。

最初の警告(npm WARN)はREADME.mdファイルが無いよという警告なので、作成してテキストを追加しておくと出てこなくなります。

ライブラリの管理

Yeoman では Bower というパッケージ管理ツールを使って jQueryなどのライブラリを管理しています。

すでに component.json にダウンロードするファイルが記述されています。
(バージョンやgeneratorによって記述されている内容は変わります。)


{
  "name": "men",
  "version": "0.0.0",
  "dependencies": {
    "sass-bootstrap": "~2.3.0",
    "requirejs": "~2.1.4",
    "modernizr": "~2.6.2",
    "jquery": "~1.9.1"
  },
  "devDependencies": {}
}

bower コマンドを使ってライブラリをダウンロードします。


$ bower install

bower installing jquery#1.9.1
bower installing sass-bootstrap#2.3.0
bower installing requirejs#2.1.4
bower installing modernizr#2.6.2

jsonファイルに｢"jquery": "〜1.9.1"｣と記述されていたため v1.9.1 がダウンロードされました。

と、ここでどうしても jQuery v1.9.0 を使いたくなったとしましょう。

jQuery v1.9.0 をダウンロードします。


$ bower install jquery#1.9.0 --save
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.9.0
bower copying /Users/xxxx/.bower/cache/jquery/cf68c4c4e7507c8d20fee7b5f26709d9
bower installing jquery#1.9.0

--save オプションを入れることで component.json の記述も自動的に変更されます。


{
  "name": "men",
  "version": "0.0.0",
  "dependencies": {
    "sass-bootstrap": "~2.3.0",
    "requirejs": "~2.1.4",
    "modernizr": "~2.6.2",
    "jquery": "1.9.0"
  },
  "devDependencies": {}
}

backborn.jsも使いたい場合


$ bower install backborn --seve
bower error backborn not found

There were errors, here's a summary of them:
- backborn backborn not found

backborn.js が見つかりません(わざとタイポしました)

そういった場合、search で検索できます。


$ bower search backbo
Search results:

  - backbone git://github.com/documentcloud/backbone.git
...(省略)

一番最初に出て来ました。

改めてインストールします


$ bower install backbone --save
bower cloning git://github.com/documentcloud/backbone.git
bower cached git://github.com/documentcloud/backbone.git
bower fetching backbone
bower checking out backbone#0.9.10
bower copying /Users/kamiya/.bower/cache/backbone/f184345e8f03dbe160c843ce1b7248eb
bower installing backbone#0.9.10

インストールされ、component.json も書き換えられました。


{
  "name": "men",
  "version": "0.0.0",
  "dependencies": {
    "sass-bootstrap": "~2.3.0",
    "requirejs": "~2.1.4",
    "modernizr": "~2.6.2",
    "jquery": "1.9.0",
    "backbone": "~0.9.10"
  },
  "devDependencies": {}
}

この処理をしておくことで、開発環境を移す際やgithub などにUPする際、ライブラリ本体をUPせず component.json だけを管理しておけば、次回からは bower install でライブラリ一式がダウンロード出来ます。

backbone.jsをアンインストールしてみます


$ bower uninstall backbone --save
bower uninstalling /xxx/men/app/components/backbone

出来ました。

その他の bowerコマンドについては、公式を参照してください。

サーバ起動

(2013.03.27追記) Yeomanの生成するコードでは、LiveReload用の拡張機能は不要でした。 (2013.03.28追記)やはり必要であるようです。

Gruntの記事にも書きましたが、LiveReload用の拡張機能があるので自分の使うブラウザのものをチョイスします。
How do I install and use the browser extensions?

私は chrome-extension の LiveReload をインストール
(extensionを使わない方法もある)

それでは、grunt コマンドを実行してサーバーを動かしてみましょう。


$ grunt server

...(省略)
Running "watch" task
Watching app/scripts/*.coffee
Watching test/spec/*.coffee
Watching app/styles/*.{scss,sass}
Watching app/*.html,{.tmp,app}/styles/*.css,{.tmp,app}/scripts/*.js,app/images/*.{png,jpg,jpeg}

すると、自動的にブラウザが立ち上がり、app/index.htmlの内容が表示されます。

さらにブラウザを開いたまま、index.htmlを編集、保存します。


Running "livereload" task
... Reload app/index.html ...

すると、保存した瞬間にブラウザのリロードが行われ、変更した内容が表示されます。

grunt がファイルの変更を監視し、変更があった場合にリロードをかける仕組みです。

監視している個所を抜粋すると


app/scripts/*.coffee		･･･ ①
test/spec/*.coffee			･･･ ②
app/styles/*.{scss,sass}	･･･ ③
app/*.html 					･･･ ④

① CoffeScript ファイルの変更を監視し、保存と同時にjs ファイルへコンパイル･リロードします。
② test フォルダのCoffeScriptも同様
③ app/styles/フォルダの .scss/.sass ファイルの変更を監視し、保存と同時にcss ファイルへコンパイル･リロードします。
④ appフォルダの .html ファイルの変更を監視し、保存と同時にリロードします。先程のindex.htmlはこの処理が行われました。

Grunt の watchタスクがファイルを監視しているので、作業する際にコンパイルやリロードをする手間が省けます。

サーバーの停止は Ctrl+C で行います。

テスト

テストは gruntコマンドから実行します。


grunt test

テストについてはここでは書ききれないのでまたの機会に。

ビルド

開発が終わったので、gruntコマンドを使って、サーバにUPするファイルを出力します。


grunt (build)
Running "clean:dist" (clean) task
Cleaning ".tmp"...OK

...(省略)

Done, without errors.

｢Done, without errors.｣と表示されればビルド成功で、dist フォルダが生成されていると思います。

distフォルダに Grunt によってコンパイルされたファイルや、minify(圧縮/結合) されたファイルが出力されます。

これを本番環境の実行用ファイルとしてサーバに設置すればOKです。

終わりに

Yeomanを使えば、テンプレートファイルが自動で生成され、CoffeeScript や Sass･LESSのコンパイルなどをGruntが自動で行い、開発をスピーディに行うことができます。 Grunt のプラグインやタスクを追加することでいろんな処理を行うことができるようになります。

SassやCompassなどコンパイルできる環境を先に整えなければならないので、導入するには少しハードルが高いですが一度試してはいかがでしょうか。