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

gulp-useref – relative output paths in different level folders

本文关键字：相对 输出 路径 文件夹 gulp-useref      更新时间：2023-09-26

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

我目前的情况：

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

在基于app/的index.html中，一切正常：

<!-- 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'}));
});

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

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

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

将其更改为此修复了它：

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

为什么不使用绝对路径？ 

<!-- 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));
});

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

我的目录结构就像

Project_root
   app
      scripts
      index.html
   bower_component

在索引.html文件中，它引用了如下内容，该文件由注入自动生成

<!-- 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 -->

在gulp文件中，我正在设置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','']});
相关文章：