Gulp + Browserify + Angular (CoffeeScript Edition)

Ok, der Standardfall. Ein Projekt mit gulp, browserify, angular und coffee-script. Da das Setup nicht ganz so trivial ist, ein paar Worte dazu.

Das Problem ist, dass Angular nicht als CommonsJS Modul verpackt wird. Es gibt zwar Wege mit napa angular für browserify zur Verfügung zu stellen, die Lösung erschien mir aber aber unpraktikabel.

Bower dependencies

Installiere Angular und andere Frontend Fremdbibliotheken mit bower:

bower install angular  
bower install angular-cookie  
bower install angular-animate  

package.json

Als nächstes werden die folgenden node.js Module gebraucht:

npm install --save coffee-script  
npm install --save-dev browserify debowerify gulp gulp-util  

Gulpfile.coffee

Anschließend wird der js-Task für gulp definiert:

require "coffee-script/register"

gulp = require("gulp")  
gutil = require('gulp-util')  
browserify = require("browserify")  
debowerify = require("debowerify")

# [...]

gulp.task "js", ['test_unit'], ->  
  browserify("./src/js/base.js", debug: true)
    .transform debowerify
    .bundle()
    .pipe source("bundle.js")
    .pipe gulp.dest("dist/js")
    .on "error", (err) ->
      gutil.log gutil.colors.red(err)

src/js/base.js

In der base.js können nun die mit bower installierten Pakete per require eingebundern werden:

require('angular');  
require('angular-cookie');  
require('angular-animate');

angular.module('myApp', []);