Webアプリケーションを作る入門的なジェネレータ generator-webapp を紹介します。このエントリーは「YEOMAN Advent Calendar 2014」12月2日の記事です。
YEOMAN Advent Calendar 2014 - Adventar
ジェネレータ generator-webapp は bootstrap 、Sass を利用するためのものです。JavaScriptフレームワークを使っていませんので必要に応じて bower を利用しモジュールを追加します。何もありませんので、ここから自分達の好みのジェネレータに作り変えるのもひとつの手段だと思います。
インストールから実行まで
インストール
いつものようにジェネレータをインストールしてプロジェクトディレクトリを作りyoとgruntの実行です。
$ npm install -g generator-webapp $ mkdir webapp && cd $_ $ yo webapp $ grunt serve
yo webappの時にbootstrapを利用するか等聞かれますので利用する場合はスペースキーを押し選択します：
? What more would you like? (Press <space> to select) ❯◉ Bootstrap ◯ Sass ◯ Modernizr
実行
Bootstrap と Sass を使った場合の実行結果は次の通りです：
bower でインストールされているモジュールは必要最低限のものです。
bower_components |- bootstrap-sass-official |- jquery
それでも grunt タスクは色々あります。特に開発リソール（.html/.js/.sassなど）を監視するwatch、JavaScriptテスティングフレームワークのmocha、ミニファイでは svgminなどなどWebアプリケーションを開発するための道具がひと通り揃ってます：
node_modules |- apache-server-configs |- grunt |- grunt-autoprefixer |- grunt-concurrent |- grunt-contrib-clean |- grunt-contrib-concat |- grunt-contrib-connect |- grunt-contrib-copy |- grunt-contrib-cssmin |- grunt-contrib-htmlmin |- grunt-contrib-imagemin |- grunt-contrib-jshint |- grunt-contrib-sass |- grunt-contrib-uglify |- grunt-contrib-watch |- grunt-mocha |- grunt-newer |- grunt-rev |- grunt-svgmin |- grunt-usemin |- grunt-wiredep |- jshint-stylish |- load-grunt-tasks |- time-grunt
最後に
これ残念ながらレスポンシブでないのでここからコツコツレスポンシブに変えていく必要があります。Bootstrap を使ったことない人には入門として良いかと思いますので是非触ってみてください。
