gulpでbrowserify使ってcoffee-scriptの監視とコンパイル - Qiita の続編
同じ物何度も書くの馬鹿らしいので、スケルトン作った。それなりに満足している。
mizchi-sandbox/gulp-webapp-skeleton
特徴
- 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>
テストがない。