gulp tasks

gulp-browserify-watchify.js

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var xtend = require('xtend');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require('gulp-util');

gulp.task('jshint', function () {
    return gulp.src('app/scripts/**/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter(require('jshint-stylish')));
});

var watching = false;
gulp.task('enable-watch-mode', function () { watching = true });

gulp.task('scripts', function () {
    var opts = {
        entries: './app/scripts/main.js',
        debug: (gutil.env.type === 'development')
    }
    if (watching) {
        opts = xtend(opts, watchify.args);
    }
    var bundler = browserify(opts);
    if (watching) {
        bundler = watchify(bundler);
    }
    // optionally transform
    // bundler.transform('transformer');

    bundler.on('update', function (ids) {
        gutil.log('File(s) changed: ' + gutil.colors.cyan(ids));
        gutil.log('Rebundling...');
        rebundle();
    });

    function rebundle() {
        return bundler
            .bundle()
            .on('error', function (e) {
                gutil.log(gutil.colors.red('Browserify ' + e));
            })
            .pipe(source('main.js'))
            .pipe(buffer())
			.pipe(sourcemaps.init({loadMaps: true}))
			.pipe(sourcemaps.write('./'))
            .pipe(gulp.dest('.tmp/scripts'));
    }
    return rebundle();
});

gulp.task('watch', ['enable-watch-mode', 'scripts']);

gulp-scss.js

var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var prefix = require('gulp-autoprefixer');
var csso = require('gulp-csso');
    
var path = {
    scss: {
        src: './app/scss/',
        dest: './.tmp/css'
    }
};

gulp.task('scss', function () {
    return gulp.src(path.scss.src + '**/*.scss')
        .pipe(plumber({
            errorHandler: function (err) {
                gutil.log(gutil.colors.red('Styles error:\n' + err.message));
                // emit `end` event so the stream can resume https://github.com/dlmanning/gulp-sass/issues/101
                if (this.emit) {
                    this.emit('end');
                }
            }
        }))
        .pipe(sass())
        .pipe(prefix())
        .pipe(csso())
        .pipe(gulp.dest(path.scss.dest));
});

gulp.task('watch', function () {
    gulp.watch(path.scss.src + '**/*.scss', ['scss']);
});

gulp-template.js

var gulp = require('gulp');
var handlebars = require('gulp-handlebars');
var defineModule= require('gulp-define-module');
// note: handlebars node module is required to use these templates, i.e. do this: `npm install handlebars --save`
// gulp-handlebars currently does not work with [email protected] https://github.com/lazd/gulp-handlebars/issues/35

gulp.task('templates', function () {
    return gulp.src('app/scripts/**/*.hbs')
      .pipe(handlebars())
      .pipe(defineModule('node'))
      .pipe(gulp.dest('.tmp/templates'));
});

// the task above outputs templates to `.tmp/templates` in the same directory hierarchy that is found in `app/templates`
// in order to use it with browserify, add the following code to browserify bundle
var remapify = require('remapify');
bundler.plugin(remapify, [{
  src: './**/*.js',
  expose: 'templates',
  cwd: '.tmp/templates'
}]);

// usage
// assume there's a file caleld `main.hbs` in `app/templates` dir.
// var mainTemplate = require('templates/main');