Question

今天我迁移到 Gulp 4 ，但我无法让 watch 功能正常工作。

// Watch
gulp.task('watch', gulp.series('typescript', 'sass', 'browserSync', function(){
  gulp.watch('./app/styles/**/*.scss', gulp.series('sass'));
  gulp.watch('app/scripts/**/*.ts', gulp.series('typescript'));
  gulp.watch('./app/*.html', browserSync.reload);
}));

typescript，sass，browserSync将会运行，但 watch 不会对文件更改做出反应。

Answer 1

我只是遇到了同样的问题。实际上，您在browserSync gulp任务中没有对初始化的watch的引用。不要将browserSync.init函数放在单独的browserSync gulp任务中，而是将其移到watch任务内部，它应该可以工作。希望这会有所帮助！

示例：

gulp.task('watch', gulp.series(function (){
  browserSync.init({
    proxy:"http://localhost:8888",
    injectChanges: true,
    plugins: ["bs-html-injector?files[]=*.html"]
  });
  var html = gulp.watch('development/index.html');
  html.on('change', function(path, stats) {
    console.log('you changed the html');
    browserSync.notify("Compiling, please wait!");
    browserSync.reload("index.html");
  })
  var js = gulp.watch('development/**/*.js');
  js.on('change', function(path, stats) {
    console.log('you changed the js');
    browserSync.notify("Compiling, please wait!");
    browserSync.reload();
  })
  var css = gulp.watch('development/**/*.css');
  css.on('change', function(path, stats) {
    console.log('you changed the css');
    browserSync.notify("Injecting CSS!");
    browserSync.reload("*.css");
  })
}));

Answer 2

将ABC 8 0.296296296 (8/27) MNO 3 0.111111111 (3/27) BB 2 0.074074074 (2/27) VVC 7 0.259259259 (7/27) ZZZ 2 0.074074074 (2/27) AAB 5 0.185185185 (5/27)更改为绝对gulp.watch('app/scripts/**/*.ts', gulp.series('typescript'));

此外，我通常会根据任务使用此语法。

gulp.watch('./app/scripts/**/*.ts', gulp.series('typescript'));

Answer 3

我也遇到了一些问题，我发现了这个here，这是我的gulpfile，用于编译scss并观看scss文件，并使用自动前缀将其连接并编译到main.min.css中。

var gulp = require('gulp'),
    concat  = require('gulp-concat'),
    autoprefixer    = require('gulp-autoprefixer'),
    sass = require('gulp-sass');

//task para o sass

var paths = {
  styles: {
    src: 'scss/**/*.scss',
    dest: 'css'
  }
};

function styles() {
  return gulp
    .src(paths.styles.src, {
      sourcemaps: true
    })
  .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
  .pipe(concat('main.min.css'))
  .pipe(autoprefixer({
    browser: ['last 2 version', '> 5%'],
    cascade: false
  }))
  .pipe(gulp.dest(paths.styles.dest));
}

function watch() {
  gulp.watch(paths.styles.src, styles);
}

var build = gulp.parallel(styles, watch);
gulp.task(build);
gulp.task('default', build);

我认为在gulp v4上，您需要使用 gulp.parallel 。我想深入了解新版本。

Gulp 4 - 注意不要看变化

3 个答案: