Question

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

如果我可以根据gulp-watch任务正在监视的文件传递参数，那么我只有一个任务。让我们说如果文件framework.scss正在改变，我可以简单地通过watch将相关的src参数传递给更改gulp.src（src）值的sass任务。因为这是两个任务的唯一区别。

基本上我试图让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('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)

Answer 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（））。

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

2 个答案: