Gulp：如何將參數從watch傳遞給任務

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

這實際上是將watcheded文件傳遞給模板任務嗎？ 這些如何覆蓋/擴展/過濾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' }

可以通過其任務函數或gulp.src的行為將此信息傳遞給template任務。

任務函數本身只能接收回調（ https://github.com/gulpjs/gulp/blob/master/docs/API.md#fn ）並且無法接收有關乙烯基文件的任何信息（ https://github.com gulp使用/ wearefractal / vinyl-fs ）。

啟動任務的源（本例中為.watch或.watch命令行）對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 gulp-watch 。

或者，您也可以這樣做：

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"事件。它是異步的。所以任務將在工作完全結束之前標記結束（任務到達結束，但啟動的異步函數將繼續處理更多）。所以你需要的時間在任務結束時進入控制台，不是整個處理的時間，而是任務塊結束。只是你知道。對我來說沒關系。