使用 gulp-sass，我如何保留 sass 文件的文件夹结构，但直接父目录除外？

Question

我有一个包含多个文件夹的项目，其中包含 sass 个文件：

|── src
    └── scripts
        └── app1
            └── sass
                └── base.scss
        └── app2
            └── sass
                └── base.scss

我还有一个 gulp 任务，使用 gulp-sass 和 gulp-concat-css:

编译那些 .scss 文件

gulp.task('build:sass', () =>
    gulp.src([
      'scripts/**/*.scss'
    ])
    .pipe(plugins.sass().on('error', plugins.sass.logError))
    .pipe(plugins.concatCss('bundle.css'))
    .pipe(gulp.dest('dist'))
  );

现在，上述任务只是将 bundle.css 创建到 dist 文件夹中：

|── dist
    └── bundle.css

我希望发生的是这个，其中保留了初始文件夹结构，除了 sass 文件夹现在是 css.

|── dist
    └── scripts
        └── app1
            └── css
                └── bundle.css
        └── app2
            └── css
                └── bundle.css

Answer 1

你可以使用gulp-flatmap插件来解决这个问题：

var path = require('path');

gulp.task('build:sass', () =>
  gulp.src('scripts/app*/')
    .pipe(plugins.flatmap((stream, dir) =>
       gulp.src(dir.path + '/**/*.scss')
         .pipe(plugins.sass().on('error', sass.logError))
         .pipe(plugins.concatCss('css/bundle.css'))
         .pipe(gulp.dest('dist/' + path.basename(dir.path)))
    )) 
);

这会选择您的所有 app 目录，然后将这些目录中的每一个映射到一个新流，其中该特定目录中的所有 .scss 文件都被连接成一个 bundle.css文件。

使用 gulp-sass，我如何保留 sass 文件的文件夹结构，但直接父目录除外？

Using gulp-sass, how do I preserve the folder structure of my sass files except for the immediate parent directory?

gulp

gulp-sass