Появляются buffered 2 events в gulp 3,браузер не прогружает иногда изменения,хочу обновиться к gulp4,как правильно прописать код,чтобы gulp4 работал?

Question

[Юра Сторчака]

Появляются buffered 2 events в gulp3,браузер не прогружает иногда изменения,хочу обновиться к gulp4,как правильно прописать код,чтобы gulp4 работал?


бывает есть buffered 2 events , и браузер не перезагружается


обновляю с gulp 3 на gulp 4 по видео


то что в видео инструкция, но мой код по структуре отличается от того , что в видео


то что у меня


код gulp 3 , который сейчас у меня


я в JavaScript слабо ориентируюсь, подскажите пожалуйста как правильно прописать код под gulp4

Comments

[Юра Сторчака]

[Browsersync] Reloading Browsers... (buffered 2 events) реально ли вылечить в GULP ? , при этом я так понимаю из-за этого не всегда обновляется браузер, и я не вижу реально изменений
[Photo]
https://codepen.io/freelancetesting/pen/abzJQMV
вот мой gulp

[Рома Зварич]

Юра Сторчака , просьба дооформить вопрос. Половины содержимого не видно.

[Рома Зварич]

Юра Сторчака, вставьте код Gulp-файла в вопрос с помощью блока кода JavaScript

[Юра Сторчака]

Рома Зварич, https://codepen.io/freelancetesting/pen/abzJQMV
вот мой gulp

Answer 1

[Рома Зварич]

Пробуйте

Код Gulp-файла

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var less = require('gulp-less');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var watch = require('gulp-watch');
var fileinclude = require('gulp-file-include');

gulp.task('styles', function() {
  return gulp.src('./app/less/main.less')
    .pipe(plumber({
      errorHandler: notify.onError(function(err) {
        return {
          title: 'Styles',
          sound: false,
          message: err.message
        }
      })
    }))
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(autoprefixer({
      browsers: ['last 6 versions'],
      cascade: false
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./app/css'))
    .pipe(browserSync.stream());
});

gulp.task('html', function() {
  return gulp.src('./app/html/*.html')
    .pipe(plumber({
      errorHandler: notify.onError(function(err) {
        return {
          title: 'HTML include',
          sound: false,
          message: err.message
        }
      })
    }))
    .pipe(fileinclude({
      prefix: '@@'
    }))
    .pipe(gulp.dest('./app/'))
});

gulp.task('server', gulp.series('styles', 'html', function() {
  browserSync.init({
    server: {
      baseDir: './app'
    }
  })

  gulp.watch(['./app/**/*.html', './app/**/*.js', './app/img/*.*']).on('change', browserSync.reload);
  gulp.watch('./app/less/**/*.less', gulp.series('styles'));
  gulp.watch('./app/html/**/*.html', gulp.series('html'));
}))

gulp.task('default', gulp.series('server'));

Comments

[Юра Сторчака]

Спасибо, я попробую , подскажите пожалуйста в двух словах что именно не срабатывало , из-за порта , он был иногда занят ?

[Рома Зварич]

Юра Сторчака, сравните код. Там определённые вещи переписаны под синтаксис нового Gulp 4.

P.S. Если ответ поможет, не забудьте пометить решением.
Потратил время всё же

[Юра Сторчака]

появилась ошибка

Юра@DESKTOP-BRVPDRG MINGW64 /f/create site/verstka/create pdf5/test/Test gulp/14.11.2019
$ gulp
F:\create site\verstka\create pdf5\test\Test gulp\14.11.2019\gulpfile.js:50
gulp.task('server', gulp.series('styles', 'html', function() {
^

TypeError: gulp.series is not a function
at Object. (F:\create site\verstka\create pdf5\test\Test gulp\14.11.2019\gulpfile.js:50:26)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at execute (C:\Users\Юра\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^3.7.0\index.js:28:18)
at Liftoff.handleArguments (C:\Users\Юра\AppData\Roaming\npm\node_modules\gulp-cli\index.js:201:24)

Юра@DESKTOP-BRVPDRG MINGW64 /f/create site/verstka/create pdf5/test/Test gulp/14.11.2019
$

пишет ошибку , я так понимаю мне еще нужно к gulp 4 обновиться по npm ?

[Рома Зварич]

Юра Сторчака,

я так понимаю мне еще нужно к gulp 4 обновиться по npm ?

Ну да.
Судя по Вашему вопросу, я думал, что он уже обновлён

[Юра Сторчака]

Рома Зварич, нет , еще не обновлял , если я в тестовой папке обновлю , в основой рабочей папке останеться старый gulp 3 ?

[Юра Сторчака]

Рома Зварич, Я отметил решенным , хотя по факту еще ошибка, и я если честно побаиваюсь обновляться , так как вдруг что-то пойдет не так , и я потеряю хоть как-то рабочий галп 3

[Рома Зварич]

Юра Сторчака, вы просили код, работающий под gulp 4. Вы его получили. Что делать дальше - решать Вам