gulp rev 生成的json文件有问题

gulp-rev 生成的 rev-manifest.json 跟想象的不一样,多了一层目录, 是配置的不对还是目录结构有问题, 请大家指正

目录结构

gulpfile.js

var gulp = require('gulp');
var rev = require('gulp-rev');                          
var revCollector = require('gulp-rev-collector');
var uglify = require('gulp-uglify');
var del = require('del');

gulp.task('clean', function () {
    del(['./dist/','./rev']);
});

gulp.task('script', function() {
    gulp.src(['./src/**/js/*.js'])
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest('./dist/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./rev'));
});

gulp.task('rev', function() {
    gulp.src(['./rev/*.json', './src/**/*.html'])
        .pipe(revCollector())
        .pipe(gulp.dest('./dist/'));
});

gulp.task('default', ['clean', 'script', 'rev']);

从图中可以看出js加密,md5是没有问题的但是html中的js路径和 rev-manifest.json 中的映射没有匹配上

这是json

{
  "index/js/index.js": "index/js/index-db4b0af3ff.js",
  "user/js/index.js": "user/js/index-fff0532ec8.js",
  "user/js/user.js": "user/js/user-59f4483a57.js"
}

这是src下的html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Index</title>
  <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<h1>123123</h1>
<script type="text/javascript" src='js/index.js'></script>
<script type="text/javascript" src='js/user.js'></script>
</body>
</html>

在 dist 目录中的html文件没有被替换成功, json 中如果没有 /js 前的一层目录可能就能替换成功了, 应该怎么改配置呢, 去网上走了一圈没能找到解决方法

已经解决了

你好请问是怎么解决的哦，我遇到的问题是：我用的代码是和网上面一模一样的，结果html文件总是不替换，该是怎么样还是怎么样的？

在写gulp.src(['./src/**/js/*.js'])获取路径的时候,会将src/后面的路径全部带上,因此在输出manifest.json文件的时候。key值对应的文件名也会带上相应的路径.

可以使用gulp-flatten这个插件.

    gulp.task('script', function() {
    gulp.src(['./src/**/js/*.js'])
        .pipe(flatten())
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest('./dist/'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./rev'));
});

【热门文章】