@Alex_mersvg

Почему компиляция происходит с задержкой?

Происходит задержка при компилировании файлов. То-есть: я меняю стили, консоль сообщает что процесс пошел, потом задержка секунд в 8-12, и потом сообщение что все успешно выполнилось:
[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

бывает так что нет задержек и целый день работаю нормально, но чаще есть задержки. Грешил вначале на галп, мол ошибся где-то в конфиге, но нет, конфиг без ошибок. так как собирает все как надо и как писал выше бывает что нет задержек. Бывало такое на слабом ноуте, но в этот раз на пк работаю, а тут процессор достаточно мощный. Может проблема в ноде или в системе? Кто сталкивался с таким?

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;
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
@Alex_mersvg Автор вопроса
Решил вопрос. Проблема была в browser-sync. Открыв консоль, вдруг заметил что этот плагин начал ругаться на ошибку в вебсокете. Ошибка то появлялась, то пропадала. Ранее не наблюдал в консоли подобного при работе. Удалил полностью плагин из проекта и установил заново, все заработало. Больше задержек в компиляции нет.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
SeaInside
@SeaInside
10 лет пилю все эти штуки
У меня бывали задержки такого толка либо при первом запуске, либо после долгого простоя.
Звук при этом был такой характерный... Оказалось, HDD был при смерти. Сменил на SSD - всё летает.
Параллельно оперативки докупил 16гб, коли уж апргрейд, но вряд ли это имеет значение.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы