gulp - gulp-sass从许多目录编译

时间:2016-10-28 22:00:45

标签: javascript sass gulp

我试图从两个不同的目录中编译并将输出的文件放在同一个地方。

文件结构:

- kit
`- scss
 `- kit.scss
 |- kit-flex.scss
 |- kit-grid.scss
 `- kit-reboot.scss

- default
 `- scss
  `- bootstrap.scss
  |- bootstrap-flex.scss
  |- bootstrap-grid.scss
  `- bootstrap-reboot.scss

Gulp任务:

gulp.task('kit', function(){
  gulp.src(['**/scss/*.scss'])
    .pipe(sass())
    .pipe(gulp.dest('dist/assets/css'))
});

我希望所有已编译的文件都在css目录中......但它们不是。

预期:

- dist
 `- css
  `- bootstrap-flex.css
  |- bootstrap-grid.css
  |- bootstrap-reboot.css
  |- bootstrap.css
  |- kit-flex.css
  |- kit-grid.css
  |- kit-reboot.css
  `- kit.css

实际输出:

- dist
 `- css
  `- default
   `- scss
    `- bootstrap-flex.css
    |- bootstrap-grid.css
    |- bootstrap-reboot.css
    |- bootstrap.css

  `- kit
   `- scss
    `- kit-flex.css
    |- kit-grid.css
    |- kit-reboot.css
    |- kit.css

有关如何实现预期产量的任何帮助?

1 个答案:

答案 0 :(得分:1)

我相信gulp-flatten正是您所寻找的。

var flatten = require('gulp-flatten');

gulp.task('kit', function(){
  gulp.src(['**/scss/*.scss'])
    .pipe(sass())
    .pipe(flatten())
    .pipe(gulp.dest('dist/assets/css'))
});