Gulp: concatenate a file to each separate sass process

Question

I wrote a gulp task to process all scss files in one folder into separate css files.

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

Now I want to concatenate one file (base.scss) to each scss process; how can I do this?

Answer 1

This should help you but I didn't test it. Gulp-foreach is good for you, it will treat each file from gulp.src as its own stream which you can manipulate separately. The code below then appends your base.scss to each stream, then concatenates them and then they go through the sass pipe.

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

Let me know if it works for you.