如何创建一个编译多个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 to 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文件匹配即可。这些示例假设您希望将结果保存到与源文件相同的目录中。

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

仅匹配特定文件(此处需要base选项以保存到与源文件相同的目录)：

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