Javascript 将参数传递给gulpfile.js中的Gulp任务（非命令行）

编辑：

正如我在标题中以及从一开始所写的那样，这与命令行参数无关，因此不是重复的<代码>//编辑

我有一个Sass设置，具有无限数量的独特设计的页面（第1页、第2页等），每个页面都有自己的

Sass/pages/pages\u 1/pages\u 1.scss

文件

这些页面都属于同一个网站，每个页面的sass文件

@import

s都是来自

sass/includes

文件夹的同一组文件

通过查看

sass/***

的基本吞咽任务，每当我更改任何页面的样式时，都会编译每个页面的样式。很明显，这不能很好地扩展

我尝试过使用

gulpwatch

，但是如果对其中一个

.scss

文件进行了更改，它就无法捕获。它只捕获对实际编译成等效

.css

的文件所做的更改

为了使我的gulpfile尽可能干燥，我能想到的最佳解决方案是在

gulpfile.js

中维护一个文件夹名称的基本数组，并使用相同的sass编译任务分别循环和查看每个文件夹

var pageFolderNames = [
    'page_1',
    'page_2'
    // etc
];

那么对于吞咽任务，我有：

gulp.task('watch_pages', function()
{    
  // Get array length
  var numPages = pageFolderNames.length;

  // Add a new watch task for each individual page
  for (var i = 0; i < numPages; i++)
  {
    gulp.watch('sass/pages/' + pageFolderNames[i] + '/**/*.scss', ['sass_page']);
  }
});

这种方法（我知道我的JS fu很弱）会导致一个错误：

'sass_page' errored after 71 μs
ReferenceError: i is not defined

---

是否有任何方法可以传递参数（如

i

）来吞咽任务以使其工作？或者，有没有更好的方法来完成我想做的事情？我暗自怀疑有-/

我发现gulp watch有一个正在更换的活动。所以这可能就是你想要的：

var pagesDir = 'sass/pages/';

gulp.task('watch_pages', function() {
    gulp.watch(pagesDir + '**/*')
        .on("change", function(file) {
            // absolute path to folder that needs watching
            var changedDest = path.join(__dirname, pagesDir);
            // relative path to changed file
            var changedFile = path.relative(changedDest, file.path);
            // split the relative path, get the specific folder with changes
            var pageFolder  = changedFile.split('\\')[0];

            gulp.src(path.join(pagesDir, pageFolder) +'/**/*.scss')
              .pipe(plumber(plumberErrorHandler))
              .pipe(sass(...))
              .pipe(gulp.dest('css/pages/' + pageFolder));

            console.log(changedDest);
            console.log(changedFile);
            console.log(pageFolder);
        });
});

此外，这样您就不需要声明文件夹变量。如果您在正在监视的路径中添加目录，它应该将其选中并相应地命名目标文件夹

理论上，编译sass的gulp任务应该在watch任务中工作。我在小路上玩耍，它似乎把它们吐了出来。让我知道发生了什么，如有必要，我可以修改

所需的软件包：

var gulp = require("gulp"),
    path = require("path"),
    rimraf = require("rimraf");

---

顺便说一句，由于您已经可以访问文件路径，您可能可以针对特定的scss文件而不是整个目录。

正如Brian回答的那样，最好的方法是有一个观察者。与dom事件侦听器的委托原则相同。这更好，即使在我们的情况下，这也不重要。我们需要完成我们的事情。如果消耗的资源和性能不影响我们。没关系。但请按布赖恩的回答留下。一个观察者是最好的方法。然后你必须得到被更改的文件。从那里你可以得到你的页面文件夹。因此，我将不添加任何内容。除此之外，您不一定需要在（“更改”）上使用

。您可以直接为您的函数设置与本例所示相同的参数：

  watch('./app/tempGulp/json/**/*.json', function (evt) {
    jsonCommentWatchEvt = evt
    gulp.start('jsonComment')
})

evt
以下是Brian设置为
文件的内容

我想补充的是如何将一个参数从您的观察者传递到您的任务。例如，关于您最初工作中的
i
。我看到并使用的一种方法是设置一个全局变量，该变量保存要传递的数据。这样它在两个块中都可以访问。>在开始任务之前，在watcher中设置值。然后在任务中使用该值。一个好的做法是，在任务开始时将其保存在任务局部变量中。。这样可以避免因另一个watch处理触发而改变该值的问题

举一个生动的例子。在这里查看我的答案：
可能与我删除的答案重复。据我所知，你想查看特定文件夹并在该特定文件夹上运行任务sass_页面。我说的对吗？@PaulSwetz不一样。我找到的所有“传递参数”帖子都与通过命令行执行此操作有关。我正在专门查找g感谢您不是通过命令行而是通过内部逻辑来完成此操作。@Brian是的，这是正确的……每个特定文件夹都单独监视，并由单个监视任务编译。@Sandwich我早些时候重新打开了我的答案，希望能有所帮助。
  watch('./app/tempGulp/json/**/*.json', function (evt) {
    jsonCommentWatchEvt = evt
    gulp.start('jsonComment')
})