Angular Gulp workflow with SASS and Traceur for ES6 -> ES5

bower.json

{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "main": "app/index.html",
  "dependencies": {
    "jquery": "jquery/jquery",
    "angular": "1.3.0-beta.5",
    "es6-shim": ">=0.8.0",
    "bootstrap-sass-official": "~3.1.1",
    "restangular": "~1.3.1",
    "lodash": "2.4.1",
    "angular-growl": "~0.4.0",
    "angular-ui-router": "~0.2.10",
    "angular-http-auth": "master",
    "angular-animate": "1.3.0-beta.5",
    "animate.css": "~3.1.0",
    "angular-sanitize": "1.3.0-beta.5",
    "angular-bootstrap": ">=0.10.0",
    "angular-translate": ">=2.1.0",
    "angular-translate-loader-partial": "~0.3.0",
    "angular-xeditable": ">=0.1.8",
    "angular-cache": "~3.0.0",
    "ng-table": "~0.3.1",
    "ng-table-export": "*",
    "css-spinners": "~1.0.1",
    "traceur-runtime": "~0.0.33",
    "requirejs": "~2.1.11",
    "requirejs-text": "~2.0.12",
    "angular-assert": "angular/assert",
    "angular-di": "angular/di.js",
    "angular-diary": "angular/diary.js",
    "bourbon": "~4.0.1"
  },
  "devDependencies": {
    "angular-mocks": "1.3.0-beta.5",
    "angular-scenario": "1.3.0-beta.5",
    "holderjs": "~2.3.2"
  },
  "overrides": {
	"angular-assert": {
	  "main": "dist/assert.js"
	},
    "angular-di": {
	  "main": "dist/index.js"
    },
    "angular-diary": {
	  "main": "dist/diary.js"
    },
    "requirejs-text": {
	  "main": "text.js"
    }
  }
}

gulpfile.js

'use strict';
// generated on 2014-04-23 using generator-gulp-webapp 0.0.8

var gulp = require('gulp');

var tPipe = require('pipe/gulp');
var traceur = require('gulp-traceur');

// load plugins
var $ = require('gulp-load-plugins')();

gulp.task('styles', function () {
    return gulp.src('app/styles/**/*.scss')
        .pipe($.rubySass({
            style: 'expanded',
		    sourcemap: true
        }))
        .pipe($.autoprefixer('last 1 version'))
        .pipe(gulp.dest('.tmp/styles'))
        .pipe($.size());
});

gulp.task('scripts', function () {
	return gulp.src('app/scripts/**/*.js')
//        .pipe($.jshint()) //TODO : enable when jshint understands ES6 annotations.
//        .pipe($.jshint.reporter($.jshintStylish))
//        .pipe($.size())
	    .pipe(traceur(tPipe.traceur({experimental: true, sourceMap: true})))
	    .pipe(gulp.dest('.tmp/compiled'));
});

gulp.task('build-di-amd', function() {
	return gulp.src('app/bower_components/angular-di/src/**/*.js')
		.pipe(traceur(tPipe.traceur()))
		.pipe(gulp.dest('app/bower_components/angular-di/dist/amd'));
});

gulp.task('build-di-cjs', function() {
	return gulp.src('app/bower_components/angular-di/src/**/*.js')
		.pipe(traceur(tPipe.traceur({modules: 'commonjs'})))
		.pipe(gulp.dest('app/bower_components/angular-di/dist/cjs'));
});

gulp.task('build-diary-amd', function() {
	return gulp.src('app/bower_components/angular-diary/src/**/*.js')
		.pipe(traceur(tPipe.traceur()))
		.pipe(gulp.dest('app/bower_components/angular-diary/dist/amd'));
});

gulp.task('build-assert-amd', function() {
	return gulp.src('app/bower_components/angular-assert/src/**/*.js')
		.pipe(traceur(tPipe.traceur()))
		.pipe(gulp.dest('app/bower_components/angular-assert/dist/amd'));
});

