Question

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

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

我还有一个gulp任务，使用.scss和gulp-sass编译这些gulp-concat-css文件：

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文件的文件夹结构？

1 个答案: