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

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

1 个答案: