node-underscorify icon indicating copy to clipboard operation
node-underscorify copied to clipboard

Not compatible with Watchify

Open rcanacci opened this issue 11 years ago • 4 comments

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

rcanacci avatar Aug 26 '14 23:08 rcanacci

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

maxparm avatar Aug 28 '14 02:08 maxparm

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

maxparm avatar Aug 28 '14 02:08 maxparm

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

maxparm avatar Aug 28 '14 04:08 maxparm

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
    }
);

bgaillard avatar Aug 20 '15 06:08 bgaillard