Gulp: How to create a task that compiles multiple SASS files?

Question

I have the following sass task which compiles app.scss to app.css and reloads the page:

gulp.task('sass', function() {
  return gulp.src('./app/app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./app'))
    .pipe(livereload());
});

Now, I want to compile another file, namely ui-toolkit.scss to ui-toolkit.css.

Is this the best way to update the task?

gulp.task('sass', function() {
  gulp.src('./ui-toolkit/ui-toolkit.scss')
    .pipe(sass())
    .pipe(gulp.dest('./ui-toolkit'));

  return gulp.src('./app/app.scss')
    .pipe(sass())
    .pipe(gulp.dest('./app'))
    .pipe(livereload());
});

Answer 1

Just specify glob(s) that match multiple scss files. These examples assume you want to save the results to same directory as the source file.

Matches every scss file (in node_modules too):

gulp.task('sass', function() {
  return gulp.src('./**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('.'));
});

Matches scss files in specific dirs:

gulp.task('sass', function() {
  return gulp.src('./{foo,bar}/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('.'));
});

Matches only specific files (base option is needed here for saving to same directory as source file):

gulp.task('sass', function() {
  return gulp.src(['./foo/foo.scss', './bar/bar.scss'], { base: '.' })
    .pipe(sass())
    .pipe(gulp.dest('.'));
});