与普通'gulp less'命令相比，'Gulp watch'事件编译所需的时间减少了一倍

Question

我的 Gulp 'watch' less 函数遇到了问题，因为与单个 less 函数相比，编译更少的文件需要 2 倍的时间。

当我使用"少吞虎咽"时，平均需要 9/10 秒

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

但是，当我使用"无吞咽手表"，然后更改文件以触发监视功能时，与"少吞咽"相比，它花费的时间大约是两倍。

[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

下面是我的gulpfile.js它拉入了"paths.json"，因为我有5个不同的主题（这个问题的名称已更改），因此需要将正在使用的较少文件输出到相关文件夹中，这就是我使用"updateDestFolder"函数的原因。

导入较少的方法是，基本主题的更改应更新主题 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/",
  }
}

如果有人可以建议在不需要使用该功能的情况下确定 dest 文件夹的任何改进，我将不胜感激。

谢谢

Answer 1

我不知道

为什么需要更多时间，但这是您可以更好地确定 dest 文件夹的方法：

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