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