gulpfile.coffee

gulp      = require('gulp')
plumber   = require('gulp-plumber')
util      = require('gulp-util')
sass      = require('gulp-ruby-sass')
rimraf    = require('gulp-rimraf')
uglify    = require('gulp-uglify')
minifyCSS = require('gulp-minify-css')
streamify = require('gulp-streamify')
size      = require('gulp-size')
tap       = require('gulp-tap')

browserify = require('browserify')
ts         = require('tsify')
source     = require('vinyl-source-stream')
espowerify = require('espowerify')
mold       = require('mold-source-map')

path        = require('path')
browserSync = require('browser-sync')
pkg         = require(__dirname + '/package.json')

minify = false
environment = process.env['ENV'] || 'development'

if environment == 'production'
  minify = true


### browserSync ###########################################
gulp.task 'browser-sync', ->
  browserSync
    proxy: "http://localhost:3000"

gulp.task 'bs-reload', ->
  browserSync.reload()

gulp.task 'clean', ->
  gulp.src('public/assets')
    .pipe(rimraf())


### browserify ###########################################
getBundler = (filepath, opts = {}) ->
  extensions = opts.extensions
  plugins    = opts.plugins ? []
  transforms = opts.transforms ? []

  browserifyOpts =
    entries: [filepath]
    debug: true
  browserifyOpts.extensions = extensions if extensions?

  bundler = browserify(browserifyOpts)

  for p in plugins
    if typeof p == "object"
      for k, o of p
        bundler = bundler.plugin(k, o).on('error', util.log)
    else
      bundler = bundler.plugin(p).on('error', util.log)

  for t in transforms
    if typeof t == "object"
      for k, o of t
        bundler = bundler.transform(o, require(k))
    else
      bundler = bundler.transform(require(t))
  bundler

gulp.task 'browserify', ->
  entries = pkg.browserify.entryScripts
  gulp.src(entries)
    .pipe(tap (file) ->
      extname = path.extname(file.path)
      output = path.basename(file.path, extname) + '.js'

      bundler = if extname == ".ts"
        getBundler(file.path, {
          extensions: [".ts"]
          plugins: [{"tsify": {noImplicitAny: true}}]
        }).bundle().pipe(source(output))
      else
        getBundler(file.path, {
          extensions: [".coffee"]
          transforms: ["coffeeify"]
        }).bundle().on('error', util.log).pipe(source(output))

      stream = if minify
        bundler.pipe(streamify(uglify())).pipe(streamify(size()))
      else
        bundler

      return stream.pipe(gulp.dest("public/assets"))
    )

gulp.task 'browserify-test', ->
  entries = ['./spec/javascripts/**/*_spec.{js,coffee,ts}']
  gulp.src(entries)
    .pipe(tap (file) ->
      extname = path.extname(file.path)
      output = path.basename(file.path, extname) + '.js'

      bundler = if extname == ".ts"
        getBundler(file.path, {
          extensions: [".ts"]
          plugins: [{"tsify": {noImplicitAny: true}}]
          transforms: ["espowerify"]
        }).bundle()
          .pipe(mold.transformSourcesRelativeTo(__dirname))
          .pipe(source(output))
      else
        getBundler(file.path, {
          extensions: [".coffee"]
          transforms: ["coffeeify", "espowerify"]
        }).bundle().on('error', util.log)
          .pipe(mold.transformSourcesRelativeTo(__dirname))
          .pipe(source(output))

      bundler.pipe(gulp.dest("spec/.powered-javascripts"))
    )


### sass ###########################################
gulp.task 'sass', ->
  css = gulp.src(['app/assets/stylesheets/**/*.scss', 'app/assets/stylesheets/**/*.sass'])
    .pipe(gulp.dest("public/assets/sass"))
    .pipe(plumber())
    .pipe(sass(
      sourcemap: true
      sourcemapPath: "./sass"
      compass: true
      bundleExec: true
      loadPath: [
        "./bower_components"
      ]
    ))

  stream = if minify
    css.pipe(minifyCSS()).pipe(size())
  else
    css

  stream.pipe(gulp.dest("public/assets"))


### watch ###########################################
gulp.task 'watch', ['browser-sync'], ->
  gulp.watch('app/assets/javascripts/**/*.{js,coffee,ts}', ['browserify'])
  gulp.watch('app/assets/stylesheets/**/*.{scss,sass}', ['sass'])
  gulp.watch([
    'public/assets/**/*.js',
    'public/assets/**/*.css',
  ], ['bs-reload'])

gulp.task 'default', ['browserify', 'sass']

package.json

{
  "name": "sample",
  "version": "0.0.0",
  "description": "== README",
  "main": "index.js",
  "dependencies": {
  },
  "devDependencies": {
    "bower": "^1.3.9",
    "browser-sync": "^1.3.6",
    "browserify": "^5.11.1",
    "browserify-shim": "^3.7.0",
    "coffee-script": "^1.8.0",
    "coffeeify": "^0.7.0",
    "debowerify": "^0.8.1",
    "espowerify": "^0.9.1",
    "gulp": "^3.8.8",
    "gulp-concat": "^2.4.0",
    "gulp-jshint": "^1.8.4",
    "gulp-minify-css": "^0.3.8",
    "gulp-plumber": "^0.6.5"
    "gulp-rimraf": "^0.1.0",
    "gulp-ruby-sass": "^0.7.1",
    "gulp-size": "^1.1.0",
    "gulp-streamify": "0.0.5",
    "gulp-tap": "^0.1.1",
    "gulp-uglify": "^1.0.1",
    "gulp-util": "^3.0.1",
    "mocha": "^1.21.4",
    "mold-source-map": "^0.3.0",
    "power-assert": "^0.9.0",
    "tsify": "^0.4.0",
    "type-name": "^1.0.0",
    "typescript": "^1.0.1",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "browserify": {
    "transform": [
      "debowerify"
    ],
    "entryScripts": [
      "./app/assets/javascripts/bundle.ts",
      "./app/assets/javascripts/users.js.coffee",
      "./app/assets/javascripts/hello.ts"
    ]
  },
  "author": "",
  "license": "ISC"
}

testem.json

{
  "framework": "mocha",
  "before_tests": "gulp browserify-test",
  "on_exit": "rm -rf ./spec/.powered-javascripts/",
  "src_files": [
    "./app/assets/javascripts/*.{js,coffee,ts}",
    "./spec/javascripts/*_spec.{js,ts,coffee}"
  ],
  "serve_files": [
    "./spec/.powered-javascripts/**/*.js"
  ],
  "launch_in_dev": [
    "PhantomJS"
  ]
}