Gulp:如何创建一个编译多个 SASS 文件的任务? [英] Gulp: How to create a task that compiles multiple SASS files?

问题描述

我有以下 sass 任务，它将 app.scss 编译为 app.css 并重新加载页面:

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

现在，我要编译另一个文件，即ui-toolkit.scss到ui-toolkit.css.

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

推荐答案

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

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.

匹配 每个 scss 文件(也在 node_modules 中):

Matches every scss file (in node_modules too):

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

匹配特定目录中的 scss 文件:

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

这篇关于Gulp:如何创建一个编译多个 SASS 文件的任务?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！