gulp-sassを使用して、直接の親ディレクトリ以外のsassファイルのフォルダ構造を保存するにはどうすればよいですか？

Question

私はSASSのファイルが含まれている複数のフォルダでプロジェクトを持っている：

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

私も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')) 
); 

をdistフォルダにbundle.cssを作成するだけです。

|── 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ファイルに連結されています。