gulp.task('html', ['styles', 'scripts'], function () {
    var jsFilter = $.filter('**/*.js');
    var cssFilter = $.filter('**/*.css');

    return gulp.src('app/*.html')
        .pipe($.useref.assets())
        .pipe(jsFilter)
        .pipe($.uglify())
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe($.csso())
        .pipe(cssFilter.restore())
        .pipe($.useref.restore())
        .pipe($.useref())
        .pipe(gulp.dest('dist'))
        .pipe($.size());
});

gulp.task('images', function () {
    return gulp.src('app/images/**/*')
        .pipe($.cache($.imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest('dist/images'))
        .pipe($.size());
});

gulp.task('fonts', function () {
    return $.bowerFiles()
        .pipe($.filter('**/*.{eot,svg,ttf,woff}'))
        .pipe($.flatten())
        .pipe(gulp.dest('dist/fonts'))
        .pipe($.size());
});

gulp.task('clean', function () {
    return gulp.src(['.tmp', 'dist'], { read: false }).pipe($.clean());
});

gulp.task('build', ['html', 'images', 'fonts']);

gulp.task('build-deps', ['build-di-amd', 'build-diary-amd', 'build-assert-amd']);

gulp.task('default', ['clean'], function () {
    gulp.start('build');
});

gulp.task('connect', function () {
    var connect = require('connect');
    var app = connect()
        .use(require('connect-livereload')({ port: 35729 }))
        .use(connect.static('app'))
        .use(connect.static('.tmp'))
        .use(connect.directory('app'));

    require('http').createServer(app)
        .listen(9000)
        .on('listening', function () {
            console.log('Started connect web server on http://localhost:9000');
        });
});

gulp.task('serve', ['connect'], function () {
    require('opn')('http://localhost:9000');
});

// inject bower components
gulp.task('wiredep', function () {
    var wiredep = require('wiredep').stream;

    gulp.src('app/styles/*.scss')
        .pipe(wiredep({
            directory: 'app/bower_components'
        }))
        .pipe(gulp.dest('app/styles'));

    gulp.src('app/*.html')
        .pipe(wiredep({
            directory: 'app/bower_components',
            exclude: ['bootstrap-sass-official']
        }))
        .pipe(gulp.dest('app'));
});

gulp.task('watch', ['connect', 'serve'], function () {
    var server = $.livereload();

	function changed (file) {
		console.log('[changed] '+file.path);
	} // changed

    // watch for changes

    gulp.watch([
        'app/*.html',
        '.tmp/styles/**/*.css',
        'app/scripts/**/*.js',
        'app/images/**/*'
    ]).on('change', function (file) {
        server.changed(file.path);
    });

    gulp.watch('app/styles/**/*.scss', ['styles']).on('change', changed);
    gulp.watch('app/scripts/**/*.js', ['scripts']).on('change', changed);
    gulp.watch('app/images/**/*', ['images']);
    gulp.watch('bower.json', ['wiredep']);
});

package.json

{
	"name": "MyApp",
	"version": "0.0.1",
	"dependencies": {},
	"devDependencies": {
		"connect": "^2.14.4",
		"connect-livereload": "^0.4.0",
		"gulp": "~3.6.0",
		"gulp-autoprefixer": "^0.0.6",
		"gulp-bower-files": "^0.2.1",
		"gulp-cache": "^0.1.1",
		"gulp-clean": "^0.2.4",
		"gulp-csso": "^0.2.6",
		"gulp-filter": "^0.4.1",
		"gulp-flatten": "^0.0.2",
		"gulp-imagemin": "^0.2.0",
		"gulp-jshint": "^1.5.3",
		"gulp-livereload": "^1.2.0",
		"gulp-load-plugins": "^0.5.0",
		"gulp-ruby-sass": "^0.4.3",
		"gulp-size": "^0.3.0",
		"gulp-uglify": "^0.2.1",
		"gulp-useref": "^0.3.1",
		"jshint-stylish": "^0.1.5",
		"opn": "^0.1.1",
		"wiredep": "^1.4.3",

		"traceur": "^0.0.33",
		"gulp-traceur": "vojtajina/gulp-traceur#traceur-as-peer",
		"pipe": "angular/pipe#remove-transitive-deps"
	},
	"engines": {
		"node": ">=0.10.0"
	}
}