javascript - Gulp - 编译和打包 js 文件并维护文件夹结构

Question

我正在编写许多小的“块”，它们是较大网站的一部分。我需要每个块都有自己的文件夹和 html、scss，有时还有 js 文件。然后必须编译所有文件（scss，ES6）并复制到与源中具有相同文件夹结构的dist目录（每个块分开）。为了自动化我使用 Gulp 的过程。我使用 gulp-flatten 来维护文件夹结构，它工作得很好。这是我的 gulpfile 的片段：

function css() {
  return src("blocks/**/*.scss")
    .pipe(flatten({ includeParents: 1 }))
    .pipe(sass())
    .pipe(dest("../dist/blocks"));
}

function html() {
  return src("blocks/**/*.html")
    .pipe(flatten({ includeParents: 1 }))
    .pipe(dest("../dist/blocks"));
}

function scripts() {
  return src("blocks/**/*.js")
    .pipe(flatten({ includeParents: 1 }))
    .pipe(babel())
    .pipe(dest("../dist/blocks"));
}

当 js 文件中没有导入时，它可以正常工作。但是在某些块中我将不得不导入一些 npm 包，所以我需要捆绑 js 代码。

我该怎么做？我不想捆绑所有东西，我想为每个块单独捆绑 js 文件并将它们保存在他们的 dist 文件夹中，就像我现在使用 scss 所做的那样。

标签： javascriptwebpackgulpbundlebabeljs