CODEWITHSUNDEEP
gulp
Misha Moroshko
Misha Moroshko

Reputation: 171341

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

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

Upvotes: 14

Views: 21109

Answers (1)

Heikki
Heikki

Reputation: 15417

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

Upvotes: 27

Related Questions