モックhtmlはyeoman+gulp-webappで。

2013年の8月に、「モックhtmlはJade+LESS+CoffeeScript+Grunt.jsで。」という記事をこのブログに書いた。あれから約1年半。Webアプリケーションの開発の仕方やツールなども変わってきて、当時やろうとしていたことが今では随分とスマートにできるようになったので、あらためてモックhtmlをさくさく作る環境について纏めておきます。

Yeoman

Yeomanを使う。Yeomanは「モダンなWebアプリのscaffoldingツール」。いろいろなWebアプリケーションの構成、例えばAngujarJS+Express.js+MongoDBとか、backborn.js+express.jsとか、に対するアプリケーションのscaffoldを作るツール。で、いろいろな構成に対するgeneratorが提供されていて、必要なgeneratorをインストールして使う、という寸法。

gulp-webapp

gulp-webappは、yeomanが提供する静的サイトのためのgenerator。モックHTMLを作るなら、ズバリこいつがよさげ。gulpのwatchタスクが動くから、コード書きながら結果を見ながらコード直しながら結果を見ながら、っていうのが簡単にできちゃう。

Jadeとless、あるいは。

gulp-webpp、ちょっとまって。Jadeとかlessを使いたい場合はどうすんのさ？って思ったんだけど、よくよくドキュメントを見ると、Recipesってのがあって、ここに色々書いてあった。Jadeもlessも使えるわ。他にもいろいろあるから読んでみたらいい。

終わりに

YeomanはGrunt+Bowerを全面に押し出してるはずなのに、gulp-webappって…と思わずにいられませんでした。とはいえ、便利ですね。