如何将参数传递给 gulp-watch 调用的任务答案

【问题标题】：How to pass a parameter to gulp-watch invoked task如何将参数传递给 gulp-watch 调用的任务
【发布时间】：2015-03-01 23:15:20
【问题描述】：

我正在尝试将参数传递给 gulp-watch 正在调用的任务。我需要它，因为我正在尝试构建一个模块化框架。

因此，如果模块 1 中的文件发生更改，则无需重新构建其他模块。
我只需要一个函数来为每个模块创建连接和丑化的文件。

这是我目前得到的：

//here I need the 'module' parameter
gulp.task('script', function(module) { ... }

gulp.task('watch', function() {
    gulp.watch('files/in/module1/*.js', ['script']); //here I want to pass module1
    gulp.watch('files/in/module2/*.js', ['script']); //here I want to pass module2
});

很多文档/示例似乎已经过时（gulp.run()、gulp.start()）。

希望有人能帮帮我。

【问题讨论】：

标签： gulp gulp-watch

【解决方案1】：

我遇到了同样的问题，搜索了一段时间，我想出的“最干净”的方式是使用gulp.watch() 的.on() 事件处理程序和gulp-util 的.env 属性：

var gulp = require('gulp');
$.util = require('gulp-util');

var modules = {
    module1: {}, // awesome module1
    module2: {}  // awesome module2
};

gulp.task('script', function(){
    var moduleName = $.util.env.module;
    // Exit if the value is missing...
    var module = modules[moduleName];
    if (!module) {
        $.util.log($.util.colors.red('Error'), "Wrong module value!");
        return;
    }
    $.util.log("Executing task on module '" + moduleName + "'");
    // Do your task on "module" here.
});


gulp.task('watch', function () {
    gulp.watch(['files/in/module1/*.js'], ['script']).on('change', function () {
        $.util.env.module = 'module1';
    });
    gulp.watch(['files/in/module2/*.js'], ['script']).on('change', function () {
        $.util.env.module = 'module2';
    });
});

gulp-util 如果您需要从 shell 传递（全局）参数，也会派上用场：

 [emiliano@dev ~]# gulp script --module=module1 --minify

希望这对其他人有帮助！

问候。

【讨论】：

【解决方案2】：

我将直接回答问题“如何将参数传递给 gulp-watch 调用的任务”

我的做法以及我看到的一种可能性是使用全局变量来在两个块之间传递值。您在观察者中启动任务之前设置它。而在任务中，只是在开始时将其传递给局部变量。

更多详情请查看此答案：https://stackoverflow.com/a/49733123/7668448

在您想要实现的目标中，您也可以只对包含所有模块的目录使用一个观察者。如果是这样的结构。然后当发生更改时，您可以恢复更改的文件路径。从中您可以推断出属于哪个模块。通过获取 Module 文件夹。这样你就不需要为每个新模块添加一个新的观察者。当项目有多个贡献者时，例如在从事开源工作时，这可能会很好。你只做一次，不必关心添加任何东西。就像委托原则一样，当有多个元素时使用 DOM 事件处理。即使选择的结构，也不会将所有模块都放在一个目录中。您可以将多个 glob 传递给一个观察者。

gulp.watch(['glob1/**/*.js', 'glob2/**/*.js',...], function(evt) {/*.....*/});

按照你的结构，你可以用你自己的方式来推断什么是模块。

对于这里的观察者，我建议你怎么做：

  watch('./your/allModulesFolder/**/*.js', function (evt) {
    rebuildModulWatchEvt = evt; //here you update the global var
    gulp.start('rebuildModul'); // you start the task
})

这里的evt 包含多个信息：cwd、base、state、_contents ...等我们感兴趣的是path。所以evt.path 会给你更改文件的路径。

在您的任务中，您可以这样做：

gulp.task('rebuildModul', function() {
     let evt = rebuildModulWatchEvt; // at all start you pass it to a local var
     let filePath = evt.path; // how you get the changed file path
     // your code go here for the rest, following your structure, get the path for the module folder
});

或者你使用一个函数：

gulp.task('rebuildModul', function() {
     rebuildModulTaskRun(rebuildModulWatchEvt);
});
function rebuilModulTaskRun(evt) {
      let filePath = evt.path;
      // your code go here for the rest, following your structure, get the path for the module folder
}

【讨论】：