0

我们将低级 html 标记处理为 npm 模块，可以通过注释指定其支持 html 将在该位置注入的模块的名称。一个模块包含 html，支持 SCSS 和 vanilla JS。从 SCSS 和 JS 的角度来看，一切都搞定了。安装模块的那一刻，SCSS 被编译、连接并附加到核心 CSS 文件，然后被压缩。JS 的处理方式非常相似。

我非常关注的地方是如何处理 html 片段。这是我所拥有的，它有效，但这绝不是动态的。

gulp.task('inject-atoms', function () {
gulp.src('./index.html')
  .pipe(inject(gulp.src(['./node_modules/my-module-name/my-module-name.html']), {
    starttag: '<!-- inject:html -->',
    transform: function (filePath, file) {
      return file.contents.toString('utf8')
    }
  }))
  .pipe(gulp.dest('./'));
});

我希望能够做的（在目标 index.html 文件中）指定注入其 html 片段的模块名称。所以像：

<!-- inject:my-module-ABC --!>
<!-- inject:my-module-XYC --!>

唯一的要求是在尝试注入它们的代码片段之前已经安装了模块。所以 gulp 任务需要扫描索引文件，并且对于每个注入评论，去获取该模块的 html 片段并将其注入。

有什么提示可以帮助我朝着正确的方向前进吗？

谢谢！

4

0 回答 0