gulp.js - 将参数从 gulp-watch 传递给 gulp-sass答案

【问题标题】：gulp.js - Pass the parameters from gulp-watch to gulp-sassgulp.js - 将参数从 gulp-watch 传递给 gulp-sass
【发布时间】：2015-07-20 10:18:25
【问题描述】：

我想知道是否有办法将参数从 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);

});

提前感谢您的帮助。

【问题讨论】：

您能否提供更多关于您如何执行监视任务的信息？
我只是看scss文件并执行顶部创建的任务，我想做的是简化代码。如果有机会传递参数，我可以跟踪正在更改的文件，然后将所需的变量传递给任务，而不是创建额外的变量。

标签： node.js gulp gulp-watch gulp-sass

【解决方案1】：

将观察者的任何数据传递给任务。您可以像往常一样使用全局变量。它将在两个块中都可以访问。 在开始任务之前设置数据（取决于你想传递什么，它可以是一个对象来存储你想要的任何东西）。然后在任务中恢复它，就在开始。您将其存储在局部变量中。你将在你的任务中使用哪个（不要直接使用全局变量，否则你可能会遇到另一个手表触发的问题，当它被任务使用时更改它）。

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

在您的示例中，您需要更改的文件。这里你如何获得路径：

    // .......     
    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)

【讨论】：

【解决方案2】：

我通过在我的默认任务中动态定义“工作函数”并将它们绑定到文件观察器来解决这个问题：

function helper(helperParameter) {
    ...
}

function defaultTask() {
    ...
    let sassWorker = () => helper('some parameter');
    watch('somePath/**/*.scss', sassWorker)
    ...
}

exports.default= defaultTask;

在我的情况下，我必须遍历根路径的所有子目录并为每个子目录定义工作人员/观察者：

function defaultTask() {
    ...
    for (let i = 0; i < directories.length; i++) {

        //define worker method for this subdirectory:
        let sassWorker = () => helper(directories[i]);

        //bind file watcher to worker:
        watch(`${directories[i]}/**/*.scss`, sassWorker);
    }
    ...
}

启动 gulp 后，defaultTask 会启动，遍历所有子目录并为每个子目录设置链接到文件观察器的函数。如果有 10 个子目录，那么最终会有 10 个文件观察者监听该特定子目录。每当该子目录中的某些内容发生变化时，就会启动“专用”工作程序（即绑定到 defaultTask() 中设置的参数的 helper()）。

【讨论】：