Why is compilation delayed?

Question

Lenovo

There is a delay while compiling files. That is: I change styles, the console reports that the process has started, then a delay of 8-12 seconds, and then a message that everything was completed successfully:

[12:14:26] Starting 'css'...
[Browsersync] 1 file changed (style.min.css)
[12:14:44] Finished 'css' after 19 s
[12:14:44] Starting 'css'...
[Browsersync] 1 file changed (style.min.css)
[12:14:45] Finished 'css' after 37 ms

it happens that there are no delays and I work normally all day, but more often there are delays. At first I sinned on the gallp, they say I made a mistake somewhere in the config, but no, the config is without errors. since it collects everything as it should and, as I wrote above, it happens that there are no delays. It happened on a weak laptop, but this time I work on a PC, but here the processor is quite powerful. Maybe the problem is in the node or in the system? Who has experienced this?

Node: v12.18.3
Gulp: CLI version: 2.3.0
Local version: 4.0.2
cat package:
{
"name": project554",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "author",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.7",
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-clean-css": "^4.3.0",
"gulp-file-include": "^2.2.2",
"gulp-fonter": "^0.3.0",
"gulp-group-css-media-queries": "^1.2.2",
"gulp-imagemin": "^7.1.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-svg-sprite": "^1.5.0",
"gulp-ttf2woff": "^1.1.1",
"gulp-ttf2woff2": "^3.0.0",
"gulp-uglify-es": "^2.0.0",
"gulp-webp": "^4.0.1",
"gulp-webp-html": "^1.0.2",
"gulp-webpcss": "^1.1.1"
}
}

Gulpfile.js:

let projectFolder = 'dist';
let sourceFolder = 'source';

let fs = require('fs');

let path = {
    build: {
        html: projectFolder + '/',
        css: projectFolder + '/css/',
        js: projectFolder + '/js/',
        img: projectFolder + '/img/',
        fonts: projectFolder + '/fonts/',
        video: projectFolder + '/video/'
    },
    source: {
        html: [sourceFolder + '/*.html', '!' + sourceFolder + '/_*.html'],
        css: sourceFolder + '/scss/style.scss',
        js: sourceFolder + '/js/script.js',
        img: sourceFolder + '/img/**/*.{jpg,png,svg,gif,ico,webp}',
        fonts: sourceFolder + '/fonts/*.ttf',
        video: sourceFolder + '/video/**/*'
    },
    watch: {
        html: sourceFolder + '/**/*.html',
        css: sourceFolder + '/scss/**/*.scss',
        js: sourceFolder + '/js/**/*.js',
        img: sourceFolder + '/img/**/*.{jpg,png,svg,gif,ico,webp}',
    },
    clean: './' + projectFolder + '/'

}

let { src, dest } = require('gulp'),
    gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    fileInclude = require('gulp-file-include'),
    del = require('del'),
    scss = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    group_media = require('gulp-group-css-media-queries'),
    clean_css = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify-es').default,
    imagemin = require('gulp-imagemin'),
    // webp = require('gulp-webp'),
    // webphtml = require('gulp-webp-html'),
    // webpcss = require('gulp-webpcss'),
    ttf2woff = require('gulp-ttf2woff'),
    ttf2woff2 = require('gulp-ttf2woff2'),
    fonter = require('gulp-fonter');

// Удаляет лишние файлы из 'dist'
function deleteFolderDist(arg) {
    return del(path.clean)
}

function synchro(arg) {
    browserSync.init({
        server: {
            baseDir: './' + projectFolder + '/'
        },
        online: true,
        port: 3000,
        notify: false,

    })
}

function html(arg) {
    return src(path.source.html)
        .pipe(fileInclude())
        // .pipe(webphtml())
        .pipe(dest(path.build.html))
        .pipe(browserSync.stream())
}
function video(arg) {
    return src(path.source.video)
        .pipe(dest(path.build.video))
        .pipe(browserSync.stream())
}

