Gulp HTML 和 JS 拼接 - ERR_FILE_NOT_FOUND

Question

我正在使用一些标准 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 中的原始路径，使它们都指向一个串联文件？

谢谢

Answer 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>

Answer 2

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

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

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

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

Gulp HTML 和 JS 拼接 - ERR_FILE_NOT_FOUND

Gulp HTML and JS concatenation - ERR_FILE_NOT_FOUND

html

javascript

minify

gulp