使用 gulp watch 获取可能的泄漏，任务每次都需要更长的时间

Question

我正在使用 gulp 在 ASP.NET5 网站中编译和缩小我的 SASS 以用作 CDN。我写了一个 watcher 来监视我的 *.scss 文件，然后它使用依赖项编译 scss，然后 concat/minify 把它变成一个 style.min.css.

我遇到的问题是项目打开的时间越长，或者至少对于 gulp 任务的每个顺序运行，它们变得相当长只开发了大约 20 分钟，编译任务花费了 15+ 秒，而 minify 花费了 25+ 秒。每个的第一个运行大约需要 1 或 2 毫秒，所以我真的不知道发生了什么。

这是我的观察者：

gulp.task('Watch:Sass', function () {
    watch(paths.cdn.sassLoc, { verbose: true }, function () {
        gulp.start("Min:css"); 
    });
});

这是 Min:css 任务：

gulp.task("Min:css", ["Compile:Sass"], function () {
    return gulp.src([paths.cdn.cssLoc, "!" + paths.cdnMinCssLoc + "**/*.*"])
        .pipe(concat(paths.cdn.cssDest))
        .pipe(cssmin())
        .pipe(plumber({
            handleError: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(gulp.dest("."));
});

这是作为依赖注入的 Compile:Sass 任务：

gulp.task('Compile:Sass', function () {
    gulp.src(paths.cdn.imagesLoc)
        .pipe(gulp.dest(paths.webroot + '/css/min/images'));
    return gulp.src(paths.cdn.sassLoc).pipe(plumber({
        handleError: function (err) {
            console.log(err);
            this.emit('end');
        }
    }))
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(paths.cdn.sassDest));
});

难道是因为我使用了returns？

任何帮助将不胜感激，因为我必须每半小时左右重新启动 Visual Studio，这非常令人沮丧！

我确定我已经包含了所有相关信息，但请询问您是否需要更多信息。

Answer 1

Matt，您的 "Min:css" 任务管道之一有一个 concat。

gulp.task("Min:css", ["Compile:Sass"], function () {
    return gulp.src([paths.cdn.cssLoc, "!" + paths.cdnMinCssLoc + "**/*.*"])
        .pipe(concat(paths.cdn.cssDest))
        ...
        ...
        .pipe(gulp.dest("."));
});

确保您没有一遍又一遍地无限连接同一个 css。我不知道你的 paths.cdn.cssLoc 指向什么。这将导致处理时间越来越长。如果你愿意，你可以称之为泄漏。

Answer 2

在这种情况下，实际上是我的 return 语句放错了地方。

为了解决这个问题，我不得不去掉 gulp.src(...) 上的 return 并且我不得不在 [=13= 的末尾添加一个 return true ] gulp任务。我还完全从 Min:Css 任务中删除了 return，现在我的编译任务需要 ~1.5ms，而我的最小任务需要 ~600us。

这是最后的 Compile:Sass 任务：

gulp.task('Compile:Sass', function () {
    gulp.src(paths.cdn.imagesLoc)
        .pipe(gulp.dest(paths.webroot + '/css/min/images'));
    gulp.src(paths.cdn.sassLoc).pipe(plumber({
        handleError: function (err) {
            console.log(err);
            this.emit('end');
        }
    }))
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(paths.cdn.sassDest));

    return true;
});

使用 gulp watch 获取可能的泄漏，任务每次都需要更长的时间

Getting a possible leak using gulp watch, tasks take longer each time

css

gulp

gulp-sass

gulp-watch

gulp-concat