Gulp HTML 和 JS 连接 - ERR_FILE_NOT_FOUND答案

【问题标题】：Gulp HTML and JS concatenation - ERR_FILE_NOT_FOUNDGulp HTML 和 JS 连接 - ERR_FILE_NOT_FOUND
【发布时间】：2018-02-22 10:29:32
【问题描述】：

我正在使用一些标准的 gulp 进程来缩小我的 html、css 和 javascript。我目前遇到的问题是我将我的 JS 连接并丑化到一个干净的 scripts.js 文件中。分发文件夹仍然指向多个JS文件，例如：

  <script type="text/javascript" src="mock-data-live.js"></script>
  <script type="text/javascript" src="vibrant.min.js></script>
  <script type="text/javascript" src="siema.min.js"></script>
  <script type="text/javascript" src="script.min.js"></script>

变成

  <script type="text/javascript" src="script.min.js"></script>

有没有一种方法可以在缩小时更改 HTML 中的原始路径，以便它们都指向一个连接文件？

谢谢

【问题讨论】：

由于 HTML 文件本身大部分是静态的，不需要在更改时重新构建，为什么不将脚本源静态指向最终脚本的路径 <script type="text/javascript" src="script.min.js"></script>？
嘿，好点，我确实考虑过这一点 - 我的 gulp 构建的一部分正在缩小 HTML 以及 JS，因此每次运行时它都会作为进程的一部分输出默认的 gulp 脚本。
我明白了。使用下面我的示例中的 gulp 插件应该可以解决问题。并且可以删除一个简短的注释type="text/javascript"，因为这将是所有脚本标签的默认值。
那么您找到解决方案了吗？如果有，可以分享一下吗？
哎呀，错过了 - 你的答案是最好的。感谢您的帮助。

标签： javascript html gulp minify

【解决方案1】：

安装 gulp-html-replace

为此，您需要一个额外的 Gulp 包：gulp-html-replace。

通过以下方式安装：

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

更改 HTML 文件内容

在您的 HMTL 文件中（假设其名为“index.html”），您将使用：

<html>
<head>

<!-- build:js -->
<script type="text/javascript" src="mock-data-live.js"></script>
<script type="text/javascript" src="vibrant.min.js></script>
<script type="text/javascript" src="siema.min.js"></script>
<script type="text/javascript" src="script.min.js"></script>
<!-- endbuild -->

编辑 gulpfile.js

将构建规则添加到您的 gulpfile.js：

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

gulp.task('default', function() {
  gulp.src('index.html')
    .pipe(htmlreplace({
        'css': 'styles.min.css',
        'js': 'script.min.js'
    }))
    .pipe(gulp.dest('build/'));
});

运行 gulp

一旦您运行gulp，生成的 HTML 应该如下所示：

<html>
<head>

<script type="text/javascript" src="script.min.js"></script>

【讨论】：

太棒了，非常适合我目前的流程 :) 谢谢
非常好！如果这应该是您问题的解决方案，请不要忘记选择一个答案作为解决方案。谢谢！

【解决方案2】：

通常的方法是使用gulp-processhtml 之类的东西。还有其他人做同样的事情。

<!-- build:js js/app.min.js -->
<script src="src/js/main.js"></script>
<!-- /build -->

在开发过程中，您使用的是 src/js 版本。在构建步骤中，您运行一个 gulp-processhtml 步骤，该步骤将链接更改为

<script src="js/app.min.js"></script>

【讨论】：