Gulp：如何从watch到任务传递参数 [英] Gulp: how to pass parameters from watch to tasks

问题描述

$ b

  gulp.watch（'src / *。jade'，['模板]）; 
 $ b gulp.task（'templates'，function（）{
 return gulp.src（'src / *。jade'）
 .pipe（jade（{
）：
.pipe（gulp.dest（'dist /'））
 .pipe（livereload（server））; 
}）; 
  

这实际上是否将watch'ed文件传递到模板任务中？如何覆盖/扩展/过滤src的任务？

解决方案

前段时间我有同样的问题，在挖掘了一下之后得出以下结论。

gulp.watch 是一个eventEmitter，它发出一个更改事件，所以你可以这样做：

  var watcher = gulp.watch（'src / *。jade'，[ '模板']）; 
 
 watcher.on（'change'，function（f）{
 console.log（'Change Event：'，f）; 
}）; 
  

您会看到：

 更改事件：{type：'changed'，
 path：'/Users/developer/Sites/stackoverflow/src/touch.jade'} 
  

这些信息大概可以通过它的任务函数传递给模板任务，或 gulp.src 的行为。

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

在这种情况下开始任务（ .watch 或gulp命令行）的源对 gulp.src（'src-glob'，[options]）的行为。 'src-glob'是一个字符串（或字符串数​​组）和选项（ https://github.com/isaacs/node-glob#options ）与文件更改无关。

因此，我没有看到 .watch 可以直接影响它触发的任务的行为。 / p>

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

，你也可以这样做：

  var gulp = require（'gulp'）; 
 var jade = require（'gulp-jade'）; 
 var livereload = require（'gulp-livereload'）; 
 $ b gulp.watch（'src / *。jade'，function（event）{
 template（event.path）; 
}）; 
 
 gulp.task（'templates'，function（）{
 template（'src / *。jade'）; 
}）; 
 
函数模板（文件）{
 return gulp.src（files）
 .pipe（jade（{
 pretty：true 
}））
 .pipe（gulp.dest（'dist /'））
} 
  

With gulp you often see patterns like this:

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

Does this actually pass the watch'ed files into the templates task? How do these overwrite/extend/filter the src'ed tasks?

解决方案

I had the same question some time ago and came to the following conclusion after digging for a bit.

gulp.watch is an eventEmitter that emits a change event, and so you can do this:

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

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

and you'll see this:

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

This information could presumably be passed to the template task either via its task function, or the behavior of gulp.src.

The task function itself can only receive a callback (https://github.com/gulpjs/gulp/blob/master/docs/API.md#fn) and cannot receive any information about vinyl files (https://github.com/wearefractal/vinyl-fs) that are used by gulp.

The source starting a task (.watch in this case, or gulp command line) has no effect on the behavior of gulp.src('src-glob', [options]). 'src-glob' is a string (or array of strings) and options (https://github.com/isaacs/node-glob#options) has nothing about any file changes.

Hence, I don't see any way in which .watch could directly affect the behavior of a task it triggers.

If you want to process only the changed files, you can use gulp-changed (https://www.npmjs.com/package/gulp-changed) if you want to use gulp.watch, or you cold use gulp-watch.

Alternatively, you could do this as well:

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

这篇关于Gulp：如何从watch到任务传递参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！