javascript - Gulp - 在子文件夹中编译 scss 文件

Question

我有运行 gulp 服务器的主文件夹，它包含带有单独文件的项目。我也想让 gulp 监视子文件夹并为其他项目编译 scss 文件，而不仅仅是当前正在运行的项目。我为子文件夹添加“watch”，当我更改子文件夹中的 scss 时，它显示“injected: main.css”，但不会更改“main.css”。

我的文件夹结构:

BASE/scss
    /projects/project1/scss
             /project2/scss
             /projects3/scss

我想基本上可以在 BASE 文件夹上运行 gulp，并在上面显示的所有 scss 文件夹中分别观察和编译所有 .scss 文件 - 对于子文件夹中的基础文件夹和项目。

如何为子文件夹制作 scss -> css 编译？

gulp.task('sass', function () {
    return gulp.src('scss/*.scss')
        .pipe(sass().on('error', sass.logError))
          .pipe(autoprefixer('last 10 versions', '>0.5%'))
        .pipe(gulp.dest('css/'))
        .pipe(browserSync.stream());
});


gulp.task('serve', ['sass'], function () {
    browserSync.init({
        server: ".",
        notify: {
            styles: {
                top: 'auto',
                bottom: '0'
            }
        }
    });

    gulp.watch('scss/*.scss', ['sass']); // main folder
    gulp.watch('./projects/**/scss/*.scss', ['sass']); // added for subfolders, 
   // detects changes in files but doesn't making css output
        });

Answer 1

您所要求的可能意味着很多事情。因此，我将从描述您的 gulp 任务告诉我您正在做什么开始:

您的 gulp 任务将监视立即在 BASE/scss/ 下找到的 .scss 文件的任何更改。以及在任何名为 scss/ 的目录下立即找到的 .scss 文件的更改其中目录是 BASE/projects/ 的子目录(递归) .当检测到这些文件中的任何一个发生更改时，您的“sass”任务将运行，只编译立即在 BASE/scss/ 下找到的 .scss 文件。 (非递归)。它将编译后的 .css 放在 BASE/css/ 中.它不会编译在 BASE/projects/ 下找到的任何文件.

这意味着在 BASE/projects 下找到的任何 .scss 文件除非是@import，否则不会被编译由紧接在 BASE/scss/ 下的文件编辑.

我遇到的第一个问题是您向 gulp.src 提供的内容.看起来像 gulp.src('scss/*.scss')仅包括直接在 BASE/scss/ 下找到的 .scss 文件.

您可以包含BASE/PROJECTS 下的文件通过将其添加到 gulp.src使用调用“sass”任务

gulp.src([
    'scss/*.scss',
    './projects/**/scss/*.scss'
])

根据您的“sass”任务和您描述的目录结构，我重新创建了这个场景。此参数为 gulp.src使用 gulp v3.9.1 完美运行。

我的下一个问题是 main.css 是什么？ ？我不希望有一个名为 main.css 的文件输出到BASE/css/除非在 BASE/scss/main.scss 处有文件.

如果所有这些都有效(就像在我的测试中所做的那样)并且您仍然没有看到正在编译的正确文件，则还有其他选项。

您可能希望扩展您的 glob 模式以递归地匹配文件。这可以通过以下模式完成

gulp.src([
    'scss/**/*.scss',
    './projects/**/scss/**/*.scss'
])

gulp.watch('scss/**/*.scss', ['sass']); // main folder
gulp.watch('./projects/**/scss/**/*.scss', ['sass']);

**/*.scss globs 递归地匹配目录下的所有 .scss 文件。 *.scss仅匹配目录下的 .scss 文件。

如果一切都失败了，我建议将编译问题隔离在 gulp.watch 之外.剔除所有无关代码并逐行构建功能以确保您获得适当的结果。