javascript - gulp-useref – 不同级别文件夹中的相对输出路径

Question

目前有没有办法做相对输出路径？内 gulp-useref还是其他？

我的现状:

project_folder/
  app/ 
    index.html
    about/
      index.html
  scripts/
    index.js
    about.js

在index.html基于 app/ ，一切正常:

<!-- build:js scripts/main.min.js -->
<script src="/scripts/main.js"></script>
<!-- endbuild -->

index.html文件位于 scripts 旁边文件夹，以便相对路径正确同步。

但这是 about/index.html :

如果我像这样传递路径 – ../scripts/about.min.js – 生成的 about.min.js获取输出太远的一个文件夹，导致这种情况:

project_folder/
  scripts/
    about.min.js
  dist/
    index.html
    about/
      index.html
    scripts/
      index.min.js

随着 about/index.html在 <script src="../scripts/about.min.js"></script> 中寻找它.

如果我不传入about/index.html中的相对路径:

about.min.js最终位于正确的位置，但路径在 about/index.html 中不正确– 设置为 <script src="scripts/about.min.js"></script> .

建议？我可以有不同版本的 useref在不同文件夹级别运行的任务。我还考虑过根据它与基本文件夹的距离找出一些方法来改变路径，但如果这是一个可行的选择，我不太确定从哪里开始。我只是不知道我是否遗漏了更明显的东西。

因为这意味着我要放在一起的工具中的一个功能，所以每次都手动执行是不可行的。

这是我的 gulpfile.js 的片段这与此有关。我有一个 nunjucks在此之前运行的模板，这就是它从 .tmp 开始工作的原因:

gulp.task('html', ['templates'], function() {
  var assets = $.useref.assets({searchPath: ['.tmp', 'app', '.']});

  return gulp.src('.tmp/**/*.html')
    .pipe(assets)
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.csso()))
    .pipe($.rev())
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe($.revReplace())
    .pipe($.gzip({append: false}))
    .pipe(gulp.dest('dist'))
    .pipe($.size({title: 'html'}));
});

任何帮助将不胜感激!感谢提供工具!

Answer 1

我遇到了类似的问题。我会尝试调整您的搜索路径。我的最初看起来像这样:

  var assets = $.useref.assets({searchPath: './'});

将其更改为此修复:

  var assets = $.useref.assets({searchPath: ''});