概要 本記事では、Node.jsでconnect-assetsを使ってアセットをビルドする方法を説明し、またこの仕組みの上でbourbon、neatおよびbittersを使ったWebページを提供する方法を一例として説明する。connect-assetsはRailsのSprocketsのようなものだ。 なお、本記事によって作成される最終的な成果物の例は、https://github.com/mecab/blog-20151228-connect-assets に公開されている。 背景 最近はフロントエンドのJSをずっと書いているものの、CSSもJSも生のそれらをベタ書きして静的に垂れ流しているだけで、ちゃんとビルドしたりminifyしたりということをしていなかった。これはさすがにフロントエンド力が足りなさすぎるのでは...と不安になったのでようやくこの辺りの環境を作ってみることにした。 主な目標は1)JSとCSSといったアセットをビルドすること。特にCSSはSASS/SCSSからビルドすること。 2)開発中は元のアセットに変更を加えたら即時に反映されるようにする一方、本番運用時は事前にすべてのアセットをビルドして、静的に提供できる状況を作ること。である。 上記の環境を試すにあたって、適当にSCSSを書いても良いのだが、最近bourbon、neat、bittersというCSSフレームワークがいい感じらしいという記事を見て、またこれらはSCSSで書かれているので、ついでにこれらを使ったSCSSをビルドしてみることにした。 今回はGruntやGulpで変更を監視してビルドするスクリプトを書く方法は取らなかった。ちょっとしたプロジェクトには大掛かりすぎるなと思ったこと（一度スクリプトを書いてしまえば使いまわせるのだろうけれど、それはそれでコピペしまくることになって、後から変更するときによくわからないことになりそうだし）と、ビルドツールが乱立していて、