Search code examples
javascriptparameter-passinggulpgulp-watch

Gulp - Pass parameter to inner function


I have a watch-task which loops through an array. The strings inside the array are used to get different file paths to watch for. That's the line with the watch-function. The on-function looks for changes inside these files. If there is a change a new function will be called, which starts to compile the sass files.

function setWatchPipe(groupName) {
  gulp
    .watch(watchStyles[groupName])
    .on('change', function(e, groupName) {
        console.log(groupName);
        return gulp.src(appFiles.styles.src + groupName)
            .pipe($.plumber({ errorHandler: function (error) {}}))
            .pipe($.rubySass({
                style: sassStyle,
                compass: true,
                noCache: true
            }))
            .pipe(isProduction ? $.combineMediaQueries({ log: true }) : _.noop())
            .pipe(isProduction ? $.minifyCss({ keepSpecialComments: 1 }) : _.noop())
            .pipe($.plumber.stop())
            .pipe(gulp.dest(paths.styles.dest))
            .pipe($.size({
                showFiles: true
            }));

    });
}

var watchArray = ['base', 'front'];

gulp.task('watch', ['build-styles'], function() {
  for(var i = 0; i < watchArray.length; i++)
    setWatchPipe(watchArray[i]);
});

My problem is the parameter "groupName" inside. The watch-task reacts on changes, but the console.log is undefined. I need to get an output of the strings from the array, but I don't know how to pass the variable to that position (it's needed to get the right source-file, which has to be written).

Greetings, Lars


Solution

  • Try using function(e) instead of function(e, groupName). it might be setting the variable groupName with undefined for your closure. the change callback only returns one argument I think.