T
T
tory_kuzya2017-09-18 16:07:42
gulp.js
tory_kuzya, 2017-09-18 16:07:42

Gulp + BrowserSync how to optimize Gulpfile.js performance?

Gulp + BrowserSync how to optimize Gulpfile.js to avoid multiple page reloads and complete copying of immutable files?
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'))
);

Those. I change the class name of the block in Index.html and get:
[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
What to change in gulpfile? Can gulp.task('watch' be specified somehow?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question