Question

通常会看到这样的模式：

gulp.watch('src/*.jade',['templates']);

gulp.task('templates', function() {
  return gulp.src('src/*.jade')
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('dist/'))
    .pipe( livereload( server ));
});

这是否真的将手表文件传递到模板任务中？这些如何覆盖/扩展/过滤src的任务？

Answer 1

前段时间我有同样的问题，经过挖掘后得出以下结论。

gulp.watch是一个发出change事件的eventEmitter，因此您可以执行此操作：

var watcher = gulp.watch('src/*.jade',['templates']);

watcher.on('change', function(f) {
  console.log('Change Event:', f);
});

你会看到这个：

Change Event: { type: 'changed',
  path: '/Users/developer/Sites/stackoverflow/src/touch.jade' }

这些信息可能通过其任务函数或template的行为传递给gulp.src任务。

任务函数本身只能接收回调（https://github.com/gulpjs/gulp/blob/master/docs/API.md#fn），并且无法接收有关gulp使用的乙烯基文件（https://github.com/wearefractal/vinyl-fs）的任何信息。

启动任务的源（在这种情况下为.watch或gulp命令行）对gulp.src('src-glob', [options])的行为没有影响。 'src-glob'是一个字符串（或字符串数组），options（https://github.com/isaacs/node-glob#options）与任何文件更改无关。

因此，我没有看到.watch可能直接影响其触发任务行为的任何方式。

如果您只想处理更改的文件，可以使用gulp-changed（https://www.npmjs.com/package/gulp-changed），如果您想使用gulp.watch，或者冷使用gulp-watch。< / p>

或者，您也可以这样做：

var gulp = require('gulp');
var jade = require('gulp-jade');
var livereload = require('gulp-livereload');

gulp.watch('src/*.jade', function(event){
  template(event.path);
});

gulp.task('templates', function() {
  template('src/*.jade');
});

function template(files) {
  return gulp.src(files)
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('dist/'))
}

Answer 2

将参数或数据从观察者传递到任务的可能方法之一。我通过使用全局变量，或两个块scops中的变量。这是一个例子：

gulp.task('watch', function () {
        //....
        //json comments 
        watch('./app/tempGulp/json/**/*.json', function (evt) {
             jsonCommentWatchEvt = evt; // we set the global variable first
             gulp.start('jsonComment'); // then we start the task
        })
})

//global variable
var jsonCommentWatchEvt = null

//json comments task

gulp.task('jsonComment', function () {
    jsonComment_Task(jsonCommentWatchEvt)
})

这里执行任务的函数工作以防任何人感兴趣，但是知道我不需要将工作放在另一个函数中我可以直接在任务中实现它。对于文件，您有全局变量。这是jsonCommentWatchEvt。但是要知道如果你不像我一样使用函数，一个好的做法是将全局变量的值赋给你将要使用的本地变量。而你在任务的所有顶部条目都这样做。所以你不会使用全局变量本身。这是为了避免它可以通过另一个手表处理触发而改变的问题。当它继续被当前运行的任务使用时。

function jsonComment_Task(evt) {
    console.log('handling : ' + evt.path);
    gulp.src(evt.path, {
        base: './app/tempGulp/json/'
    }).
    pipe(stripJsonComments({whitespace: false})).on('error', console.log).
    on('data', function (file) { // here we want to manipulate the resulting stream

        var str = file.contents.toString()

        var stream = source(path.basename(file.path))
        stream.end(str.replace(/\n\s*\n/g, '\n\n'))
        stream.
        pipe(gulp.dest('./app/json/')).on('error', console.log)
    })
}

我有一个不同json文件的目录，我会在其中使用注释。我在看他们。修改文件后，将触发监视处理，然后我需要仅处理已修改的文件。要删除注释，我使用了json-comment-strip插件。另外，我需要做更多的治疗。删除多个连续的换行符。 无论如何，首先我需要将路径传递给我们可以从事件参数中恢复的文件。 我通过一个全局变量将其传递给任务，只做那个。允许传递数据。

注意：尽管这与问题没有关系，但在我的示例中，我需要处理从插件处理中获取的流。我使用了on("data"事件。它是异步的。所以任务将在工作完全结束之前标记结束（任务到达结束，但启动的异步函数将继续处理更多）。因此，在任务结束时进入控制台的时间不是整个处理的时间，而是任务块结束。就是你知道的。对我来说没关系。

Gulp：如何将参数从watch传递给任务

2 个答案: