Gulp-编译和捆绑js文件并维护文件夹结构

时间:2019-09-30 18:39:33

标签: javascript webpack gulp bundle babel

我正在编码许多小的“块”,这是较大的网站的一部分。我需要每个块都有自己的文件夹和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代码。

我该怎么办?我不想捆绑一切,我想像现在对scss那样,将每个块的js文件分别捆绑并保存到dist文件夹中。

0 个答案:

没有答案