Question

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

projectName/

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

我想将css文件加入到一个，javascript文件相同。我使用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根目录而不是具有相同的结构
可选：我有两个任务可以做同样的事情但是对于不同的扩展，一个用于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-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")))
  }))
});

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

2 个答案: