'Gulp watch' event takes double the amount of time to compile less compared to normal 'gulp less' command

Question

I'm having issues with my Gulp 'watch' less function in that it is taking 2x longer to compile the less files compared with the individual less function.

When I use 'gulp less' it takes average of 9/10 seconds

[12:57:15] Starting 'less'...
[12:57:25] Finished 'less' after 9.96 s

However when I use 'gulp watch-less', then change a file to trigger the watch function it takes about double the time compared to 'gulp less'.

[13:03:43] Starting 'watch-less'...
[13:03:45] Finished 'watch-less' after 1.31 s
[13:03:48] Starting 'less'...
[13:04:06] Finished 'less' after 18 s

Below is my gulpfile.js which pulls in 'paths.json' as I've got 5 different themes (names are changed for this question) so the less file that is being used needs to be outputted into the relevant folder which is why I use the function 'updateDestFolder'.

The way the less is imported is that a change in the base theme should update the themes 2-5.

/*jslint node: true */
'use strict';

// Require the various plugins
var gulp     = require('gulp');
var watch    = require('gulp-watch');
var less     = require('gulp-less');
var plumber = require('gulp-plumber');

// Pull in External Paths JSON
var paths = require('./Config/paths.json');

// Determine output path depending on source path
function updateDestFolder(path) {
    var folder = '';

    if (path.indexOf(paths.themes.baseTheme) > -1) {
        folder = paths.themeDest.baseTheme;
    }
    else if (path.indexOf(paths.themes.theme2) > -1) {
        folder = paths.themeDest.theme2;
    }
    else if (path.indexOf(paths.themes.theme3) > -1) {
        folder = paths.themeDest.theme3;
    }
    else if (path.indexOf(paths.themes.theme4) > -1) {
        folder = paths.themeDest.theme4;
    }
    else if (path.indexOf(paths.themes.theme5) > -1) {
        folder = paths.themeDest.theme5;
    }

    return folder;
}

// Compile LESS
gulp.task('less', function() {
    var completeLessPaths = paths.less.src.concat(paths.less.ignore); // Merges both arrays
    var destFolder;

    return gulp.src(completeLessPaths)
        .pipe(plumber()) // Handle any errors with the plugins
        .pipe(less({
            strictUnits: true,
            compress: true // Minify the style
        }))
        .pipe(gulp.dest(function (file) {
            destFolder = updateDestFolder(file.path);
            return destFolder + 'Styles/';
        }));
});

// Default tasks to run when 'gulp' is ran via command line
gulp.task('default', ['less', 'js', 'image']);

// Watch for changes to less source files, then fire the relevant function
gulp.task('watch-less', function () {
    gulp.watch(paths.less.src, ['less']);
});

Paths.json:

{
  "less" : {
    "src" : [
      "../Orchard.Web/Themes/Theme1Base/Styles/**/*.less",
      "../Orchard.Web/Themes/Theme2/Styles/**/*.less",
      "../Orchard.Web/Themes/Theme3/Styles/**/*.less",
      "../Orchard.Web/Themes/Theme4/Styles/**/*.less",
      "../Orchard.Web/Themes/Theme5/Styles/**/*.less"
    ],
    "ignore" : [
      "!../**/*.css",
      "!../**/bootstrap-overrides.less",
      "!../**/font-awesome.less",
      "!../**/Imports/**/*.less",
      "!../**/typography*.less",
      "!../**/*variables*.less"
    ]
  },
  "themes" : {
    "baseTheme": "Theme1Base",
    "theme2": "Theme2",
    "theme3": "Theme3",
    "theme4": "Theme4",
    "theme5": "Theme5",
  },
  "themeDest" : {
    "baseTheme" : "../Orchard.Web/Themes/Theme1Base/",
    "theme2" : "../Orchard.Web/Themes/Theme2/",
    "theme3" : "../Orchard.Web/Themes/Theme3/",
    "theme4": "../Orchard.Web/Themes/Theme4/",
    "theme5" : "../Orchard.Web/Themes/Theme5/",
  }
}

If anyone could suggest any improvements of determining the dest folder without needing to use the function I'd be grateful as well.

Thanks

Answer 1

I have no idea why it takes more time, but here's how you can determine dest folder better:

gulp.dst(function(file) { return file.split("/Styles")[0] + "/Styles/"; });