function css(arg) {
    return src(path.source.css)
        .pipe(
            scss({
                outputStyle: 'expanded'
            }))
        .pipe(group_media())
        .pipe(autoprefixer({
            overrideBrowserslist: ['last 5 versions'],
            cascade: true
        }))
        // .pipe(webpcss())
        .pipe(dest(path.build.css))
        .pipe(clean_css())
        .pipe(rename({
            extname: '.min.css'
        }))
        .pipe(dest(path.build.css))
        .pipe(browserSync.stream())
}

function js(arg) {
    return src(path.source.js)
        .pipe(fileInclude())
        .pipe(dest(path.build.js))
        .pipe(uglify())
        .pipe(rename({
            extname: '.min.js'
        }))
        .pipe(dest(path.build.js))
        .pipe(browserSync.stream())
}

function images(arg) {
    return src(path.source.img)
        // .pipe(
        //     webp({
        //         quality: 70
        //     })
        // )
        .pipe(dest(path.build.img))
        .pipe(src(path.source.img))
        .pipe(
            imagemin({
                interlaced: true,
                progressive: true,
                optimizationLevel: 3,
                svgoPlugins: [
                    {
                        removeViewBox: true
                    }
                ]
            }))
        .pipe(dest(path.build.img))
        .pipe(browserSync.stream())
}

function livefonts() {
    src(path.source.fonts)
        .pipe(ttf2woff())
        .pipe(dest(path.build.fonts));
    return src(path.source.fonts)
        .pipe(ttf2woff2())
        .pipe(dest(path.build.fonts))
}

gulp.task('otf', function () {
    return src([sourceFolder + '/fonts/*.otf'])
        .pipe(fonter({
            formats: ['ttf']
        }))
        .pipe(dest(sourceFolder + '/fonts/'))
})

function fontsStyle(params) {

    let file_content = fs.readFileSync(sourceFolder + '/scss/fonts.scss');
    if (file_content == '') {
        fs.writeFile(sourceFolder + '/scss/fonts.scss', '', cb);
        return fs.readdir(path.build.fonts, function (err, items) {
            if (items) {
                let c_fontname;
                for (var i = 0; i < items.length; i++) {
                    let fontname = items[i].split('.');
                    fontname = fontname[0];
                    if (c_fontname != fontname) {
                        fs.appendFile(sourceFolder + '/scss/fonts.scss', '@include font("' + fontname + '", "' + fontname + '", "400", "normal");\r\n', cb);
                    }
                    c_fontname = fontname;
                }
            }
        })
    }
}
function cb() { }


// Следим за файлами
function watchFiles(params) {
    gulp.watch([path.watch.html], html),
        gulp.watch([path.watch.css], css),
        gulp.watch([path.watch.js], js)
    gulp.watch([path.watch.img], images)
}

let build = gulp.series(deleteFolderDist, gulp.parallel(js, css, html, images, livefonts,video), fontsStyle)
let watch = gulp.parallel(build, watchFiles, synchro);

exports.fontsStyle = fontsStyle;
exports.livefonts = livefonts;
exports.images = images;
exports.js = js;
exports.video = video;
exports.css = css;
exports.build = build;
exports.html = html;
exports.watch = watch;
exports.default = watch;

Answer 1

Resolved the issue. The problem was browser-sync. Having opened the console, I suddenly noticed that this plugin began to swear at an error in the web socket. The error appeared and then disappeared. Previously, I did not observe anything like this in the console at work. I completely removed the plugin from the project and reinstalled it, everything worked. There are no more delays in compilation.

Answer 2

I have experienced delays of this kind either at the first start or after a long downtime.
The sound at the same time was so characteristic ... It turned out that the HDD was dying. Changed to SSD - everything flies.
In parallel, I bought 16GB of RAM, if it's an upgrade, but it hardly matters.

Answer 3

see also microsoft lumia 640. Not a bad option for your money.