为一个车把项目守望

Question

我有一个使用工具栏的项目，我使用gulp和gulp-compile-handlebars来监视工具栏模板以及用于编译模板的json结构中的变化。我已经实现了一个手表，这似乎是可行的，但它觉得它做了比它应该做更多的工作。

我的吞咽文件看起来是这样的：

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

在进行更改时，我运行gulp auto-reload --task default，而对content.js中的工具栏、模板或json的任何更改都会重新编译到indexCompiles.html中。我只是试着做一个简单的手表，你可以看到它在“吞咽”脚本中被注释掉了。

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

该表将运行所有更改并重新编译，但在新indexCompiled.html中反映的唯一更改是来自index.handlebars的更改--对content.js中的json的更改--没有反映在新编译的html中--我将不得不停止该表并重新启动它，这就是我最终做出了工作的auto-restart的原因。为什么原来的“吞咽式手表”不能工作，是否有办法让它工作，或者我是否需要使用auto-restart任务？

Answer 1

如果我正确地理解了您正在做的事情，那么您将使用来自index.handlebars的数据编译content.js，并且如果这些文件中有任何更改，您希望重新编译。下面是一个简化的、未经测试的代码示例，说明您的代码是什么样子的

// 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']);