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

但是我有以下问题：

concat 连接 gulp.src 中的所有文件，包括其他项目
concat 删除了我项目的结构，将文件保存到 dist root 而不是具有相同的结构
可选：我有两个任务做同样的事情但扩展不同，一个用于 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 : ""
    }

}

然后编写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变量的一切

Answer 2

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

所以我的 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")))
  }))
});

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

gulp-concat for each project using wildcard

javascript

node.js

gulp

gulp-concat