読者です 読者をやめる 読者になる 読者になる

albatrosary's blog

Webアプリケーション開発に関すること

YEOMAN Advent Calendar 2日目:generator-webapp を紹介します

YEOMAN Advent Calendar

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 を使った場合の実行結果は次の通りです:

f:id:albatrosary:20141201104521p:plain

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 を使ったことない人には入門として良いかと思いますので是非触ってみてください。