每个文件夹生成一个文件

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 - 仅在所有流发送结束时结合流和结束

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

1 个答案:

每个文件夹生成一个文件