Sass 我如何修复不看文件的gulp watch

我使用gulp监视文件更改并编译我的SCS，但watch没有跟踪文件更改

我使用的是gulp sass，版本是4.0

const { src, dest, watch, series } = require('gulp');
const { sass } = require('gulp-sass');

function compileSass() {
 return src('app/assets/scss/main.scss')
 .pipe(sass())
 .pipe(dest('app/css'));
}

function start() {
  //compile and watch
  watch('app/assets/scss/**/*.scss', { events: 'change' }, function(compileSass) {
    // body omitted
    compileSass();
  });

}

exports.default = series(start);

---

不确定为什么您的任务没有包装在

gulp.task

中

尝试将此代码粘贴到您的

gulpfile.js

gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass'); // not { sass }

/** Transpile sass/scss to css */
gulp.task('compile-sass', () => {
  return gulp.src('app/assets/scss/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'));
});

/** Run the compile-sass task then set a watchers to app/assets/scss/**/*.scss */
gulp.task('watch', gulp.series(
  'compile-sass',
  (done) => {
    gulp.watch('app/assets/scss/**/*.scss')
      .on('change', gulp.series('compile-sass'))
    done()
  },
));

/** Default task */
gulp.task('default', gulp.series('watch'));

---

现在，您可以在终端中使用

gulp

运行它。

不确定为什么您的任务没有包装在

gulp.task

中

尝试将此代码粘贴到您的

gulpfile.js

gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass'); // not { sass }

/** Transpile sass/scss to css */
gulp.task('compile-sass', () => {
  return gulp.src('app/assets/scss/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'));
});

/** Run the compile-sass task then set a watchers to app/assets/scss/**/*.scss */
gulp.task('watch', gulp.series(
  'compile-sass',
  (done) => {
    gulp.watch('app/assets/scss/**/*.scss')
      .on('change', gulp.series('compile-sass'))
    done()
  },
));

/** Default task */
gulp.task('default', gulp.series('watch'));

现在，您可以在终端中使用

gulp

运行它。

尝试：

function start() {
  //compile and watch
  watch('app/assets/scss/**/*.scss', { events: 'change' }, function(cb) {
    // body omitted
    compileSass();
    cb();
  })
}

cb

是一个回调函数-只需将其保留为

cb

（它不需要存在于其他任何地方），并在任务中最后调用。

尝试：

function start() {
  //compile and watch
  watch('app/assets/scss/**/*.scss', { events: 'change' }, function(cb) {
    // body omitted
    compileSass();
    cb();
  })
}

---

cb

是一个回调函数-只需将其保持为

cb

（它不需要存在于其他任何地方），并在任务中被最后调用。

gulp4不需要使用gulp.task：事实上不建议使用。gulp4不需要使用gulp.task：事实上不建议使用它。