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

Question

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

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

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

Answer 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：将文件连接到每个单独的 sass 进程

Gulp: concatenate a file to each separate sass process

gulp

gulp-sass

gulp-concat