Question

目前有办法做相对输出路径吗？在gulp-useref或其他？

我目前的情况：

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

在基于index.html的{{1}}中，一切正常：

app/

 <script src="/scripts/main.js"></script> 文件位于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

任何帮助将不胜感激！谢谢你的工具！

Answer 1

我有类似的问题。我会尝试调整你的搜索路径。我最初看起来像这样：

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

将其更改为固定它：

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

Answer 2

为什么不使用绝对路径？

<!-- build:js /scripts/main.min.js -->
<!-- build:js /scripts/about.min.js -->

然后，您需要使用可能取决于上述任务的其他gulp任务将索引文件移动到正确的位置。

gulp.task('full-build', ['partial-build'], function () {
      gulp.src('index.html', { base: './' })
        .pipe(gulp.dest(buildLocation));
});

Answer 3

我也面临类似的问题，并找到了解决方案。它可能会帮助其他人

我的目标结构就像

Project_root
   app
      scripts
      index.html
   bower_component

在index.html文件中，它引用如下所示，这是由inject

自动生成的

<!-- build:js js/lib.js -->
  <!-- bower:js -->
   <script src="../bower_components/jquery/dist/jquery.js"></script>
   <script src="../bower_components/angular/angular.js"></script>    
  <!-- endbower -->
<!-- endbuild -->

<!-- build:js js/app.js-->
  <!-- inject:js -->    
   <script src="/app/scripts/app.js"></script>
   <script src="/app/scripts/controllers/authentication.js"></script>
  <!-- endinject -->
<!-- endbuild -->

在gulpfile中我设置了searchPath，并在输出文件中出现了一些奇怪的行为

$.useref.assets({searchPath: ''});  >> it generated only lib.js file
$.useref.assets({searchPath: ['']}); >> it generated only app.js file

最后，使用以下代码

生成app.js和lib.js文件

$.useref.assets({searchPath: ['./bower_components','']});

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

3 个答案: