Почему gulp.watch используется только 1 раз?

Question

[TSergey93]

Добрый вечер. Когда в последний раз я использовал Gulp, то была его третья версия. Сейчас же скачал Gulp 4, создал автоматизацию и ничего не работало. Подправил код (добавил gulp.series) и, вроде бы, всё заработало. Но проблема в том, что gulp.watch срабатывает лишь единожды, а повторное изменение файла больше не вызывает task. Другими словами, запустил watcher, внёс изменения в файл, сохранил, всё обновилось, внёс ещё раз изменения и ничего не происходит, хотя watcher активен. У меня в task висит 3 watcher, это на jade, sass и js. описанные выше действия относится к каждому типу файла, т.е., если я изменил фал jade, watcher заметит изменения и больше не будет работать с данным типом файлов, но я могу внести изменения в js, например, но тоже только 1 раз. Подскажите что нужно исправить, ведь в 3 версии всё работало адекватно, а в Node.js я не шибко силён.

Вот фрагменты тасков:

gulp.task('jade', function() {
gulp.src(['src/jade/*.jade'])
.pipe(plumber())
.pipe(jade())
.pipe(gulp.dest('build/'))
.pipe(server.reload({stream: true}));
});

gulp.task('style', function() {
gulp.src(['src/sass/*.scss', '!src/sass/mixins.scss', '!src/sass/normalize.scss', '!src/sass/variable.scss'])
.pipe(plumber())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(postcss([
autoprefixer(
{browsers: [
"last 1 version",
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Opera versions",
"last 2 Edge versions"],
grid: true
})
]))
.pipe(gcmq())
.pipe(minify())
.pipe(gulp.dest('build/css'))
.pipe(server.reload({stream: true}));
});

gulp.task('script', function() {
gulp.src('src/js/*.js')
.pipe(plumber())
.pipe(jsmin())
.pipe(gulp.dest('build/js/'))
.pipe(server.reload({stream: true}));
});

gulp.task('hash', function() {
gulp.src('build/index.html')
.pipe(hash())
.pipe(gulp.dest('build'));
});

gulp.task('watcher', function() {
server.init({
server: 'build'
});
gulp.watch('src/sass/**/*.scss', gulp.series('style', 'hash'));
gulp.watch('src/**/*.jade', gulp.series('jade', 'hash'));
gulp.watch('src/js/*.js', gulp.series('script', 'hash'));
});

Comments

[alex]

у вас таски ничего не возвращают, поэтому галп думает что таска ещё выполняется. Нужно возвращать поток либо вызывать колбек, который передается аргументом в функцию таска

[TSergey93]

Alex, А можете наглядно продемонстрировать как это сделать? Как я уже писал, я не шибко хорошо сейчас в Node.js разбираюсь, да и с английским не очень :( я всё делал по примеру с видео, но с 4 Gulp'ом мне русскоязычные не встречались, по крайней мере с подобным кодом...

[alex]

TSergey93,

мне русскоязычные не встречались

а не надо рускоязычные искать

английским не очень

это плохо

Answer 1

[alex]

function compileJade(done) {
  gulp.src('src/jade/*.jade')
    .pipe(plumber())
    .pipe(jade())
    .pipe(gulp.dest('build/'))
    .pipe(server.reload({ stream: true }));
  
  
  done()
}

function compileScss(done) {
  gulp.src([
    'src/sass/*.scss',
    '!src/sass/mixins.scss',
    '!src/sass/normalize.scss',
    '!src/sass/variable.scss'
  ])
    .pipe(plumber())
    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(postcss([
      autoprefixer({
        browsers: [
          "last 1 version",
          "last 2 Chrome versions",
          "last 2 Firefox versions",
          "last 2 Opera versions",
          "last 2 Edge versions"
        ],
        grid: true
      })
    ]))
    .pipe(gcmq())
    .pipe(minify())
    .pipe(gulp.dest('build/css'))
    .pipe(server.reload({ stream: true }));
  
  
  done()
}

function compileScripts(done) {
  gulp.src('src/js/*.js')
    .pipe(plumber())
    .pipe(jsmin())
    .pipe(gulp.dest('build/js/'))
    .pipe(server.reload({ stream: true }));
  
  
  done()
}

function makeHash(done) {
  gulp.src('build/index.html')
    .pipe(hash())
    .pipe(gulp.dest('build'));
  
  
  done()
}

function watcher(done) {
  server.init({
    server: 'build'
  });
  
  gulp.watch('src/sass/**/*.scss', gulp.series(compileScss, makeHash));
  gulp.watch('src/**/*.jade', gulp.series(compileJade, makeHash));
  gulp.watch('src/js/*.js', gulp.series(compileScripts, makeHash));
  
  
  done()
}

module.exports = {
  default: watcher,
  watcher,
  build: gulp.series(
    compileJade,
    compileScss,
    compileScripts,
    makeHash
  ),
  jade: compileJade,
  style: compileScss,
  script: compileScripts,
  hash: makeHash
}

Comments

[TSergey93]

Благодарю! Посмотрел на этот код, решил попробовать в свой подобавлять done и всё заработало, как по маслу!

[KarolinaS]

Спасибо огромное! Разбираюсь с Gulp, видеоурок с курсов был по старой версии, для того, чтобы все там исправить много всего пришлось ковырять, так как только начинаю изучать. В итоге уже отчаялась, пока не наткнулась на этот код, он сделал мой день и ночь) Все получилось, все работает как надо. Спасибо за помощь!

[alex]

KarolinaS, ;)