grunt-useminって便利だな−

https://github.com/yeoman/grunt-usemin

grunt-useminはgruntのtaskで、

<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/controllers/thing-controller.js"></script>
<script src="js/models/thing-model.js"></script>
<script src="js/views/thing-view.js"></script>
<!-- endbuild -->

↑のようなコメントをHTML内に見つけると、勝手にconcatとuglifyしてapp.jsを生成し、HTMLを書き換えて出力してくれる。

cssも同様にコメントでconcatとcssminが可能で、sass等を使っている場合でも出力先を指定しておけば勝手にやってくれる

<!-- .tmp以下にコンパイルしたcssを出力している場合 -->
<!-- build:css(.tmp) /styles/main.css -->
<link rel="stylesheet" href="/styles/gumby.css">
<link rel="stylesheet" href="/styles/main.css">
<!-- endbuild -->

自分はyeoman大好きでgrunt-useminしか使ったこと無いのだけれど、それ以外の人って何を使っているんだろうか？ これを使うと開発時のビルド手順がかなり減ってとても楽だし、その上、scriptタグを出し分けるために開発用と本番用でHTMLを分けることをしなくていい。

yeomanを使わない人でもgenerator-webappが吐くGruntfile.jsやビルド手順、ディレクトリ構成など、とても参考になるのでぜひ見てみましょうー