复制到 dist 目录后，Gulp 更改 html 文件中的路径/链接答案

【问题标题】：Gulp change paths/links in html files after copying to dist directory复制到 dist 目录后，Gulp 更改 html 文件中的路径/链接
【发布时间】：2019-08-08 05:49:54
【问题描述】：

我创建了一个静态网站，并使用 gulp 进行自动化。现在，我还使用gulp pages 将我的 html 文件复制到 dist 目录，但是当我检查该目录并打开任何 html 文件时，样式表和所有其他链接由于相对路径而损坏。有没有办法在将 html 复制到 dist 目录时更改样式表和图像的路径？

gulpfile.js

"use strict";

const gulp = require("gulp");
const sass = require("gulp-sass");
const imagemin = require("gulp-imagemin");
const htmlmin = require("gulp-htmlmin");
const browserSync = require("browser-sync").create();
const sassPaths = ["./node_modules"];

function style() {
  return gulp
    .src("./app/scss/**/*.scss")
    .pipe(sass({ includePaths: sassPaths, outputStyle: "compressed" }))
    .pipe(gulp.dest("./app/dist/css"))
    .pipe(browserSync.stream());
}

function images() {
  return gulp
    .src("./app/images/**/*")
    .pipe(imagemin())
    .pipe(gulp.dest("/app/dist/images"));
}

function pages() {
  return gulp
    .src(["./app/**/*html"])
    .pipe(
      htmlmin({
        collapseWhitespace: true,
        removeComments: true
      })
    )
    .pipe(gulp.dest("./app/dist"));
}

function watch() {
  browserSync.init({
    server: {
      baseDir: "./app"
    }
  });
  gulp.watch("./app/scss/**/*.scss", style, images);
  gulp.watch("./app/**/*.html").on("change", browserSync.reload);
}

exports.style = style;
exports.images = images;
exports.pages = pages;
exports.watch = watch;

我想从

更改 dist 目录中生成的文件

<link rel="stylesheet" href="./dist/css/app.css">

到

<link rel="stylesheet" href="./css/app.css" />

【问题讨论】：

标签： gulp

【解决方案1】：

查看gulp-processhtml 或类似gulp-useref 的软件包。

然后在您的 html 文件中，您将有类似的内容：

<!-- build:css ./css/app.css -->
<link rel="stylesheet" href="./dist/css/app.css">
<!-- /build -->

这会将您的链接更改为<link rel="stylesheet" href="./css/app.css" />

const modifyHTMLlinks = require("gulp-processhtml");  // or try gulp-useref

function pages() {
  return gulp
    .src(["./app/**/*html"])
    .pipe(modifyHTMLlinks())
    .pipe(
      htmlmin({
        collapseWhitespace: true,
        removeComments: true
      })
    )
    .pipe(gulp.dest("./app/dist"));
}

【讨论】：