Gulp: Как создать задачу, которая собирает несколько файлов SASS?

У меня есть следующая задача sass, которая компилирует app.scss в app.css и перезагружает страницу:

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

Теперь я хочу скомпилировать другой файл, а именно ui-toolkit.scss - ui-toolkit.css.

Это лучший способ обновить задачу?

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

Ответы

Ответ 1

Просто укажите glob (ы), которые соответствуют нескольким файлам scss. В этих примерах предполагается, что вы хотите сохранить результаты в том же каталоге, что и исходный файл.

Соответствует каждому scss файлу (в node_modules):

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

Соответствует файлам scss в определенных каталогах:

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

Совпадает только с определенными файлами (здесь требуется базовая опция для сохранения в тот же каталог, что и исходный файл):

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