使用通配符为每个项目使用 gulp-concat

Question

我有 N 个具有相同结构的项目，所有项目都在路径src：

projectName/
├── index.html
├── anotherPage.html
└── assets/
        ├── css/
        │   └── {bunchofstyles}.css
        ├── imgs/
        │   └── {bunchofimages}.{someImageFormat}
        └──js/
            └── {bunchofjs}.js

我想将 css 文件合并为一个，与 javascript 文件相同。我为此使用 gulp 和 gulp-concat，例如，对于 js，我有类似的东西：

//this was made by memory, if its wrong dont pay attention to the minnor details
var gulp = require("gulp");
var concat = require("gulp-concat");
gulp.task("joinJSFiles", function(){
    gulp.src("./src/**/assets/js/*.js")
        .pipe(concat("script.js"))
        .gulp.dest("./dist")
})

但我有以下问题：

1. concat 连接了 gulp.src 中的所有文件，包括其他项目的文件
2. concat 删除了我的项目的结构，将文件保存到 dist 根中，而不是具有相同的结构
3. 可选：我有两个任务做同样的事情，但对于不同的扩展，一个用于 js，另一个用于 css，我可以有一个任务来获得这种方法吗？

我该如何解决这个问题？

Answer 1

定义具有所有库路径的配置。

var config = {
    js : {
        libsSrc : [
            path.src + "js/libs/jquery/jquery.ui.widget.js",
            path.src + "js/libs/jquery/jquery.js",
        ],
        libsBundleName : "libs-bundle",
        // JS Custom
        customSrc : [
            path.src + "js/custom.js"
        ],
        customBundleName : "custom-bundle"
    },
    // Themes and Styles
    css : {
        // CSS Imports
        libsSrc : [
            path.dist + "themes/libs/custom-bootstrap.css",
            path.dist + "themes/libs/bootstrap-datepicker/bootstrap-datepicker3.css"
        ],
        libsBundleName : "libs-bundle",
        // CSS Custom
        customSrc : [
        ],
        customBundleName : ""
    }
}

然后编写用于捆绑 JS 和 CSS 的 gulp 任务

gulp.task('bundle-scripts', ['scripts'], function()  {
    // JS Destination path
    var jsDestPath = path.dist.concat('scripts/bundles');
    // Libs
    var libsTask = gulp.src(config.js.libsSrc)
        .pipe(concat(config.js.libsBundleName + ".js"))
        .pipe(gulp.dest(jsDestPath))
        .pipe(rename(config.js.libsBundleName + ".min.js"))
        .pipe(uglify())
        .pipe(gulp.dest(jsDestPath));
    // Custom Code
    var customJsTask = gulp.src(config.js.customSrc)
        .pipe(concat(config.js.customBundleName + ".js"))
        .pipe(gulp.dest(jsDestPath));
    return eventStream.concat(libsTask, customJsTask);
});

gulp.task('bundle-themes', ['fonts', 'sass'], function()  {
    // JS Destination path
    var cssDestPath = path.dist + 'themes/bundles';
    // Libs
    var libTask = gulp.src(config.css.libsSrc)
        .pipe(concat(config.css.libsBundleName + ".min.css"))
        .pipe(gulp.dest(cssDestPath));
    return eventStream.concat(libTask);
});

通过这种方式，您可以从config变量中控制所有内容

Answer 2

按照@Mark提出的建议，我做了一个遍历每个项目的 gulp 任务，但我没有使用 gulp-flatmap 而不是gulp-foreach（我认为这是一回事）并遵循以下 SO anwser https://stackoverflow.com/a/39933109/4637140

所以我的吞咽任务看起来像这样：

gulp.task('joinJSFiles', function () {
  return gulp.src('src/*')
     .pipe(flatmap(function(steam, dir){
        return gulp.src(dir.path + "/assets/js/*.js", {base:dir.path})
          .pipe(concat("script.js"))
          .pipe(gulp.dest("./dist/"+path.relative(dir.base, dir.path+"/assets/js")))
  }))
});