Gulp разгоняет процессор

Question

При первом изменении кода с открытым локальным хостом страница, которую я редактирую, начинает мерцать, а также разгоняется оперативная память и цп. В диспетчере задач показано, что их грузит Node.js: Server-side JavaScript Проблема в сборке или в чём-то другом?

const gulp = require('gulp');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const cleancss = require('gulp-clean-css');
const minijs = require('gulp-minifier');
const del = require('del');
const sourcemaps = require('gulp-sourcemaps');
const less = require('gulp-less');
const imagemin = require('gulp-imagemin');
const browserSync = require('browser-sync').create();

const styleFiles = [
    './css/style.css'
]
const jsFiles = [
    './js/burger.js',
    './js/script.js',
    './js/svg.js'
]
const htmlFiles = [
    './*.html'
]

//css
function styles() {
    return gulp.src(styleFiles)
        .pipe(sourcemaps.init())
        .pipe(less())
        .pipe(concat('newStyle.css'))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(cleancss({
            level: 2
        }))
        .pipe(sourcemaps.write('./css/'))
        .pipe(gulp.dest('./css/'))
        .pipe(browserSync.stream());
}
//js
function scripts() {
    return gulp.src(jsFiles)
        .pipe(concat('newScript.js'))
        .pipe(minijs({
            minify: true,
            minifyJS: {
                sourceMap: true
            },
            getKeptComment: function (content, filePath) {
                var m = content.match(/\/\*![\s\S]*?\*\//img);
                return m && m.join('\n') + '\n' || '';
            }
        }))
        .pipe(gulp.dest('./js/'))
        .pipe(browserSync.stream());
}
//images 
function imgcompress() {
    return gulp.src('./img/**')
        .pipe(imagemin({
            progressive: true
        }))
        .pipe(gulp.dest('./img/'))
}
//del
function cleanstyle() {
    return del(['./css/*'])
}
function cleanjs() {
    return del(['./js/*'])
}
function cleanimg() {
    return del(['./img/*'])
}
//watch 
function watch() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
    gulp.watch('./img/**', imgcompress)
    gulp.watch('./css/**/*.css', styles)
    gulp.watch('./css/**/*.less', styles)
    gulp.watch('./js/**/*.js', scripts)
    gulp.watch("./*.html").on('change', browserSync.reload)
}

gulp.task('styles', styles);
gulp.task('scripts', scripts);
gulp.task('img', imgcompress);
gulp.task('clean', gulp.series(cleanstyle, cleanjs, cleanimg));
gulp.task('watch', watch);
gulp.task('build', gulp.parallel(styles, scripts, imgcompress)), gulp.series(gulp.series(cleanstyle, cleanjs, cleanimg));
gulp.task('default', gulp.series('build', 'watch'));

Answer 1

У вас код оформлен с ошибками.

Во первых, если посмотреть на эту строку и проанализировать скобки, убрав мешуру

gulp.task('build', gulp.parallel(styles, scripts, imgcompress)), gulp.series(gulp.series(cleanstyle, cleanjs, cleanimg));

то это выражение будет выглядеть следующим образом (внимательно присмотритесь к скобкам):

gulp.task('build', gulp.parallel(...)), gulp.series(gulp.series(...));

Следовательно из таска build выполняется только это выражение gulp.parallel(...), далее скобка закрывается и уже вне таска build находится оператор запятая и выражение gulp.series(gulp.series(...)) которое находится в глобальном контексте вашего gulp-файла. Ошибки не происходит, потому-что в JavaScript есть такое выражение как оператор запятая

Во вторых, выражение gulp.series(gulp.series()) - это масло масляное.

В третьих, не проще было бы очистку оформить одной функцией?

function clean() {
    return del(['./css/*', './js/*', './img/*']);
}

В четвертых, почему вы очищаете результат после зборки? Не правильней было бы сначало выполнить очистку, а затем выполнить сборку?

gulp.task('build', gulp.series(clean, gulp.parallel(styles, scripts, imgcompress)));

Для чистоты кода, можно было бы использовать доп. плагин gulp-load-plugins

// подключение
const plugins = require('gulp-load-plugins')();

// использование
plugins.concat()
plugins.autoprefixer()
plugins.cleanCss()
plugins.minifier()
plugins.sourcemaps()
plugins.less()
plugins.imagemin()

Ну и напоследок. Хорошим тоном принято сборку выполнять не в корень, как у вас, а в отдельный каталог, например:

// для css/js/img и т.д.
.pipe(gulp.dest('build/css'))
.pipe(gulp.dest('build/img'))
.pipe(gulp.dest('build/js'))

// для BrowserSync
browserSync.init({
  server: {
    baseDir: "build"
  }
});

Посмотрите как здесь оформлен код

БЛОГ НА HUSL

Gulp разгоняет процессор

Ответы (1 шт):