Gulp：如何创建一个编译多个 SASS 文件的任务？

Question

我有以下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());
});

Answer 1

只需指定匹配多个 scss 文件的 glob(s)。这些示例假设您要将结果保存到与源文件相同的目录。

匹配 每个 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('.'));
});