gulp.js - Pass the parameters from gulp-watch to gulp-sass

Question

I was wondering if there is a way to pass the parameters from gulp-watch to gulp-sass. In order to customise the gulp-sass task.

I have two tasks when I could have just one if I could pass the parameter based on the file that is being watched by gulp-watch task. Let's say if the file framework.scss being change I could simply pass the relevant src parameter via watch to sass task changing the gulp.src(src) value. Because that is the only difference in both tasks.

Basically I am trying to make the gulp-sass task dynamical. As then I could simply put if statement into gulp-watch task, which would track the file being changed and pass the parameter to gulp-sass depending on the outcome of the if statement.

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);

});

Thanks for any help in advance.

Could you give us more info on how you execute your watch task? — Yan Foto, Jul 20 '15 at 15:02
I simply watch the scss files and execute the tasks created at the top, what I would like to do is to simplify the code. If there was a chance to pass the parameter I could trace the file that is being changed and then pass the required variable to the task instead of creating additional one. — Andrius Solopovas, Jul 20 '15 at 20:09

Mohamed Allal · Answer 1 · 2018-04-09T14:57:12.233

To pass any data from the watcher to the task. You can do as i always do, use a global variable. It will be accessible in both Blocks. Set the data just before starting the task (depend on what you want to pass, it can be an object to store whatever you want). Then in the task you recover it, just at the start. You store it in a local variable. Which you will use in your task (don't use the global variable directly, otherwise you may fall in the problem that another watch triggering, change it when it stay in use by the task).

If you have multiple task, you can use variables named following the task name, and that way you will have no confusion. And all will be well organized.

In your example you need the file that was changed. Here how you get the path:

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

The evt here hold multiple info: cwd, base, state, _contents ...etc And what interest us is path. So evt.path will give you the path of the changed file.

Here are some example around doing such things:

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)

score 0 · Answer 2 · answered Jan 30 '20 at 14:57

I solved this by dynamically defining 'worker functions' in my default task and bind them to a file watcher:

function helper(helperParameter) {
    ...
}

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

exports.default= defaultTask;

In my case I had to loop through all subdirectories of a root path and define workers/watchers for every subdirectory:

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);
    }
    ...
}

After starting gulp the defaultTask gets started, loops through all subdirectories and sets up functions linked to a file watcher for every subdirectory. If there are 10 subdirectories you end up with 10 file watchers listening to that specific subdirectory. Everytime something changes in that subdirectory the 'specialized' worker (i.e. helper() bound to a parameter set up in defaultTask()) is launched.

gulp.js - Pass the parameters from gulp-watch to gulp-sass

2 Answers2