Gulp watch не работает полностью после обновления на 4 версию. Как исправить?

Question

[Михаил Костиков]

После обновление gulp на 4 версию watch работает как то странно. После запуска проекта и изменений отслеживаются только js,scss снова запускаю только pug,csss, снова только js,pug . А должно все вместе js,scss,pug. Т.е. 3 watch уже почему то не работает. У меня еще 4 watch для картинок его не проверял. Прочитал много чего в гугле но так и не смог сам понять в чем дело.

gulpfile.js

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 '&gt;', so replace it.
    .pipe(replace('&gt;', '>'))
    // 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')


)
);

Comments

[Квазиморд Сидорович]

не знаю, у меня watch на 4 gulp работает как надо.

[Михаил Костиков]

Квазиморд Сидорович, Можешь прислать задачу watch и те задачи которые внутри нее? И версии пакетов. Я проверю у себя на новом проекте.

[Квазиморд Сидорович]

брал отсюда gulp-shablon и всё работает