@TSergey93

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

Добрый вечер. Когда в последний раз я использовал 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'));
});
  • Вопрос задан
  • 429 просмотров
Решения вопроса 1
potapchino
@potapchino
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
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы