albatrosary's blog

UI/UXとエンタープライズシステム

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

Webアプリケーションを作る入門的なジェネレータ generator-gulp-webapp を紹介します。このエントリーは「YEOMAN Advent Calendar 2014」12月7日の記事です。

YEOMAN Advent Calendar 2014 - Adventar

ジェネレータ generator-webapp を以前ご紹介しましたがその gulp 版です。YEOMANというと

  • yo
  • bower
  • grunt

から成り立っていますという説明をよくするのですが、最近では grunt の代わりに gulp を使っているジェネレータも多く存在しています。

インストールから実行まで

インストール

いつものようにジェネレータをインストールしてプロジェクトディレクトリを作りyoとgruntの実行です。

$ npm install -g generator-gulp-webapp
$ mkdir gulp-webapp && cd $_
$ yo gulp-webapp
$ gulp serve

yo webappの時にbootstrapを利用するか等聞かれますので利用する場合はスペースキーを押し選択します:

? What more would you like? (Press <space> to select)
❯◉ Bootstrap
 ◯ Sass
 ◯ Modernizr

実行

実行結果は次の通りです。当たり前ですがwebappと同じです:

f:id:albatrosary:20141207122351p:plain

node_modules
 |- apache-server-configs
 |- connect
 |- connect-livereload
 |- del
 |- gulp
 |- gulp-autoprefixer
 |- gulp-cache
 |- gulp-csso
 |- gulp-filter
 |- gulp-flatten
 |- gulp-if
 |- gulp-imagemin
 |- gulp-jshint
 |- gulp-livereload
 |- gulp-load-plugins
 |- gulp-minify-html
 |- gulp-plumber
 |- gulp-replace
 |- gulp-ruby-sass
 |- gulp-size
 |- gulp-uglify
 |- gulp-useref
 |- jshint-stylish
 |- lazypipe
 |- main-bower-files
 |- opn
 |- serve-index
 |- serve-static
 |- wiredep

最後に

YEOMANには gulp を利用したジェネレータが多くあります。まだ gulp を使ったこと無い人でもYEOMANジェネレータを使って gulp に触れてみるもの良いかと思います。