Nsryjdtyk

I have project that uses handlebars and I'm using gulp and gulp-compile-handlebars to watch for changes in the handlebars template as well as the json structure used to compile the template. I have implemented a watch which seems to work, but it feels like it's doing more work than it should.

My gulpfile looks like this:

var gulp = require('gulp');

var watch = require('gulp-watch');

var handlebars = require('gulp-compile-handlebars');

var rename = require('gulp-rename');

var batch = require('gulp-batch');

var argv = require('yargs').argv // for args parsing

var spawn = require('child_process').spawn;



handlebars.Handlebars.registerHelper('next', function(context, idx, options) {

    if (context[idx + 1]) {

        return options.fn(context[idx + 1])

    } else {

        return "";

    }

});





gulp.task('default', function () {

    var content = require('./content.js')

    var templateData = content

    options = {

        // partials : {

        //     footer : '<footer>the end</footer>'

        // },

        // batch : ['./src/partials'],

        // helpers : {

        //     capitals : function(str){

        //         return str.toUpperCase();

        //     }

        // }

    }



    return gulp.src(['index.handlebars'])

    .pipe(handlebars(templateData, options))

    .pipe(rename('indexCompiled.html'))

    .pipe(gulp.dest('.'));

});



// gulp.task('watch', function () {

//     watch('index.handlebars', batch(function (events, done) {

//         gulp.start('default', done);

//     }));

//     watch('content.js', batch(function (events, done) {

//         gulp.start('default', done);

//     }));

//     watch('gulpfile.js', batch(function (events, done) {

//         gulp.start('default', done);

//     }));

// });



gulp.task('auto-reload', function() {

    var p;



    gulp.watch('content.js', spawnChildren);

    gulp.watch('index.handlebars', spawnChildren);

    spawnChildren();



    function spawnChildren(e) {

        // kill previous spawned process

        if(p) { p.kill(); }



        // `spawn` a child `gulp` process linked to the parent `stdio`

        p = spawn('gulp', [argv.task], {stdio: 'inherit'});

    }

});

As I'm making changes I run gulp auto-reload --task default and any changes to the handlebars template or the json in content.js is re-compiled into indexCompiles.html. Intially I was just trying to do a simple watch which you can see commented out in the gulp script.

// gulp.task('watch', function () {

//     watch('index.handlebars', batch(function (events, done) {

//         gulp.start('default', done);

//     }));

//     watch('content.js', batch(function (events, done) {

//         gulp.start('default', done);

//     }));

// });

That watch would run for all changes and recompile, but the only changes that were reflected in the new indexCompiled.html were the ones from index.handlebars any changes to the json in content.js was not reflected in the new compiled html I would have to stop the gulp watch and start it again, which is why I eventually made the auto-restart which works. Why wasn't the original gulp watch working and is there a way to get it to work or do I need to use the auto-restart task?

If I understood what you are doing correctly you are compiling index.handlebars using data from content.js and you want to recompile if any of those files changes. Below is a simplified and NOT TESTED example of what your code can look like

// removed gulp-watch (built in gulp by default)

// also removed spawn, argv and batch

var gulp = require('gulp');

var handlebars = require('gulp-compile-handlebars');

var rename = require('gulp-rename');



handlebars.Handlebars.registerHelper('next', function(context, idx, options) {

    if (context[idx + 1]) {

        return options.fn(context[idx + 1])

    } else {

        return "";

    }

});



// compile index.handlebars with data from content.js

gulp.task('handlebars', function() {

    var templateData = require('./content.js');

    var options = {};



    return gulp.src(['index.handlebars'])

        .pipe(handlebars(templateData, options))

        .pipe(rename('indexCompiled.html'))

        .pipe(gulp.dest('.'));

});



// watch for changes in content and index files

// and then run handlebars task

gulp.task('watch', function(){

    gulp.watch(['content.js', 'index.handlebars'], ['handlebars']);

});



// on run `gulp` compile and start watching for changes

gulp.task('default', ['handlebars', 'watch']);