Gulp Watch 未检测到 SASS SCSS 文件夹中的更改答案

【问题标题】：Gulp Watch doesn't detect changing in SASS SCSS folderGulp Watch 未检测到 SASS SCSS 文件夹中的更改
【发布时间】：2019-08-28 14:46:08
【问题描述】：

我第一次设置 Gulp 使用 NanoCSS 和 gulp-css 将 SCSS 编译为 CSS。我创建了一个成功编译 SCSS 并缩小 CSS 的 do-sass。但是，当我将它放在监视任务中时，它不起作用。如果我更改任何 SCSS 文件，do-sass 命令不会运行。谁能告诉我我做错了什么？

const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');


gulp.task('sass', function(){
  return gulp.src('scss/styles.scss')
    .pipe(sass())
    .pipe(gulp.dest('./'))
});

// Minifys .css and reload browser.
gulp.task('mini-css', function() {
    return gulp.src('styles.css')
    .pipe(cssnano())
    .pipe(gulp.dest('./'));
});

// Compile and minify css.
gulp.task('do-sass', gulp.series('sass', 'mini-css'));


gulp.task('watch', function(){
  gulp.watch('scss/*/.scss', gulp.series('do-sass')); 
});

【问题讨论】：

也许您的watch 路径不正确？ scss/*/.scss 让我相信 gulp 会查找嵌套的 SCSS 文件，而不是根目录中的任何文件。如果要定位任何 SCSS 文件，则需要使用 scss/**/*.scss
你的目录结构是什么？为什么要收看scss/*/.scss？这应该是scss/*.scss吗？
正如@terry 提到的，我相信它应该是'scss/**/*.scss'
@JackBashford 目前它只是一个名为 scss 的文件夹。一个测试文件即可完成所有设置
很高兴我能帮上忙。我已将我的评论改写为答案，并附有一些额外的解释:)

标签： javascript npm gulp

【解决方案1】：

您的监视任务使用的 glob 模式可能不正确：scss/*/.scss 不会查找您想要的 SCSS 文件，因为它会尝试更深入地遍历一个目录并查找名为 .scss 的文件（没有任何文件名，只是扩展名）。

你想要的是使用double-star 语法，如果你想全局嵌套在任何级别的任何 SCSS 文件：

scss/**/*.scss

因此，如果您这样更新监视任务，它应该可以工作：

gulp.task('watch', function(){
  gulp.watch('scss/**/*.scss', gulp.series('do-sass')); 
});

【讨论】：