Answer the question
In order to leave comments, you need to log in
Gulp watch does not work completely after updating to version 4. How to fix?
After updating gulp to version 4, watch works in a strange way. After starting the project and changes, only js, scss are tracked, I run only pug, csss again, again only js, pug . And everything should be together js, scss, pug. Those. 3 watch is not working for some reason. I have 4 more watch for pictures I haven't checked it. I read a lot of things on Google, but I could not figure out what the matter was.
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const pug = require('gulp-pug');
const sass = require('gulp-sass')(require('sass'))
const spritesmith = require('gulp.spritesmith');
const rimraf = require('rimraf');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify-es').default;
const concat = require('gulp-concat')
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const notify = require("gulp-notify");
const cssnano = require('gulp-cssnano');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const svgSprite = require('gulp-svg-sprite');
const svgmin = require('gulp-svgmin');
const cheerio = require('gulp-cheerio');
const replace = require('gulp-replace');
const gulpif = require('gulp-if');
const cleanCSS = require('gulp-clean-css');
const gcmq = require('gulp-group-css-media-queries');
const babel = require('gulp-babel');
const include = require('gulp-include')
const isDev = (process.argv.indexOf('--dev') !== -1);
const isProd = !isDev;
/* -------- Server -------- */
gulp.task('server', function () {
browserSync.init({
server: {
port: 9000,
baseDir: "build"
}
});
gulp.watch('build/**/*').on('change', browserSync.reload);
});
/* ------------ Pug compile ------------- */
gulp.task('html', function () {
console.log('html task')
return gulp.src('source/template/pages/**/*.*')
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('build'))
});
/* ------------ Styles compile ------------- */
gulp.task('css', function () {
console.log('css task')
return gulp.src('source/styles/main.scss')
.pipe(gulpif(isDev, sourcemaps.init()))
.pipe(sass().on('error', sass.logError))
.pipe(gulpif(isProd, gcmq()))
.pipe(postcss([
autoprefixer({
cascade: false
})
]))
.pipe(gulpif(isProd, cleanCSS({ level: 2 })))
.pipe(gulpif(isDev, sourcemaps.write()))
.pipe(rename('main.min.css'))
.pipe(gulp.dest('build/css'));
});
/* ------------ js ------------- */
gulp.task('js', function () {
console.log('js task')
return gulp.src([
'source/js/main.js'
])
.pipe(include())
.pipe(gulpif(isDev, sourcemaps.init()))
.pipe(gulpif(isProd, babel({ presets: ['@babel/env'] })))
.pipe(concat('main.min.js'))
.pipe(gulpif(isProd, uglify()))
.pipe(gulpif(isDev, sourcemaps.write()))
.pipe(gulp.dest('build/js'));
});
/* ------------ libs ------------- */
gulp.task('libs', function () {
return gulp.src([
// './node_modules/svg4everybody/dist/svg4everybody.min.js',
'./node_modules/inputmask/dist/min/jquery.inputmask.bundle.min.js',
])
.pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
.pipe(concat('libs.min.js'))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'));
// return gulp.src([
// './node_modules/slick-carousel/slick/slick.css',
// ])
// .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
// .pipe(concat('libs.min.css'))
// .pipe(cssnano())
// .pipe(sourcemaps.write())
// .pipe(gulp.dest('build/css'));
});
/* ------------ Sprite png ------------- */
gulp.task('sprite-png', function (cb) {
const spriteData = gulp.src('source/images/icons/*.png').pipe(spritesmith({
imgName: 'sprite.png',
imgPath: '../images/sprite.png',
cssName: 'sprite.scss',
padding: 5
}));
spriteData.img.pipe(gulp.dest('build/images/'));
spriteData.css.pipe(gulp.dest('source/styles/global/'));
cb();
});
/* ------------ Sprite svg ------------- */
gulp.task('sprite-svg', function () {
return gulp.src('source/images/icons/*.svg')
// minify svg
.pipe(svgmin({
js2svg: {
pretty: true
}
}))
// remove all fill, style and stroke declarations in out shapes
.pipe(cheerio({
run: function ($) {
$('[fill]').removeAttr('fill');
$('[stroke]').removeAttr('stroke');
$('[style]').removeAttr('style');
$('style').remove();
},
parserOptions: { xmlMode: true }
}))
// cheerio plugin create unnecessary string '>', so replace it.
.pipe(replace('>', '>'))
// build svg sprite
.pipe(svgSprite({
mode: {
symbol: {
sprite: "../images/sprite.svg",
render: {
scss: {
dest: '../../source/styles/global/sprite_svg.scss',
template: "source/styles/global/_sprite_template_svg.scss"
}
}
}
}
}))
.pipe(gulp.dest('build/'));
});
/* ------------ Delete ------------- */
gulp.task('clean', function del(cb) {
return rimraf('build', cb);
});
gulp.task('clean-img', function (cb) {
return rimraf('build/images', cb);
})
/* ------------ Copy fonts ------------- */
gulp.task('copy:fonts', function () {
return gulp.src('./source/fonts/**/*.*')
.pipe(gulp.dest('build/fonts'));
});
/* ------------ Copy images ------------- */
gulp.task('copy:images', function () {
return gulp.src('./source/images/**/*.*')
.pipe(gulp.dest('build/images'));
});
/* ------------ Copy ------------- */
gulp.task('copy', gulp.parallel('copy:fonts', 'copy:images'));
/* ------------ Watchers ------------- */
gulp.task('watch', function () {
gulp.watch('source/template/**/*.pug', gulp.series('html'));
gulp.watch('source/styles/**/*.scss', gulp.series('css'));
gulp.watch('source/js/**/*.js', gulp.series('js'));
gulp.watch('source/images/*.*', gulp.series('copy:images'));
return;
});
/*------------- default -------------*/
gulp.task('default', gulp.series(
'clean',
gulp.parallel('sprite-png', 'sprite-svg', 'html'),
gulp.parallel('css', 'js', 'libs', 'copy'),
gulp.parallel('watch', 'server')
)
);
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