Search code examples
gulpgulp-lessgulp-watch

Gulp pipe to separate destination folders


I am writing a gulp task that goes through several folders and watches for less files. I want to pipe the compiled css back to the same folder the less file came from. Unfortunately, I can't seem to find a good way to give each of the files a separate output folder.

gulp.task('less:watch', function() {
    watch({
        glob: 'src/**/less/**/*.less',
        emit: 'one',
        emitOnGlob: false
    },function(files){
        return files
            .pipe(less({
                paths: [ path.join(__dirname, 'less', 'includes') ]
            }))
            // I need to pipe the files back to the folder they were generated from
            .pipe(gulp.dest(path.join(__dirname, 'less')))
            .on('error', gutil.log);
    });
});

Solution

  • I believe you can process one file at a time with gulp.watch:

    gulp.task('less:watch', function() {
        gulp.watch('src/**/less/**/*.less',function(evnt) {
          return gulp.src(evnt.path)
            .pipe(less({
              paths: [ path.join(__dirname, 'less', 'includes') ]
            }))
            .pipe(gulp.dest(path.dirname(evnt.path)))
            .on('error', gutil.log);
        });
    });