Gulp：将文件连接到每个单独的 sass 进程答案

【问题标题】：Gulp: concatenate a file to each separate sass processGulp：将文件连接到每个单独的 sass 进程
【发布时间】：2017-10-30 15:35:35
【问题描述】：

我编写了一个 gulp 任务来将一个文件夹中的所有 scss 文件处理成单独的 css 文件。

gulp.task('process', function () {
  gulp.src(['./base.scss', './layout/*.scss'])
    .pipe(sass())
    .pipe(gulp.dest('dist'))
});

现在我想将一个文件 (base.scss) 连接到每个 scss 进程；我该怎么做？

【问题讨论】：

所以你想在 sass() 管道之前将 base.scss 连接到每个 .scss 文件？
@Mark 准确..
@FaridRn - 只是想知道你为什么要这样做？我生成的 css 目前很大，并试图找出哪些 scss 文件增加了最大的权重。我正在考虑从每个 scss 文件创建一个 css，然后查看大小。尝试了上面和下面的一点点喜悦。
@v3nt 我正在尝试创建具有太多 css 文件的模板的 RTL 版本；这些文件中的每一个都是根据页面中使用的插件加载的。换句话说，我想用 -rtl 后缀创建每个文件的 RTL 化版本，并将它们与原始文件放在一起。很高兴听到我的问题对您有所帮助。

标签： gulp gulp-sass gulp-concat

【解决方案1】：

这应该可以帮助你，但我没有测试它。 Gulp-foreach 对您有好处，它将 gulp.src 中的每个文件视为自己的流，您可以单独操作。下面的代码将你的 base.scss 附加到每个流，然后将它们连接起来，然后它们通过 sass 管道。

var foreach = require('gulp-foreach');
var concat = require('gulp-concat');
var addsrc = require('gulp-add-src');

gulp.task('default', function () {
  return gulp.src('./layout/*.scss')
      // treats each file in gulp.src as a separate stream
    .pipe(foreach(function (stream, file) {
      return stream
         // append or prepend
       .pipe(addsrc.append('./base.scss'))
        //  you do have access to the 'file' parameter here if you need to rename
       .pipe(sass())
       .pipe(concat(path.basename(file.path)))
       .pipe(gulp.dest('dist'));
    }));
});

让我知道它是否适合你。

【讨论】：

我用gulp-foreach 做到了，但在foreach 内部使用了dest，而不是在src 的管道上，它有效，并编辑了您的答案，以便我可以将其标记为已接受，希望你没有生我的气！