使用通配符对每个项目进行 gulp-concat答案

【问题标题】：gulp-concat for each project using wildcard使用通配符对每个项目进行 gulp-concat
【发布时间】：2017-10-31 06:04:09
【问题描述】：

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

projectName/

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

我想将 css 文件合并为一个，对于 javascript 文件也是如此。我在 gulp-concat 中使用 gulp，例如，对于 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")
})

但我有以下问题：

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

我该如何解决这个问题？

【问题讨论】：

您可以在 projectName 级别上 glob，然后从那里 gulp-foreach。
@Mark 你能给我举个例子吗？我不明白

标签： javascript node.js gulp gulp-concat

【解决方案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 : ""
    }

}

然后编写 gulp 任务来捆绑 JS 和 CSS

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变量中的一切

【讨论】：

我不想硬核文件名，它可能会因项目而异

【解决方案2】：

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

所以我的 gulp 任务如下所示：

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")))
  }))
});

【讨论】：

很高兴你得到它。直到现在我才能够回到这个话题。