Why does gulp performance drop after some time?

Question

gulp.js

This is my gulpfile.js. Initially everything works fine. For example, I write something in styles (stylus), the conversion to css takes 350-400 milliseconds, then with each conversion this time becomes longer and longer, up to 20 seconds, the conversion can take. Please tell me what is the problem

'use strict'

const gulp            = require('gulp');
const stylus          = require('gulp-stylus');
const autoprefixer    = require('gulp-autoprefixer');
const uglifycss       = require('gulp-uglifycss');
const uglify          = require('gulp-uglifyjs');
const haml            = require('gulp-ruby-haml');
const include         = require("gulp-include");
const browserSync     = require('browser-sync').create();
const mainBowerFiles  = require('main-bower-files');
const del             = require('del');
const cached          = require('gulp-cached');
const path            = require('path');
const iconfont        = require('gulp-iconfont');
const iconfontCss     = require('gulp-iconfont-css');
const notify          = require('gulp-notify');
const plumber         = require('gulp-plumber');
const watch           = require('gulp-watch');


var plumberErrorHandler = {
    errorHandler: notify.onError({
        title: 'Gulp',
        message: 'Error: <%= error.message %>'
    })
}


gulp.task('stylus', function() {
    return gulp.src('app/stylus/{application,vendors}.styl')
        .pipe(plumber(plumberErrorHandler))
        .pipe(stylus({'include css': true}))
        .pipe(autoprefixer(['last 15 version', '> 1%']))
        //.pipe(uglifycss())
        .pipe(gulp.dest('build/css'));
});


var fontName = 'quest-icons';
gulp.task('icons', function(){
    return gulp.src(['app/icons/*.svg'])
        .pipe(iconfontCss({
            fontPath: '../fonts/',
            fontName: fontName,
            path: 'app/icons/icons.css',
            targetPath: '../stylus/vendors/icons.css',
            cssClass: "quest",
           
            
        }))
        .pipe(iconfont({
            fontName: fontName,
            formats: ['eot', 'svg', 'ttf', 'woff', "woff2"],
            normalize:true
        }))
        .pipe(gulp.dest('app/fonts'));
});

gulp.task('server', function(){
    browserSync.init({
        server: 'build',
        online: true
    });
    browserSync.watch('build/**/*.*').on('change', browserSync.reload)
});

// get Bower files
gulp.task('bowerFiles', function() {
    return gulp.src(mainBowerFiles())
        .pipe(gulp.dest(function(file){
            return file.extname == '.js' ? 'app/js/vendors' :
                file.extname == '.css' ? 'app/sass/vendors' : 'build/fonts';
        }));
});
 
gulp.task('haml', function() {
    return gulp.src('app/*.haml')
        .pipe(plumber(plumberErrorHandler))
        .pipe(include())
        //.on('error', console.log)
        .pipe(cached('haml'))
        .pipe(haml({doubleQuote: true}).on('error', function(e) { console.log(e.message); }))
        .pipe(gulp.dest('./build'));
});
gulp.task('js', function() {
    return gulp.src('app/js/{application,vendors}.js')
        .pipe(include()).on('error', console.log)
        .pipe(cached('js'))
        //.pipe(uglify())
        .pipe(gulp.dest('build/js'));  
});

gulp.task('images', function() {
    return gulp.src('app/img/**/*.*')
        .pipe(gulp.dest('build/img'));
});
gulp.task('fonts', function() {
    return gulp.src('app/fonts/**/*.*')
        .pipe(cached('fonts'))
        .pipe(gulp.dest('build/fonts'));
});
gulp.task('appFiles',  gulp.series('images', 'fonts', 'icons', 'js'));

gulp.task('clean', function(){
    return del('build')
});

gulp.task('build', gulp.series('clean', 'bowerFiles', "appFiles", 'stylus', 'haml'));



gulp.task('watch', function(){
    gulp.watch('app/stylus/**/*', gulp.series('stylus'));
    gulp.watch('app/**/*.haml', gulp.series('haml')).on('unlink', function(filepath){
        delete cached.caches.haml[path.resolve(filepath)]
    });
    gulp.watch('app/icons/**/*', gulp.series('icons'));
    gulp.watch('app/js/**/*', gulp.series('js'));
    gulp.watch('app/fonts/**/*', gulp.series('fonts')).on('unlink', function(filepath){
        delete cached.caches.haml[path.resolve(filepath)]
    });
    gulp.watch('app/img/**/*', gulp.series('images'));
    
});

gulp.task('default',  gulp.series('build',  gulp.parallel('watch', 'server')));

Answer 1

I have the same problem with LESS, plus I know about the same problem with Sass.
In my case, this is observed on Win10 with gulp 4 (not observed on OSX).
https://github.com/nicothin/test_area_LESS--gulp/t... is a repository created to emulate the issue.

Answer 2

Try saving changes to files in another editor.

Answer 3

Because you need to use { since: gulp.lastRun('__nameTask') }
without this, with each new picture you will drag them back and forth,
fill in another 500 pictures of each 1 mb, your build will be assembled for half an hour