目前有没有办法做相对输出路径?在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','']});