YeomanでCoffeeScript & LESS構成

YeomanはデフォルトではCompass, scss/sassを使う設定になっているので、CoffeeScript & LESS派な私はこんな感じでGruntfile.js/.coffeeとpackage.jsonを設定していますよ、というメモ。

これを定義して npm install でLESSコンパイルタスクとCoffeeScriptのLintタスクを事前にインストールしときます。
・grunt-contrib-less
・grunt-coffeelint



前回の投稿で紹介したCacoo Finderが上記のような構成になってます。
Cacoo FinderをCoffeeScript, LESS, Knockout, Yeomanで再構築

Cacoo FinderをCoffeeScript, LESS, Knockout, Yeomanで再構築

ふと、以前のMashup Awards7で作ったChrome拡張 Cacoo Finderのソースコードを公開していなかったことに気付いたので、どうせならとCoffeeScript(JavaScript), LESS(CSS), Knockout.js(MVVM), Yeoman(Grunt)で再構築しました。

ソースコード - GitHub
https://github.com/shoito/cacoo-finder-chrome-extension

Chrome Web Store
https://chrome.google.com/webstore/detail/pcfedgjdgkacloiabdlghochjfmnalck

Cacoo Finder - ブラウザ拡張 以前の紹介ブログ記事
http://blog.air-life.net/2011/11/cacoo-finder.html

yeoman --skip-updaterフラグが消えてた

$ yeoman server

を実行するとYeomanの更新チェックが走り、新しいバージョンがあれば自動更新されます。こんな感じで。

$ yeoman server

Starting update check…

Update available: 0.9.6 (current: 0.9.5)

Updating yeoman

npm http GET https://registry.npmjs.org/yeoman

npm http 200 https://registry.npmjs.org/yeoman

npm http GET https://registry.npmjs.org/yeoman/-/yeoman-0.9.6.tgz

npm http 200 https://registry.npmjs.org/yeoman/-/yeoman-0.9.6.tgz

npm http GET https://registry.npmjs.org/yeoman/0.9.6

npm http 200 https://registry.npmjs.org/yeoman/0.9.6

npm http GET https://registry.npmjs.org/yeoman/-/yeoman-0.9.6.tgz

npm http 200 https://registry.npmjs.org/yeoman/-/yeoman-0.9.6.tgz

(略)

私はパッチを当てて使ってたのでこの自動更新はされたくなくて、

$ yeoman server --skip-updater

というように自動更新をオフにしてました。

そのフラグがv0.9.6で消えてたというお話。

アンドキュメントなフラグでしたし、updater.js周りで変更があったんかな。

https://github.com/yeoman/yeoman/commit/8b75970d856000c2ce5f3e57b384cf7b80ba6c75

Yeoman ServerでURL Rewrite

フロントエンド開発のワークフローをサポートしてくれるコマンドラインツールのYeoman(ヨーマン)おじさん、Jenkinsおじさんとは違う形で活躍しています。

チームみんなのJenkinsおじさんに対して、私だけのYeomanおじさんのような感じで。

http://yeoman.io/ 

https://github.com/yeoman/yeoman

Gruntfile.js/.coffeeにワークフローを定義すれば多彩な才能を発揮してくれるんですが、ウチでは、CoffeeScript/LESSのコンパイル、.html/.js/.cssのconcat/minify、mochaテスト実行、ローカルサーバ、LiveReloadによるファイル編集時の自動リロード...等々でお世話になってます。

で、そんなYeomanおじさんは

$ yeoman server

とコマンド入力すると http://localhost:3501でローカルサーバ起動してくれるのですが、このローカルサーバでは、mod_rewrite相当の手段が見当たりませんでした(ある？)。

HTML5 Hisotry APIを使ったSingle Page Applicationで、URLを更新した後のリロードすると404になって困ってました。

YeomanのGithub Issueを見ると同じような要望は度々上がっているようで、マージされてませんが実装されてる方はいるようです。

今のところ私は以下を参考にv0.9.6の yeoman/tasks/server.js へパッチを当て、Gruntfile.jsにrewriteルールを記載した形で対応しています。開発用のローカルサーバなので。

Yeoman Server and Backbone/BBB pushState
https://github.com/yeoman/yeoman/issues/468

参考まで。