Question

我有一个使用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'));

我已经查看了关于Stack Overflow的其他类似问题，但它们并没有给我带来任何成功。任何帮助将不胜感激。

Answer 1

我找到了解决方案。我现在了解到的是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注册。

希望这对遇到类似问题的人有帮助。

Gulp手表运行一次然后失败

1 个答案: