0

我正在尝试将多个 scss 文件合并为一个，类似于Gulp：如何创建编译多个 SASS 文件的任务？; 但是我的一个文件在我的 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 个副本。

4

1 回答 1

0

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 任务中管理您的样式依赖项，而不是将它们导入到源代码的样式中。

于 2015-04-15T18:38:24.330 回答