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文件中（假设其名为＆＃34; index.html＆＃34;），您将使用：

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

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

Gulp HTML和JS连接 - ERR_FILE_NOT_FOUND

2 个答案: