Appear 2 events buffered in gulp 3,the browser does not program sometimes changes,I want to upgrade to a gulp4 how to write code to gulp4 worked?

Appear 2 events buffered in gulp3 browser program sometimes changes,I want to upgrade to a gulp4 how to write code to gulp4 worked?


is there 2 events buffered , and the browser does not restart


update gulp on gulp 3 4 video


the fact that video tutorial, but my code structure is different from that in the video


what I have


code gulp 3 , which now I have


in JavaScript I have little guidance, please tell me how to register the code under gulp4
April 3rd 20 at 18:52
1 answer
April 3rd 20 at 18:54
Solution
Try

Code Gulp file

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'));

Thanks, I'll try , please tell me in a nutshell what didn't work , because of the port , he was sometimes busy ? - Trent_Nienow commented on April 3rd 20 at 18:57
@Trent_Nienow, compare the code. There are certain things rewritten for the new syntax in Gulp 4.

PS If the answer helps, don't forget to mark solution.
Spent time all the same - crystal_Koss33 commented on April 3rd 20 at 19:00
5dfd391e24834148150124.png

the error occurred

Yura@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)

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

writes error , I understand I still have to gulp 4 updated npm ? - Trent_Nienow commented on April 3rd 20 at 19:03
@Trent_Nienow,

I understand I still have to gulp 4 updated npm ?

Well, Yes.
Judging from Your question, I thought it's already updated - crystal_Koss33 commented on April 3rd 20 at 19:06
@crystal_Koss33, no , I did not upgrade , if I test the folder will update , on the basis of the working directory remains old gulp 3 ? - Trent_Nienow commented on April 3rd 20 at 19:09
@crystal_Koss33I have marked resolved , although in fact another bug and I'm honestly a little afraid to upgrade , because suddenly something goes wrong and I lose somehow work Galp 3 - Trent_Nienow commented on April 3rd 20 at 19:12
@Trent_Nienow, you asked for code running gulp 4. You got it. What to do next - You decide - crystal_Koss33 commented on April 3rd 20 at 19:15

Find more questions by tags CSSSassLessnpmGulp.js