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自动将这两个文件合并为一个。然而，从你自己的源代码中管理我认为是modules目录下的依赖项是很尴尬的。

相反，您可以将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任务管理你的样式依赖，而不是将它们导入你的源代码的样式。

如何在父目录中获取文件

1 个答案: