Question

我一直在为这一天的大部分时间而努力，是时候寻求帮助了。

我正在创建一个在webpack构建dist文件夹之后运行的脚本。我正在使用不允许html中的脚本标记的服务器框架。

在webpack构建dist文件夹之后，我将获取该文件夹并创建一个要部署的新文件夹。我想操纵我的webpack文件夹中的html文件，该文件夹加载我的大多数javascript并使用＆＃34;类似脚本的＆＃34;标签我可以在我正在使用的服务器框架上使用。

这就是它的样子：

Webpack文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Proof of Concept</title>
  </head>
  <body>    
    <div id="app" />
    <script src='./project/client-js.js'></script>
  </body>
</html>

我需要删除脚本标记，然后改为：

文件我需要创建以进行部署：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Proof of Concept</title>
  </head>
  <body>    
    <div id="app" />
    <?!= include('client-js.js') ?>
  </body>
</html>

我的想法是

使用节点＆＃39; fs.readFile
找到html文件中的所有脚本标记
使用文件名解析src字符串
从文件/字符串中删除脚本标记
为我的所有js文件插入我需要与我的服务器框架一起使用的语法。

我大部分时间都在尝试重新创建我列出的步骤。我已经尝试过reg-ex来查找所有脚本标签（不幸的是我不是正则表达式的大师），将我的字符串拆分成一个数组，最终，我无法找到解决方案

如果有人能够就如何解决这个问题表达自己的想法或想法，我会非常感激。这是我需要的构建过程的最后一步。

Answer 1

构建工具专门用于执行此类任务;使用gulp就像以下一样简单：

全局安装gulp：

npm install gulp-cli -g

cd到您的项目目录并安装gulp和gulp-html-replace：

npm install gulp gulp-html-replace --save-dev

制作gulpfile.js：

var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');

gulp.task('default', function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
      js: {
        src: 'client-js.js', // Also could be an array: ['1.js', '2.js']
        tpl: "<?!= include('%s') ?>"
      }
    }))
    .pipe(gulp.dest('build/'));
});

并运行gulp。完成。

以下index.html（注意添加此区域的两条评论将被替换）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Proof of Concept</title>
  </head>
  <body>    
    <div id="app" />
    <!-- build:js -->
    <script src='./project/client-js.js'></script>
    <!-- endbuild -->
  </body>
</html>

将变为:(并且您的index.html页面已在 build 文件夹下准备好了）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Proof of Concept</title>
  </head>
  <body>    
    <div id="app" />
    <?!= include('client-js.js') ?>
  </body>
</html>

有关更多高级示例，请参阅gulp-html-replace

读取文件，替换脚本标记

1 个答案: