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 ，生成的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步骤，将链接更改为

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

Gulp HTML和JS串联-ERR_FILE_NOT_FOUND

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-02-22 11:13:23

解决方案2
1 2018-02-22 11:14:26

Gulp HTML和JS串联-ERR_FILE_NOT_FOUND

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-02-22 11:13:23

解决方案2 1 2018-02-22 11:14:26

解决方案1
1 已采纳 2018-02-22 11:13:23

解决方案2
1 2018-02-22 11:14:26