V
V
Vaculya2022-01-14 20:41:28
gulp.js
Vaculya, 2022-01-14 20:41:28

Reloading Browsers... (buffered 2 events) How to fix this? And how does this affect the work, please explain?

const {src, dest, watch, parallel, series}  = require('gulp');

const scss        = require('gulp-sass')(require('sass'));
const concat      = require('gulp-concat');
const browserSync = require('browser-sync').create();
const uglify      = require('gulp-uglify-es').default;
const autoprefixer = require('gulp-autoprefixer');
const imagemin     = require('gulp-imagemin');
const del          = require('del');



function styles(){
    return src('src/scss/style.scss')
        .pipe(scss({outputStyle: 'compressed'}))
        .pipe(concat('style.min.css'))
        .pipe(autoprefixer({
            overrideBrowserslist:['last 10 version']
        }))
        .pipe(dest('src/css'))
        .pipe(browserSync.stream())
}

function browsersync(){
    browserSync.init({
        server:{
            baseDir:"./src"
        }
    });
}

function scripts(){
    return src ([
        'node_modules/jquery/dist/jquery.js',
        'src/js/main.js'
    ])
        .pipe(concat('main.min.js'))
        .pipe(uglify())
        .pipe(dest('src/js'))
        .pipe(browserSync.stream())
}

function images(){
    return src('src/images/**/*')
        .pipe(imagemin(
            [
                imagemin.gifsicle({interlaced: true}),
                imagemin.mozjpeg({quality: 75, progressive: true}),
                imagemin.optipng({optimizationLevel: 5}),
                imagemin.svgo({
                    plugins: [
                        {removeViewBox: true},
                        {cleanupIDs: false}
                    ]
                })
            ]
        ))
        .pipe(dest('dist/images'))
}

function build(){
    return src([
        'src/css/style.min.css',
        'src/fonts/**/*',
        'src/js/main.min.js',
        'src/*.html'
    ],{base: 'src'})
        .pipe(dest('dist'))
}

function watching(){
    watch(['src/scss/**/*.scss'], styles);
    watch(['src/js/main.js', '!src/js/main.min.js'],scripts);
    watch('src/*.html').on('change', browserSync.reload);
}

function cleanDist(){
    return del('dist')
}

exports.styles = styles;
exports.watching = watching;
exports.browsersync = browsersync;
exports.scripts = scripts;
exports.images = images;
exports.cleanDist = cleanDist;


exports.build = series(cleanDist, images, build);
exports.default = parallel(styles, scripts, browsersync, watching);


Result:
[20:36:08] Starting 'default'...
[20:36:08] Starting 'styles'...
[20:36:08] Starting 'scripts'...
[20:36:08 ] Starting 'browsersync'...
[20:36:08] Starting 'watching'...
[Browsersync] Access URLs:
---------------------- ---------------
Local: localhost:3000
------------------------------ -------
UI: localhost:3001
UI External: localhost:3001
-------------------------------- -----
[Browsersync] Serving files from: ./src
[Browsersync] 1 file changed (style.min.css)
[20:36:10] Finished 'styles' after 2.75 s
[Browsersync] 1 file changed (main .min.js)
[20:36:11] Finished 'scripts' after 2.8 s
[Browsersync] Reloading Browsers... (buffered 2 events)

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