Question

我有运行gulp服务器的主文件夹，它包含带有单独文件的项目。我想制作gulp watch子文件夹并为其他项目编译scss文件，不仅适用于当前运行。我添加＆＃34;观看＆＃34;对于子文件夹，当我在子文件夹中更改scss时，它表示＆＃34;注入：main.css＆＃34;，但不会改变＆＃34; main.css＆＃34;。

我的文件夹结构：

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

我希望基本上可以在BASE文件夹上运行gulp并在上面显示的所有scss文件夹中单独监视和编译所有.scss文件 - 用于子文件夹和子文件夹中的项目。

如何制作该scss - ＆gt;子文件夹的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/的目录（recrusive）。如果检测到任何这些文件发生了变化，您的＃sa;＆＃39;将运行任务，仅编译在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电话中，然后将其添加到gulp.src([ 'scss/*.scss', './projects/**/scss/*.scss' ])下。任务使用

gulp.src

我已经重新创建了这个场景，因为你的＃sa;＆＃39;任务和您描述的目录结构。 main.css的这个参数完全可以使用gulp v3.9.1。

我的下一个问题是main.css是什么？我不希望将BASE/css/文件输出到BASE/scss/main.scss，除非gulp.src([ 'scss/**/*.scss', './projects/**/scss/**/*.scss' }) gulp.watch('scss/**/*.scss', ['sass']); // main folder gulp.watch('./projects/**/scss/**/*.scss', ['sass']);处有文件。

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

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

**/*.scss

*.scss globs以递归方式匹配目录下的所有.scss文件。 gulp.watch仅匹配目录下的.scss文件。

如果所有其他方法都失败了，我建议您在SQL> create or replace function "timestamp" (p_date in date) return date is 2 begin 3 return p_date; 4 end; 5 / Function created. SQL> select "timestamp"(current_Date) from dual; "TIMESTA -------- 11.01.18 SQL>之外隔离编译问题。删除所有无关代码并逐行构建功能，以确保您获得适当的结果。

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

1 个答案: