Application template: Browserify, Backbone, Marionette

develop.sh

#!/bin/sh

if [ "${1}" == '-p' ]; then
  export NODE_ENV=production
fi

# Clean JS & CSS in static folder
rm -f static/*

# Build assets & start application
if [ "${NODE_ENV}" == 'production' ]; then
  gulp --require coffee-script/register
  node start.js &
else
  nodemon -e iced,json                  &
  gulp --require coffee-script/register &
fi

wait

gulpfile.coffee

# Generics
_          = require 'underscore'
fs         = require 'fs'
path       = require 'path'
gulp       = require 'gulp'
streamify  = require 'gulp-streamify'
gutil      = require 'gulp-util'
tap        = require 'gulp-tap'
livereload = require 'gulp-livereload'

# Scripts
source     = require 'vinyl-source-stream'
browserify = require 'browserify'
watchify   = require 'watchify'
collapse   = require 'bundle-collapser/plugin'
uglify     = require 'gulp-uglify'

# Styles
stylus     = require 'gulp-stylus'
prefixer   = require 'gulp-autoprefixer'
csso       = require 'gulp-csso'

production = process.env.NODE_ENV is 'production'

info = (file) -> gutil.log "Processed #{path.basename file.path}"

styles = ->
  process = ->
    st = gulp.src 'assets/styles/*.styl'
      .pipe stylus errors: yes, 'include css': yes, paths: ['./node_modules']
      .pipe prefixer()
    st.pipe csso() if production
    st.pipe gulp.dest './static'
      .pipe tap info
  gulp.watch 'assets/styles/**/*', process unless production
  process()

scripts = ->
  scripts = fs.readdirSync './assets/scripts'
    .filter (item) -> path.extname(item) is '.coffee'
    .map    (item) -> path.basename item, '.coffee'
  for script in scripts
    do (script) ->
      options =
        entries:      "./assets/scripts/#{script}.coffee"
        plugin:       collapse
        debug:        not production
        cache:        {}
        packageCache: {}
      bundler = browserify options
      bundler = watchify bundler unless production
      process = ->
        st = bundler.bundle()
          .on 'error', gutil.log
          .pipe source "#{script}.js"
        st.pipe streamify uglify() if production
        st.pipe gulp.dest './static'
          .pipe tap info
      bundler.on 'update', process unless production
      process()

gulp.task 'default', ->
  styles()
  scripts()

  unless production
    _.delay ->
        livereload.listen()
        livereload.changed '/'
        gulp.watch 'static/**/*', (e) -> livereload.changed path.relative 'static', e.path
        gulp.watch 'views/**/*',  (e) -> livereload.changed '/'
      , 3000

package.json

{
  "name": "backbone-marionette-template",
  "version": "1.0.0",
  "description": "Backbone & Marionette Template",
  "main": "start.js",
  "author": "Ionut-Cristian Florescu <[email protected]>",
  "license": "ISC",
  "browser": {
    "underscore": "./node_modules/underscore/underscore.js",
    "backbone": "./node_modules/backbone/backbone.js",
    "backbone.marionette": "./node_modules/backbone.marionette/lib/backbone.marionette.js",
    "backbone-relational": "./node_modules/backbone-relational/backbone-relational.js"
  },
  "browserify-shim": {
    "jquery": "global:$",
    "underscore": {
      "exports": "_"
    },
    "backbone": {
      "exports": "Backbone"
    },
    "backbone.marionette": {
      "exports": "Backbone.Marionette",
      "depends": [
        "underscore",
        "backbone"
      ]
    },
    "backbone-relational": {
      "exports": "Backbone.RelationalModel",
      "depends": [
        "underscore",
        "backbone"
      ]
    }
  },
  "browserify": {
    "transform": [
      "coffeeify",
      "jadeify",
      "browserify-shim"
    ]
  },
  "devDependencies": {
    "backbone": "^1.1.2",
    "backbone-relational": "^0.9.0",
    "backbone.marionette": "^2.3.2",
    "browserify": "^8.1.3",
    "browserify-shim": "^3.8.2",
    "bundle-collapser": "^1.1.1",
    "coffee-script": "^1.9.0",
    "coffeeify": "^1.0.0",
    "gulp": "^3.8.10",
    "gulp-autoprefixer": "^2.1.0",
    "gulp-csso": "^1.0.0",
    "gulp-livereload": "^3.7.0",
    "gulp-streamify": "^0.0.5",
    "gulp-stylus": "^2.0.0",
    "gulp-tap": "^0.1.3",
    "gulp-uglify": "^1.1.0",
    "gulp-util": "^3.0.3",
    "jadeify": "^4.0.0",
    "jeet": "^6.1.2",
    "rupture": "^0.6.1",
    "vinyl-source-stream": "^1.0.0",
    "watchify": "^2.3.0"
  },
  "dependencies": {
    "body-parser": "^1.11.0",
    "compression": "^1.4.0",
    "express": "^4.11.2",
    "iced-coffee-script": "^1.8.0-c",
    "jade": "^1.9.1",
    "morgan": "^1.5.1",
    "st": "^0.5.2",
    "underscore": "^1.7.0",
    "underscore.string": "^3.0.2"
  }
}