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と同じです:
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 に触れてみるもの良いかと思います。