Grunt usemin 任务没有正确更新嵌套的相对路径
Grunt usemin task not updating nested relative paths correctly
我有一个用 'webapp-generator' 搭建的 Yeoman 项目,它包含一个带有嵌套 HTML 文件的静态网站,类似于这个结构:
-root/
index.html
-directory/
file1.html
-directory2/
file2.html
-js/
(revved .js files)
-css
(revved .css files)
我正在使用 usemin
和 filerev
任务来更新 .html 文档上的 filerevved 文件路径。它在 js/css/images 上正确更新所有文件名,并且在根 index.html
上正常工作。
但是,在嵌套的 HTML 文件中,它不会替换对正确嵌套路径的引用。
例如.
js/scripts.js
重命名为 js/827385.scripts.js
在index.html
<scripts src="js/scripts.js"></scripts>
解析为:<scripts src="js/827385.scripts.js"></scripts>
但是 在 directory/file1.html(或任何其他嵌套的 html 文件)
<scripts src="../js/scripts.js"></scripts>
也转换为:<scripts src="js/827385.scripts.js"></scripts>
忽略../
相对路径
是否有任何方法可以调整 Grunt 任务以了解文件在目录中的相对深度,从而将相对指示符 ../
保留在重命名的路径中?
下面是相关 Grunt 任务的代码片段。
PS:我已经遵循了这个 Stack Overflow 问题中的一些可能答案:How should I configure grunt-usemin to work with relative path 无济于事。
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= config.dist %>/scripts/{,**/}*.js',
'<%= config.dist %>/styles/{,**/}*.css',
'<%= config.dist %>/images/{,**/}*.*',
'<%= config.dist %>/styles/fonts/{,**/}*.*',
'<%= config.dist %>/*.{ico,png}'
]
}
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
// <%= config.dist %>
useminPrepare: {
options: {
dest: 'out',
// root: '<%= config.app %>'
},
html: '<%= config.app %>/index.html'
// root: '<%= config.app %>'
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: [
'<%= config.dist %>',
'<%= config.dist %>/images',
'<%= config.dist %>/styles'
]
},
html: ['<%= config.dist %>/**/*.html'],
css: ['<%= config.dist %>/styles/**/*.css']
},
就我而言,我发现问题出在 html 文件中的 usemin 配置:
如果您的 index.html 这个 usemin 指令:
<!-- build:js styles/jquery.js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- endbuild -->
在directory/file1.html中你应该尝试使用完整路径:
<!-- build:js /scripts/jquery.js-->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbuild-->
将转换为类似 <script src="/scripts/jquery.34ad31c3.js"></script>
的内容。
我有一个用 'webapp-generator' 搭建的 Yeoman 项目,它包含一个带有嵌套 HTML 文件的静态网站,类似于这个结构:
-root/
index.html
-directory/
file1.html
-directory2/
file2.html
-js/
(revved .js files)
-css
(revved .css files)
我正在使用 usemin
和 filerev
任务来更新 .html 文档上的 filerevved 文件路径。它在 js/css/images 上正确更新所有文件名,并且在根 index.html
上正常工作。
但是,在嵌套的 HTML 文件中,它不会替换对正确嵌套路径的引用。
例如.
js/scripts.js
重命名为 js/827385.scripts.js
在index.html
<scripts src="js/scripts.js"></scripts>
解析为:<scripts src="js/827385.scripts.js"></scripts>
但是 在 directory/file1.html(或任何其他嵌套的 html 文件)
<scripts src="../js/scripts.js"></scripts>
也转换为:<scripts src="js/827385.scripts.js"></scripts>
忽略../
相对路径
是否有任何方法可以调整 Grunt 任务以了解文件在目录中的相对深度,从而将相对指示符 ../
保留在重命名的路径中?
下面是相关 Grunt 任务的代码片段。
PS:我已经遵循了这个 Stack Overflow 问题中的一些可能答案:How should I configure grunt-usemin to work with relative path 无济于事。
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= config.dist %>/scripts/{,**/}*.js',
'<%= config.dist %>/styles/{,**/}*.css',
'<%= config.dist %>/images/{,**/}*.*',
'<%= config.dist %>/styles/fonts/{,**/}*.*',
'<%= config.dist %>/*.{ico,png}'
]
}
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
// <%= config.dist %>
useminPrepare: {
options: {
dest: 'out',
// root: '<%= config.app %>'
},
html: '<%= config.app %>/index.html'
// root: '<%= config.app %>'
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: [
'<%= config.dist %>',
'<%= config.dist %>/images',
'<%= config.dist %>/styles'
]
},
html: ['<%= config.dist %>/**/*.html'],
css: ['<%= config.dist %>/styles/**/*.css']
},
就我而言,我发现问题出在 html 文件中的 usemin 配置:
如果您的 index.html 这个 usemin 指令:
<!-- build:js styles/jquery.js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- endbuild -->
在directory/file1.html中你应该尝试使用完整路径:
<!-- build:js /scripts/jquery.js-->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbuild-->
将转换为类似 <script src="/scripts/jquery.34ad31c3.js"></script>
的内容。