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'));
    }));
});

让我知道它是否适合您。