gpt4 book ai didi

javascript - Gulp HTML 和 JS 连接 - ERR_FILE_NOT_FOUND

转载 作者:行者123 更新时间:2023-11-30 14:46:02 26 4
gpt4 key购买 nike

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

谢谢

最佳答案

安装 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>

关于javascript - Gulp HTML 和 JS 连接 - ERR_FILE_NOT_FOUND,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48925087/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com