node.js - gulp.js - 将参数从 gulp-watch 传递到 gulp-sass

Question

我想知道是否有办法将参数从 gulp-watch 传递到 gulp-sass。为了自定义gulp-sass任务。

如果我可以根据 gulp-watch 任务正在监视的文件传递参数，那么我本来可以只有一个任务，但我有两个任务。假设如果文件framework.scss发生变化，我可以简单地通过watch将相关的src参数传递给sass任务来更改gulp.src(src)值。因为这是这两个任务的唯一区别。

基本上，我正在尝试使 gulp-sass 任务动态化。这样我就可以简单地将 if 语句放入 gulp-watch 任务中，该任务将跟踪正在更改的文件并根据 if 语句的结果将参数传递给 gulp-sass 。

gulp.task('sass:framework', function() {

    gulp.src(app.src.scss + '/framework.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({
            includePaths: require('node-bourbon').with(app.fwrk.scss, app.src.scss)
        }).on('error', sass.logError))
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(app.dest.css))

});

gulp.task('sass:app', function() {

    gulp.src(app.src.scss + '/app.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({
            includePaths: require('node-bourbon').with(app.fwrk.scss, app.src.scss)
        }).on('error', sass.logError))
        .pipe(rename({suffix: '.min'}))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(app.dest.css))

});

gulp.task('watch', function() {

    livereload.listen(35729, function(err) {
        if (err) {
            return console.log(err);
        }
    });

    gulp.watch(app.src.scss + '/_settings.scss', ['sass:framework', 'sass:app'])
    gulp.watch([app.src.scss + '/app.scss', app.src.scss + '/app/*.scss'], ['sass:app'])
    gulp.watch(app.src.scss + '/framework.scss', ['sass:framework'])

    gulp.watch([basepath + '/**/**/**/*.php', app.dest.css + '/**/**/*.css', app.dest.js+ '/**/*.js']).on('change', livereload.changed);

});

感谢您提前提供的任何帮助。

Answer 1

将任何数据从观察者传递到任务。您可以像我一直做的那样，使用全局变量。两个街区都可以访问它。 在开始任务之前设置数据(取决于您想要传递的内容，它可以是一个对象来存储您想要的任何内容)。然后在任务开始时恢复它。您将其存储在局部变量中。您将在任务中使用它(不要直接使用全局变量，否则您可能会遇到另一个 watch 触发的问题，请在任务使用它时更改它)。

如果你有多个任务，你可以使用任务名称后面命名的变量，这样你就不会混淆。一切都会井井有条。

在您的示例中，您需要更改的文件。下面是如何获取路径:

    // .......     
    watch('your glob here or multiple globs (array)', function (evt) {
        task_WatchEvt = evt; // set the evt data, just before starting the task
        gulp.start('task'); //start the task this way! 
    })
});

//:::::::::::::::Task: task

// the global variable for the task 'task'
var task_WatchEvt = evt;

// the task itself
gulp.task('task', function() {
    let evt = task_WatchEvt; // we get the evt and store it in a local var
    let filePath = evt.path; // here how you get the changed filepath
    // do your work
});

//::::::::::Task: anotherTask
// ..... the same

这里的 evt 保存了多个信息:cwd、base、state、_contents ...等，我们感兴趣的是路径。因此 evt.path 将为您提供已更改文件的路径。

以下是一些关于执行此类操作的示例:

https://stackoverflow.com/a/49733123/7668448

How to pass a parameter to gulp-watch invoked task

Pass parameter to Gulp task in gulpfile.js (not command-line)