Question

在我的应用程序中，我有以下文件/文件夹结构：

/components
    /assets
    /navbar
        /assets
            /stylehseets
            /scripts
    /sidebar
        /assets
            /stylesheets
            /scripts
    /editor
        /assets
            /stylehseets
            /scripts
            /icons

然后我有一个gulp任务将这些组件压平成一组工件。

var tools = {
    copy: function (src, dest) {
        return gulp
            .src(src)
            .pipe(gulp.dest(dest));
    }
};

gulp.task("create-artifacts", function () {
    tools.copy("./components/navbar/assets/**/*", "./artifacts");
    tools.copy("./components/sidebar/assets/**/*", "./artifacts");
    tools.copy("./components/editor/assets/**/*", "./artifacts");
});

这会产生以下文件/文件夹结构：

/artifacts
    /stylehseets
    /scripts
    /icons

问题是我的components文件夹将包含越来越多的组件，所以我希望我的gulp任务更加聪明。

比如说，我现在要添加

/components
    /messagebox
        /assets
            /stylehseets
    /listbox
        /assets
            /stylesheets
            /scripts

现在我需要进入我的gulp任务并添加messagebox和listbox的复制位置。

gulp.task("create-artifacts", function () {
    tools.copy("./components/navbar/assets/**/*", "./artifacts");
    tools.copy("./components/sidebar/assets/**/*", "./artifacts");
    tools.copy("./components/editor/assets/**/*", "./artifacts");

    // having to add these new components in...
    tools.copy("./components/messagebox/assets/**/*", "./artifacts");
    tools.copy("./components/listbox/assets/**/*", "./artifacts");
});

我真正想要的是这样......

gulp.task("create-artifacts", function () {
    return tools.copy("./components/*/assets/**/*", "./artifacts");
});

但是这没有使层次结构扁平化的理想结果。我该怎么办？

Answer 1

解决方案是使用gulp-flatten。

var flatten = require("gulp-flatten");

gulp.task("create-artifacts", function () {
    return gulp
        .src("./components/*/assets/**/*")
        .pipe(flatten({ includeParents: -1 }))
        .pipe(gulp.dest("./artifacts"));
});

Gulp复制和压扁文件＆amp;文件夹

1 个答案: