Not compatible with Watchify

[rcanacci]

After a change, the following output is produced

module.exports=function(obj){{var t,p="";Array.prototype.join}with(obj||{})p+=module.exports=function(obj){{var t,p="";Array.prototype.join}with(obj||{})p+=

It gets duplicated every time the watch fires

[maxparm]

@rcanacci I'll have a look, can you use something like grunt-watch in the meantime?

[maxparm]

Might be due to the version of browserify used on node-underscorify.

[maxparm]

@rcanacci I update the version of browserify and made some tests, seems to work fine. Let me know if you have any issues.

[bgaillard]

Hi, we encounter the same problem, the first time our task is run everything its ok, but each time we modify an underscore template file we get the following output instead of well formed HTML.

module.exports = function(obj){ var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');}; with(obj||{}){ __p+='module.exports = function(obj){\nvar __t,__p=\'\',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,\'\');};\nwith(obj||{}){\n__p+=\'\\n
module.exports = function(obj){ var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');}; with(obj||{}){ __p+='module.exports = function(obj){\nvar __t,__p=\'\',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,\'\');};\nwith(obj||{}){\n__p+=\'
...
...

Here is our gulp task, is it ok ?

var browserify = require('browserify'),
    buffer = require('vinyl-buffer');
    fs = require('fs'),
    gulp = require('gulp'),
    gutil = require('gulp-util'),
    minimist = require('minimist'),
    source = require('vinyl-source-stream'), 
    underscorify = require('node-underscorify'), 
    watchify = require('watchify');

//Read the 'package.json' file
var pkg = JSON.parse(fs.readFileSync('./package.json'));

// Read command line options
var options = minimist(process.argv.slice(2));

// Configure aliasify with command line options
//@see http://tridnguyen.com/articles/aliasify-config
pkg.aliasify.aliases.config = './src/js/config/' + (options.env ? options.env : 'development');

var aliasify = require('aliasify').configure(pkg.aliasify);

var b = browserify(
    {
        entries: ['src/js/app.js'],
        debug: true
    }
);

var w = watchify(b);

function bundle() {
    return w.transform(
                 underscorify.transform(
                     {
                         extensions: ['html', 'tpl']
                     }
                 )
             )
            .transform(aliasify)
            .bundle()
            .on('error', gutil.log.bind(gutil, 'Browserify Error'))
            .pipe(source('app.js'))
            .pipe(gulp.dest('dist/www/js'));
}

gulp.task('watchify', bundle);

w.on('update', bundle);
w.on('log', gutil.log);

We tried it with browserify 10.x.y and 11.x.y and encountered the same problems.

Temporarily here are gulp tasks to do the same job using watch (remove aliasify if you do not need it).

browserify task

var browserify = require('browserify'),
    fs = require('fs'),
    gulp = require('gulp'),
    gutil = require('gulp-util'),
    minimist = require('minimist'),
    source = require('vinyl-source-stream'), 
    underscorify = require('node-underscorify');

//Read the 'package.json' file
var pkg = JSON.parse(fs.readFileSync('./package.json'));

// Read command line options
var options = minimist(process.argv.slice(2));

// Configure aliasify with command line options
//@see http://tridnguyen.com/articles/aliasify-config
pkg.aliasify.aliases.config = './src/js/config/' + (options.env ? options.env : 'development');

var aliasify = require('aliasify').configure(pkg.aliasify);

/**
 * Task used to create the client Javascript file using Browserify. The produced file will be stored in 
 * 'dist/www/js/app.js'.
 */
gulp.task(
    'browserify', 
    function() {

        var tplTransform = underscorify.transform({
            extensions: ['tpl']
        });

        var b = browserify(
            {
                entries: ['src/js/app.js'],
                debug: true
            }
        );

        return b.transform(tplTransform)
                .transform(aliasify)
                .bundle()
                // Log errors if they happen
                .on('error', gutil.log.bind(gutil, 'Browserify Error'))
                .pipe(source('app.js'))
                .pipe(gulp.dest('dist/www/js'));

    }
);

watch task

var gulp = require('gulp');

gulp.task(
    'watch', 
    function() {
        gulp.watch('src/css/**/*.less',  ['css']);
        gulp.watch('src/img/**/*',       ['images']);
        gulp.watch('src/**/*.html',      ['markup']);
        gulp.watch('src/**/*.js',        ['browserify']);
        gulp.watch('src/**/*.tpl',       ['browserify']);

        // Watchify will watch and recompile our JS, so no need to gulp.watch it
    }
);