Answer the question
In order to leave comments, you need to log in
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'))
);
[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
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question