gulp 打包 , 处理多级 html 目录问题

  多级目录结构图: https://blog.csdn.net/qq_39582021/article/details/90248950

html 存放在不同的目录中 , 该如何处理? , 

[b]起因[/b]: 我项目根目录只放了一个 index.html ,其他的 html 文件全部放在新建的 html 文件夹中

[b]经过[/b]: [code=javascript]

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');// 替换 html 中的文件路径名
var useref = require('gulp-useref');// 通过注释,进行合并
var gulpif = require('gulp-if');// gulp-if 在使用的时候: 可以通过判断决定对指定的文件做何种处理 , 压缩 等
var rename = require('gulp-rename');

// 合并js
gulp.task('js',function () {
   return gulp.src(['./html/**/*.html','./*.html'], {base: './'})
        .pipe(useref())
        .pipe(gulpif('*.js',uglify()))
        .pipe(gulpif('*.js',rev()))
        .pipe(gulp.dest('./release'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./release/rev'));
});

// 生成的对应关系
{
  "js/aaa.js": "js/aaa-67dbcb3b33.js",
  "js/cart.js": "js/cart-1109a59887.js",
  "js/cate.js": "js/cate-b3c2fd060e.js",
  "js/index-all.js": "js/index-all-6244d547ee.js",
  "js/search.js": "js/search-67dbcb3b33.js",
  "js/searchResultList.js": "js/searchResultList-07d300590c.js"
}

//根据对应关系替换
gulp.task('rev',function () {
   return gulp.src(['./release/rev/*.json','./release/html/**/*.html','./release/*.html'],{base:'./release'})
        .pipe(revCollector({replaceReved: true}))
        .pipe(gulp.dest('./release'));
});

// html 文件中需要合并的 js 
<!-- build:js ./js/search.js --> // './' 这个 './' 指定的应该是项目更目录
<script src="../assets/mui/js/mui.min.js"></script>
<script src="../assets/zepto/zepto.min.js"></script>
<script src="../assets/artTemplate/template-native.js"></script>
<script src="../js/common.js"></script>
<script src="../js/search.js"></script>
<!-- endbuild -->

<script src="./js/search-67dbcb3b33.js"></script> // 就是这路径替换,在多级目录中无法正确匹配
[/code]

[b]结果[/b]: 就是最后生成的  <script src="./js/search-67dbcb3b33.js"></script> 对应不上 , 因为在使用注解标签进行合并的时候 , 指定的就是根目录 , 但是 html 文件夹中的 html 文件对应的应该是 '../js/search-67dbcb3b33.js' 

解决: 通过在 build 注释中添加一个自定义的字符串就可以解决
 <!-- build:js ./js/search.js data-jsmin="../js/search.js" id="jsmin"--> 

然后在新建一个 useref.js 的文件 , 里面放入以下内容 , 然后在需要引入的 html 最后一行引入: 

var useref = document.getElementById('jsmin');
if (useref) {
    var path = useref.dataset.jsmin;
    var script = document.createElement('script');
    script.type= 'text/javascript';
    script.src = path;
    useref .parentNode.appendChild(script);
    useref .parentNode.removeChild(useref);
    // console.log('获取成功!'+path);
}else{
    console.log('获取失败!'+useref);
}

意思就是:

1. 找到那个标签 ,

2. 然后通过自定义属性 data-jsmin 获取正确的路径 ,

3. 然后新建一个标签 , 然后添加正确的 src 路径 ,

4. 最后移除那个错误的标签

经过测试 , 运行时,只有那个错误标签会报一个 404 ,程序运行正常

后期如果想到更好的解决方案 , 再补上 , 如果有那位大神能够解决 , 欢迎指教