Gulp + BrowserSync как оптимизировать работу Gulpfile.js?

Question

[tory_kuzya]

Gulp + BrowserSync как оптимизировать работу Gulpfile.js, чтобы исключить множественные релоады страницы и полное копирование неизменяемых файлов?
gulpfile.js:

'use strict';

const gulp = require('gulp');
//const scss = require('gulp-scss');
const less = require('gulp-less');
const sourcemaps = require('gulp-sourcemaps');
const debug = require('gulp-debug');
const gulpIf = require('gulp-if');
const del = require('del');
const browserSync = require('browser-sync').create();
const notify = require('gulp-notify');
const cssnano = require('gulp-cssnano'); // Подключаем пакет для минификации CSS
const csso = require('gulp-csso');  //для минификации CSS
//const uncss = require('gulp-uncss');    //для оптимизации CSS файлов, анализирует HTML код и находит все неиспользуемые и продублированные стили
const concat = require('gulp-concat'); // Подключаем gulp-concat (для конкатенации файлов)
const combiner = require('stream-combiner2').obj;
const uglify = require('gulp-uglify');

const isDevelopment = !process.env.NODE_ENV || process.env.NODE_ENV == 'development';

gulp.task('styles', function() {

    return combiner(
        gulp.src(['frontend/styles/fonts.css','frontend/styles/main.css']),
        gulpIf(isDevelopment, sourcemaps.init()),
        //less(),
        //cssnano(),    //минимизируем
        concat('main.min.css'), // Собираем их в кучу в новом файле main.min.css
        // uncss({
        //     html: ['index.html']
        // }),
        csso({
            restructure: false,
            sourceMap: true,
            debug: true
        }),
        gulpIf(isDevelopment, sourcemaps.write()),
        gulp.dest('public/css')
    ).on('error', notify.onError());

});

gulp.task('librarys', function() {

    return combiner(
        gulp.src(['frontend/styles/lib/*.*']),
        gulpIf(isDevelopment, sourcemaps.init()),
        cssnano(),    //минимизируем
        concat('lib.min.css'), // Собираем их в кучу в новом файле lib.min.js
        gulpIf(isDevelopment, sourcemaps.write()),
        gulp.dest('public/css')
    ).on('error', notify.onError());

});

gulp.task('scripts', function() {

    return combiner(
        gulp.src(['frontend/assets/js/lib/*.js']),
        gulpIf(isDevelopment, sourcemaps.init()),
        uglify(),  //минимизируем
        concat('lib.min.js'), // Собираем их в кучу в новом файле lib.min.js
        gulpIf(isDevelopment, sourcemaps.write()),
        gulp.dest('public/js')
    ).on('error', notify.onError());

});

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

gulp.task('assets', function() {
    return combiner(
        gulp.src(['frontend/assets/**']),
        gulp.dest('public')
    ).on('error', notify.onError());
});


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

gulp.task('watch', function() {
    gulp.watch('frontend/styles/*.*', gulp.series('styles'));

    gulp.watch('frontend/styles/lib/*.*', gulp.series('librarys'));

    gulp.watch('frontend/assets/**/*.*', gulp.series('assets'));
});

gulp.task('serve', function() {
    browserSync.init({
        server: 'public',
        notify: false,
        reloadOnRestart: true,
        snippetOptions: {
            rule: {
                match: /<\/body>/i
            }
        },
        reloadDebounce: 2000
    });

    browserSync.watch('public/**/*.*').on('change', browserSync.stream({once: true}));
});

gulp.task('dev',
    gulp.series('build', gulp.parallel('watch', 'serve'))
);

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

Т.е. меняю я имя класса у блока в Index.html и получаю:

[15:57:11] Starting 'assets'...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] File event [change] : public\fonts\roboto-v16-cyrillic-ext_cyrillic_latin-300.svg
[Browsersync] File event [change] : public\fonts\roboto-v16-cyrillic-ext_cyrillic_latin-300.svg
...
[Browsersync] Reloading Browsers...
[Browsersync] File event [change] : public\img\check-in.png
[Browsersync] File event [change] : public\img\check-in.png
[Browsersync] File event [change] : public\img\doc1.png
[Browsersync] File event [change] : public\img\doc1.png
...
[Browsersync] File event [change] : public\img\trader.png
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] File event [change] : public\fonts\font-awesome\css\font-awesome.css
[Browsersync] File event [change] : public\fonts\font-awesome\css\font-awesome.min.css
[Browsersync] Reloading Browsers...
[Browsersync] File event [change] : public\fonts\font-awesome\fonts\fontawesome-webfont.svg
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[15:58:21] Finished 'assets' after 1.17 min

Finished 'assets' after 1.17 min
Что изменить в gulpfile? Может в gulp.task('watch' конкретизировать как-то?

Comments

[tory_kuzya]

Разбила таск assets на 3 (img, fonts, html). Запускаю каждый по отдельности, отрабатывает быстро. Но споткнулась на таске serve:

PS C:\openserver\domains\potokblue> gulp serve
[16:32:30] Using gulpfile C:\openserver\domains\potokblue\gulpfile.js
[16:32:30] Starting 'serve'...
[16:32:30] 'serve' errored after 17 ms
[16:32:30] TypeError: "listener" argument must be a function
    at _addListener (events.js:216:11)
    at FSWatcher.addListener (events.js:276:10)
    at C:\openserver\domains\potokblue\gulpfile.js:123:40
    at taskWrapper (C:\openserver\domains\node_modules\undertaker\lib\set-task.js:13:15)
    at bound (domain.js:280:14)
    at runBound (domain.js:293:12)
    at asyncRunner (C:\openserver\domains\node_modules\async-done\index.js:36:18)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)
    at Module.runMain (module.js:606:11)

[tory_kuzya]

Исправила таск serve :

gulp.task('serve', function() {
    browserSync.init({
        server: 'public'
    });

    browserSync.watch('public/**/*.*').on('change',browserSync.reload);
});

Ошибка ушла

Выполнила watch+serve
Результат: уже нет полного копирования всех файлов. Работает быстрее.

PS C:\openserver\domains\potokblue\public> gulp
[16:36:11] Working directory changed to C:\openserver\domains\potokblue
[16:36:12] Using gulpfile C:\openserver\domains\potokblue\gulpfile.js
[16:36:12] Starting 'default'...
[16:36:12] Starting 'watch'...
[16:36:12] Starting 'serve'...
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.114:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.114:3001
 --------------------------------------
[Browsersync] Serving files from: public
[16:36:23] Starting 'html'...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[16:36:24] Finished 'html' after 189 ms
[16:36:33] Starting 'html'...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[16:36:33] Finished 'html' after 238 ms
[Browsersync] Reloading Browsers...

Сама спросила, сама ответила.