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

问题描述

I have a project with multiple folders that contain sass files:

脚本
└──app1
└──sass
└──base.scss
└──app2
└──sass
└── base.scss

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

I also have a gulp task that compiles those .scss files using gulp-sass and 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 文件夹：

Right now, the above task just creates bundle.css into the dist folder:

|── dist
    └── bundle.css

我想要发生的是这种情况，其中除了 sass 文件夹现在 css 。

What I'd like to have happen is this, where the initial folder structure is preserved, except for the sass folder is now css.

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

推荐答案

您可以使用插件解决此问题：

You can use the gulp-flatmap plugin to solve this:

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

这会选择所有的应用程序目录和然后将这些目录中的每一个映射到一个新的流中，在该流中该特定目录中的所有 .scss 文件被连接成一个 bundle.css file。

This selects all of your app directories and then maps each of those directories to a new stream in which all .scss files in that particular directory are concatenated into a single bundle.css file.

这篇关于使用gulp-sass，除了直接父目录外，如何保留我的sass文件的文件夹结构？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！