Question

我有以下gulpfile：

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');

gulp.task('sass', () => {
  return gulp
    .src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(gulp.dest('../assets/css'))
.pipe(browserSync.stream());
});

gulp.task('js', () => {
  return gulp
    .src([
      'node_modules/bootstrap/dist/js/bootstrap.min.js',
      'node_modules/jquery/dist/jquery.min.js',
      'node_modules/popper.js/dist/umd/popper.min.js'
    ])
    .pipe(gulp.dest('../assets/js'))
    .pipe(browserSync.stream());
 });

gulp.task('serve', gulp.series('sass'), () => {
  browserSync.init({
    server: './src'
  });

  gulp.watch(
    ['node_modules/bootstrap/scss/bootstrap.min.scss',
    'src/scss/*.scss'],
    ['sass']);

  gulp.watch('../*.php').on('change', browserSync.reload);
});

gulp.task('default', gulp.series('js', 'serve'));

当我在终端中运行命令：gulp时，一切都很酷，但是启动后该过程完成了，所以我可以看到更改，但是如果我想查看每一次更改，我都需要再次运行该命令，因此可以会发生吗？

谢谢！

Answer 1

更改此：

gulp.watch(
   ['node_modules/bootstrap/scss/bootstrap.min.scss',
   'src/scss/*.scss'],

   ['sass']);

对此：

gulp.watch(
   ['node_modules/bootstrap/scss/bootstrap.min.scss',
   'src/scss/*.scss'],

   gulp.series('sass'));

在gulp4中，您不能使用['someTask']方法来调用任务。

gulp.task('serve', gulp.series('sass', (done) => {
  browserSync.init({
    server: './src'
  });

  gulp.watch(
    ['node_modules/bootstrap/scss/bootstrap.min.scss',
    'src/scss/*.scss'],
    gulp.series('sass'));

  gulp.watch('../*.php').on('change', browserSync.reload);
  done();

//  });   you had this
 }));   // needs to be this

我最终在代码中添加了done回调。但是您的代码停止的原因仅仅是上面的最后一行需要另一个括号。

启动后完成任务

1 个答案: