如何获取父目录中的文件

Question

我正在尝试将多个 scss 文件合并为一个，类似于Gulp: How to create a task that compiles multiple SASS files?；但是我的一个文件在我的 gulpfile 之上：

/project_root/
    fe/
        common/
            app/src/main/styles/main.scss
            gulpfile.js
        module/src/foo/styles/main.scss

我的 gulpfile 看起来像这样：

gulp.task('styles', function() {
    return gulp
        .src(
            [
                './app/src/**/main.scss',    // included
                '../module/src/**/main.scss' // NOT included
            ],
            { base: '.'} // this doesn't seem to matter
        )
        .pipe( plumber() )
        .pipe(
            sass({
                errLogToConsole: true,
                sourceComments : 'normal'
            })
        )
        // …
        .pipe(rename('app.css'))
        .pipe(gulp.dest('../build/'));
});

我对我的 js（*.js 而不是 main.scss）做基本相同的事情，它工作得很好：/

更新：我刚刚注意到，当我从上面删除重命名时，确实会处理第二个 main.scss，并且会在同一目录而不是 dest 目录中创建一个 main.css。

更新：我尝试让源路径从它们的共同祖先 '../{common,module}/**/main.scss' 开始（这显着影响了性能），现在我得到了第二个源的 2 个副本文件。

Answer 1

gulp-sass 似乎没有像您期望的那样连接文件。

您可以自己将所有 .scss 文件合并到一个文件中，并导入所有依赖项：

# app.scss
@import 'main.scss';
@import '../../../module/src/**/*.scss';

然后用你当前的任务处理它（减去重命名它）：

gulp.task('styles', function() {
    return gulp
        .src('./app/src/**/site.scss')
        .pipe( plumber() )
        .pipe(
            sass({
                errLogToConsole: true,
                sourceComments : 'normal'
            })
        )
        // …
        .pipe(gulp.dest('../build/'));
});

这将使 sass 自动将这两个文件合并为一个。但是，从您自己的源代码中管理我认为是模块目录下的依赖项有点尴尬。

相反，您可以像这样在当前任务中使用 gulp-concat：

首先使用npm install gulp-concat --save 安装它，然后像这样更改您的任务：

var concat = require('gulp-concat');

gulp.task('styles', function() {
    return gulp
        .src(
            [
                './app/src/**/main.scss',    // included
                '../module/src/**/main.scss' // NOT included
            ],
            { base: '.'} // this doesn't seem to matter
        )
        .pipe( plumber() )
        .pipe(
            sass({
                errLogToConsole: true,
                sourceComments : 'normal'
            })
        )
        .pipe(gulp.dest('../build/css'))
        .pipe(concat('app.css'))
        .pipe(gulp.dest('../build/'));
});

这应该可以完成您尝试使用rename('app.css') 执行的操作。由于 gulp-sass 正在生成多个文件，因此重命名在那里不起作用。这种方法对我来说似乎更好，因为您可以从 gulp 任务中管理您的样式依赖项，而不是将它们导入到源代码的样式中。