gulp 静态资源地址替换

Question

src文件夹是静态资源文件夹,dist是打包后生成的文件夹，1.html是要写的页面，请问我怎么把静态资源引用到1.html文件夹，目前我打包生成的静态资源是没有版本号的，我希望是可以加上版本号，然后自动替换到html中。
我用了gulp-rev和gulp-rev-collector，但是没用。大神指点下，谢谢

Answer 1

gulp-usemin

Answer 2

既然已经会用gulp了，那可能是gulp-rev 没配置好，建议再次看一下文档和案例。

参考链接： https://github.com/sindresorh...
参考链接： https://github.com/lin-xin/bl...

Answer 3

第一个问题，如何引用静态资源：按照正常的流程去引入，也就是1.html中用相对路径去引用即可。
第二个问题，gulp-rev是去获取静态资源然后对其加hash值，gulp-rev-collector是通过gulp-rev生成的数据或是json文件去替换gulp.src中指定的html文件或是其他后缀类型文件中对应的字符串。
比如我对一些js做rev

gulp.task('scripts', ()=> {
    return gulp.src(js) // rev的js路径
        .pipe(uglify({ // uglify优化
            mangle: {
                except: ["exports", "module", "require", "define"],
                screw_ie8: false
            },
            compress: { screw_ie8: false },
            output: { screw_ie8: false }
        }))
        .pipe(rev()) // rev加hash
        .pipe(gulp.dest(scripts)) // 将rev后js文件放入指定文件夹位置
        .pipe(rev.manifest()) // 生成对应json
        .pipe(gulp.dest(rev.scripts)); // 将json写入某个文件
});

然后是对html文件进行替换路径

gulp.task('replaceHtmlUrl', ()=> {
    return gulp.src([revJson, tpl]) // revJson是刚才生成的json文件，tpl是要处理的html
        .pipe(revCollector({
            replaceReved: true,  //模板中已经被替换的文件是否还能再被替换,默认是false
            dirReplacements: dirReplaceObj //标识目录替换的集合, 因为gulp-rev创建的manifest文件不包含任何目录信息,
        }))
        .pipe(gulp.dest(dest.tpl)); // 将处理过的html输出到指定位置
});