Суть такая, что есть один таск по сжатию картинок, когда я его добавляю в watch то все компилируется но watch останавливается после того как все сделал и не открывает браузер(browser-sync). Ошибок нет. Стоит только его убрать то watch нормально работает пока его не остановить и browser-sync срабатывает. Может я чего упустил? Вот код gulpfile.js
let gulp = require('gulp'),
gp = require('gulp-load-plugins')(),
imageop = require('gulp-image-optimization'),
pngquant = require('imagemin-pngquant'),
mozjpeg = require('imagemin-mozjpeg'),
imageminWebp = require('imagemin-webp'),
browserSync = require('browser-sync').create();
gulp.task('serve', function () {
browserSync.init({
server: {
baseDir: "./build"
}
});
});
// сжатие html
gulp.task('html', function () {
return gulp.src('dist/**/*.html')
.pipe(gp.changed('dist'))
.pipe(gp.htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest('build'))
.on('end', browserSync.reload);
});
// конвертация в css, добавление префиксов, сжатие, карта
gulp.task('sass', function () {
return gulp.src('dist/sass/**/*.+(sass|scss)')
.pipe(gp.changed('dist'))
.pipe(gp.sourcemaps.init())
.pipe(gp.sass())
.pipe(gp.autoprefixer({
browsers: ['last 10 versions']
}))
.on("error", gp.notify.onError({
message: "Error: <%= error.message %>",
title: "Error running something"
}))
.pipe(gp.csso())
.pipe(gp.sourcemaps.write())
.pipe(gulp.dest('build/css'))
.on('end', browserSync.reload);
});
// объединение библиотек в один сжатый файл
gulp.task('scripts-libs', function () {
return gulp.src(['node_modules/jquery/dist/jquery.min.js',
'node_modules/slick-carousel/slick/slick.min.js'
])
.pipe(gp.concat('libs.min.js'))
.pipe(gp.uglify())
.pipe(gulp.dest('build/js'))
.on('end', browserSync.reload);
});
// сжатие скриптов
gulp.task('scripts', function () {
return gulp.src('dist/scripts/**/*.js')
.pipe(gp.changed('dist'))
.pipe(gp.uglify())
.pipe(gulp.dest('build/js'))
.on('end', browserSync.reload);
});
// сжатие картинок
gulp.task('compress-img', function () {
gulp.src('dist/img/*')
.pipe(gp.imagemin({
interlaced: true,
progressive: true,
quality: '70-90',
optimizationLevel: 4,
svgoPlugins: [{
removeViewBox: true
}],
floyd: 1,
speed: 1,
use: [
pngquant(),
mozjpeg({
progressive: true
}),
imageminWebp({
method: 6,
})
],
verbose: true
}))
.pipe(gulp.dest('build/img'))
.pipe(gp.rename({
extname: '.webp',
suffix: "-webp",
}))
.pipe(gulp.dest('build/img/webp'))
});
// слежка за изменениями в sass, html, scripts, img
gulp.task('watch', function () {
gulp.watch('dist/**/*.html', gulp.series('html'));
gulp.watch('dist/sass/**/*.+(sass|scss)', gulp.series('sass'));
gulp.watch('dist/scripts/**/*.js', gulp.series('scripts'));
gulp.watch('dist/img/**/*', gulp.series('compress'));
});
gulp.task('default', gulp.series(
gulp.parallel('html', 'sass', 'scripts-libs', 'scripts', 'compress-img'),
gulp.parallel('watch', 'serve')
));
если в последних двух тасках сделать так:
gulp.task('watch', function () {
gulp.watch('dist/**/*.html', gulp.series('html'));
gulp.watch('dist/sass/**/*.+(sass|scss)', gulp.series('sass'));
gulp.watch('dist/scripts/**/*.js', gulp.series('scripts'));
//gulp.watch('dist/img/**/*', gulp.series('compress'));
});
gulp.task('default', gulp.series(
gulp.parallel('html', 'sass', 'scripts-libs', 'scripts'),
gulp.parallel('watch', 'serve')
));
то все работает