Gulpでウェブアプリ作る際のスケルトン #gulp

gulpでbrowserify使ってcoffee-scriptの監視とコンパイル - Qiita の続編

同じ物何度も書くの馬鹿らしいので、スケルトン作った。それなりに満足している。

特徴

CoffeeScript
Browserify
jade
sass(libsass)
bower依存を結合して出力
タスクごとに監視

gulpfile.coffee

gulp       = require 'gulp'
rename     = require 'gulp-rename'
plumber    = require 'gulp-plumber'
concat     = require 'gulp-concat'
sass       = require 'gulp-sass'
bowerFiles = require "gulp-bower-files"
source     = require 'vinyl-source-stream'
browserify = require 'browserify'

gulp.task 'js', ->
  browserify
    entries: ['./app/initialize.coffee']
    extensions: ['.coffee','.jade', '.js']
  .transform 'coffeeify'
  .transform 'jadeify'
  .bundle()
  .pipe plumber()
  .pipe source 'app.js'
  .pipe gulp.dest 'public'

gulp.task 'vendor', ->
  bowerFiles()
    .pipe plumber()
    .pipe concat('vendor.js')
     .pipe gulp.dest('./public')

gulp.task 'css', ->
  gulp
    .src './app/styles/*.scss'
    .pipe plumber()
    .pipe sass()
    .pipe gulp.dest './public'

gulp.task 'watch', ['build'], ->
  gulp.watch 'app/**/*.coffee', ['js']
  gulp.watch 'app/**/*.jade', ['js']
  gulp.watch 'app/styles/**/*.scss', ['css']
  gulp.watch 'bower_components/**/*.js', ['vendor']

gulp.task 'build', ['vendor', 'js', 'css']
gulp.task 'default', ['build']

ディレクトリ

$ tree
.
├── README.md
├── app
│   ├── application.coffee
│   ├── initialize.coffee
│   ├── styles
│   │   └── main.scss
│   └── template.jade
├── bower.json
├── gulpfile.coffee
├── package.json
└── public
    ├── app.js
    ├── vendor.js
    ├── main.css
    └── index.html

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>app</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="vendor.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <link rel="stylesheet" href="main.css" />
  </head>

  <body>
    <h1>App Skeleton</h1>
  </body>
</html>

テストがない。