Блог

У меня есть проект, использующий Gulp и SASS, и когда я запускаю gulp watch , он успешно выполняет первое изменение без каких-либо проблем.

Проблема возникает, когда я вношу какие-либо дальнейшие изменения — они, похоже, не регистрируются и, по-видимому, игнорируются.

Вот мой Gulpfile.js код:

 var theme_name = 'project-theme';

var gulp    = require('gulp'),
    cleanCSS = require('gulp-clean-css'),
    sass    = require('gulp-sass'),
    concat  = require('gulp-concat'),
    uglify  = require('gulp-uglify'),
    rename  = require('gulp-rename');

var paths = {
  styles: {
    src: 'wp-content/themes/'   theme_name   '/gulp/sass/theme.scss',
    folder: 'wp-content/themes/'   theme_name   '/gulp/sass/*.scss',
    dest: 'wp-content/themes/'   theme_name   '/assets/css/'
  },
  scripts: {
    src: 'wp-content/themes/'   theme_name   '/gulp/jquery/*.js',
    dest: 'wp-content/themes/'   theme_name   '/assets/js/'
  }
};

gulp.task('styles', function() {
  return gulp
    .src(paths.styles.src, {
      sourcemaps: true
    })
    .pipe(sass())
    .pipe(cleanCSS())
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
      }))
    .pipe(gulp.dest(paths.styles.dest));
});

gulp.task('scripts', function() {
  return gulp
    .src(paths.scripts.src, {
        sourcemaps: true
    })
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(paths.scripts.dest));
});

gulp.task('watch', function() {
  gulp.watch(paths.scripts.src, gulp.series('scripts'));
  gulp.watch(paths.styles.folder, gulp.series('styles'));
});

gulp.task('default', gulp.parallel('styles', 'scripts', 'watch'));
  

Я просмотрел другие подобные вопросы о переполнении стека, и они не принесли мне никакого успеха. Любая помощь будет оценена.

Я нашел решение. Теперь я понимаю, что Gulp не знает, что задача завершена, поэтому игнорирует все дальнейшие изменения.

Чтобы исправить это, я изменил строки 48 и 49 на это:

 gulp.watch(paths.styles.folder).on('change',gulp.series('styles'));
gulp.watch(paths.scripts.src).on('change', gulp.series('scripts'));
  

Все дополнительные изменения теперь зарегистрированы gulp watch .

Надеюсь, это поможет кому-либо с подобной проблемой.