使用 gulp 在多个相同结构的目录中编译 SASS

Question

我有以下 SCSS 文件结构

/modules/core/scss/core.scss
/modules/blog/scss/blog.scss

我现在有这样的 gulp 文件：

gulp.task('sass', function () {
  gulp.src('./modules/*/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./modules'));
})

当然它会产生相同的目录。

有没有办法使用单管道来编译那些使用 gulp 的？我需要这样的结果（将 scss 更改为 css）：

/modules/core/css/core.scss
/modules/blog/css/blog.scss

模块是动态添加的，所以我不能为每个模块添加一个管道。

Answer 1

Gulp 有一个 recipe in its documentation 正是针对这种情况。

复制/粘贴以防万一：

---

为每个文件夹生成一个文件

如果您有一组文件夹，并希望对每个文件夹执行一组任务，例如...

/scripts
/scripts/jquery/*.js
/scripts/angularjs/*.js

...并希望以...结束...

/scripts
/scripts/jquery.min.js
/scripts/angularjs.min.js

...您需要执行以下操作...

var fs = require('fs');
var path = require('path');
var merge = require('merge-stream');
var gulp = require('gulp');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');

var scriptsPath = 'src/scripts';

function getFolders(dir) {
    return fs.readdirSync(dir)
      .filter(function(file) {
        return fs.statSync(path.join(dir, file)).isDirectory();
      });
}

gulp.task('scripts', function() {
   var folders = getFolders(scriptsPath);

   var tasks = folders.map(function(folder) {
      // concat into foldername.js
      // write to output
      // minify
      // rename to folder.min.js
      // write to output again
      return gulp.src(path.join(scriptsPath, folder, '/**/*.js'))
        .pipe(concat(folder + '.js'))
        .pipe(gulp.dest(scriptsPath))
        .pipe(uglify())
        .pipe(rename(folder + '.min.js'))
        .pipe(gulp.dest(scriptsPath));
   });

   // process all remaining files in scriptsPath root into main.js and main.min.js files
   var root = gulp.src(path.join(scriptsPath, '/*.js'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest(scriptsPath))
        .pipe(uglify())
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest(scriptsPath));

   return merge(tasks, root);
});

几点说明：

• folders.map - 每个文件夹执行一次函数，并返回异步流
• merge - 合并流并仅在所有流发出结束时才结束