gulp-rev-replace替换子文件夹中的HTML文件

gulp-rev-replace on HTML files in subfolders

本文关键字：HTML 文件 文件夹 替换 gulp-rev-replace      更新时间：2023-09-26

我想知道如何让gulp-rev-replace在子文件夹中的HTML文件中使用相同的哈希替换文件引用。考虑以下文件结构

  • index . html
  • 子文件夹
    • index . html
  • 脚本
    • main.js
  • 风格
    • main.scss

和以下html语句:

index . html: 

<!-- build:css styles/main.css -->
<link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

文件夹/index . html: 

<!-- build:css ../styles/main.css -->
<link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="../styles/main.css">
<!-- endbuild -->

在我的Gulpfile

中
gulp.task('html', ['styles'], () => {
  const assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});
  return gulp.src('app/**/*.html')
    .pipe(assets)
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.minifyCss({compatibility: '*'})))
    .pipe($.rev())
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe($.revReplace())
    .pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
    .pipe(gulp.dest('dist'));
});

index.html中的样式链接块将被替换为正确的缩小和散列样式表引用。subfolder/index.html中的相同块将获得完全不同的散列样式表引用。但是，它会使样式表的路径正确。

我设置我的Gulpfile不正确吗?

通过这个单独的答案找到了答案。我最终将每个HTML文件中的样式引用设置为应用程序目录的根目录，并提供3个目录进行搜索:

<!-- build:css({.tmp,app,.}) /styles/main.css -->
<link rel="stylesheet" href="/bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="/styles/main.css">
<!-- endbuild -->

与提供给gulp-useref

的三个目录相匹配
const assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});
相关文章：