Gulp - 在子文件夾中編譯 scss 文件

Question

我有運行 gulp 服務器的主文件夾，它包含具有單獨文件的項目。 我想制作 gulp watch 子文件夾並為其他項目編譯 scss 文件，而不僅僅是當前正在運行。 我為子文件夾添加了“監視”，當我更改子文件夾中的 scss 時，它會顯示“注入：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/下立即找到的BASE/scss/文件的任何更改，以及在任何名為scss/的目錄下立即找到的scss/文件的更改，其中該目錄是BASE/projects/的子目錄（遞歸） . 當檢測到這些文件中的任何一個發生更改時，您的“sass”任務將運行，僅編譯BASE/scss/下立即找到的BASE/scss/文件（非遞歸）。 它將編譯后的 .css 放在BASE/css/ 。 它不會編譯在BASE/projects/下找到的任何文件。

這意味着在BASE/projects下找到的任何 .scss 文件都不會被編譯，除非它被直接在BASE/scss/下找到的文件@import ed。

我覺得第一個問題是你提供給gulp.src 。 看起來gulp.src('scss/*.scss')只包含直接在BASE/scss/下找到的BASE/scss/文件。

您可以使用以下命令將文件包含在BASE/PROJECTS是將其添加到“sass”任務中的gulp.src調用中

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

鑒於您的“sass”任務和您描述的目錄結構，我重新創建了此場景。 gulp.src這個參數可以完美地使用gulp.src 。

我的下一個問題是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遞歸匹配目錄下的所有**/*.scss文件。 *.scss只匹配一個目錄下的 .scss 文件。

如果所有其他方法都失敗了，我建議將您的編譯問題隔離在gulp.watch之外。 剔除所有無關代碼並逐行構建功能，以確保您獲得適當的結果。