Question

EDIT:正如我在标题和开始时写的那样，不是关于命令行参数，因此不是重复的。 //EDIT

我有一个Sass设置，其中包含无限数量的独特设计页面（第1页，第2页等），每个页面都有自己的sass/pages/page_1/page_1.scss文件。

这些页面都属于同一个网站，每个页面的sass文件@import是sass/includes文件夹中的同一组文件。

通过基本gulp任务观看sass/**/*，每个页面的样式都会在我对任何页面的样式进行更改时进行编译。显然这不能很好地扩展。

我尝试使用gulp-watch，但如果对其中一个包含的.scss文件进行了更改，则无法捕获。它只捕获对实际编译为等效.css的文件所做的更改。

为了让我的gulpfile尽可能干，我能想到的最好的解决方案是在gulpfile.js中维护一个基本的文件夹名称数组，并循环浏览并分别观看它们中的每一个，为每个文件夹使用相同的sass编译任务。

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

然后，对于gulp任务，我有：

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

编译sass的（简化）任务：

// Task: Compile page-specific Sass
gulp.task('sass_page', function()
{
  return gulp.src('sass/pages/' + pageFolderNames[i] +'/**/*.scss')
    .pipe(plumber(plumberErrorHandler))
    .pipe(sass(...))
    .pipe(gulp.dest('css/pages/' + pageFolderNames[i]));
});

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

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

有没有办法将参数（例如i）传递给gulp任务以使其正常工作？或者，有没有更好的方法来完成我想要做的事情？我有一个潜行的怀疑。： - /

Answer 1

我发现gulp手表有一个改变的事件。所以这可能就是你要找的东西：

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文件而不是整个目录。

Answer 2

布莱恩回答说，最好的办法就是拥有一名观察者。与使用dom事件侦听器委派的原则相同。它更好，即使在我们的情况下它也不重要。我们需要完成我们的事情。如果消耗的资源和性能不打扰我们。没关系。但是，当布莱恩回答时一个观察者是最好的方法。那么你必须得到改变的文件。从那里你得到你的页面文件夹。所以为此，我不会添加任何东西。除了您不一定需要使用.on("change"。您可以直接为您的函数设置相同的参数，例如show：

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

evt这是Brian设置为file的内容。

我要添加的内容是如何将参数从观察者传递到您的任务。例如，关于初始工作中的i。 一种方法，我看到并使用是设置一个包含想要传递的数据的全局变量。所以它可以在两个块中访问。 您可以在启动任务之前在观察程序中设置值。然后你在任务中使用它。一个好的做法，就是在开始时将它保存在任务局部变量中。这样你可以避免它可以通过另一个手表处理触发而改变的问题。

一个生动的例子。在这里查看我的答案：https://stackoverflow.com/a/49733123/7668448

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

2 个答案: