阻止 grunt 更改字体名称
Stop grunt from changing names on fonts
所以我现在的情况是我已将字体添加到我的 Yeoman
项目中。但是有一个小问题。每当我 运行 grunt build
我的字体的文件名被更改时,但它在我的 CSS
中没有改变导致它不起作用。
我该如何解决这个问题。我知道我必须查看我的 Gruntfile.js
内部,但我不知道去哪里查看。
我已经试过了:
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/public/{,*/}*.html'],
css: ['<%= yeoman.dist %>/public/{,*/}*.css'],
js: ['<%= yeoman.dist %>/public/{,*/}*.js'],
options: {
assetsDirs: [
'<%= yeoman.dist %>/public',
'<%= yeoman.dist %>/public/assets/images',
'<%= yeoman.dist %>/public/assets/fonts'
],
// This is so we update image references in our ng-templates
patterns: {
js: [
[/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
],
css: [
[/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the CSS to reference our revved images']
]
}
}
},
因为我认为如果我可以让它更改我 CSS 中的名称,那么它可能会起作用。但这并不能真正解决任何问题:-(
更新
这里要求的是文件名的变化
之前:
ITCEDSCR.TTF
之后
20118b60.ITCEDSCR.TTF
根据https://github.com/yeoman/generator-webapp/issues/459 ->
{
usemin: {
options: {
assetsDirs: [
'<%%= config.dist %>',
'<%%= config.dist %>/images',
'<%%= config.dist %>/styles'
]
},
html: ['<%%= config.dist %>/{,*/}*.html'],
css: ['<%%= config.dist %>/styles/{,*/}*.css']
}
}
我猜摆脱字体应该会有帮助?
实际解决方案!
感谢 Fer To link 我找到了解决方案。这有点像他的建议,只需要在其他地方也更改代码。
这是我的解决方案:
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/public/{,*/}*.js',
'<%= yeoman.dist %>/public/{,*/}*.css',
//'<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
//'<%= yeoman.dist %>/public/assets/fonts/*'
]
}
}
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/public/{,*/}*.html'],
css: ['<%= yeoman.dist %>/public/{,*/}*.css'],
js: ['<%= yeoman.dist %>/public/{,*/}*.js'],
options: {
assetsDirs: [
'<%= yeoman.dist %>/public',
'<%= yeoman.dist %>/public/assets/images'
],
// This is so we update image references in our ng-templates
patterns: {
js: [
[/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
]
}
}
},
所以我现在的情况是我已将字体添加到我的 Yeoman
项目中。但是有一个小问题。每当我 运行 grunt build
我的字体的文件名被更改时,但它在我的 CSS
中没有改变导致它不起作用。
我该如何解决这个问题。我知道我必须查看我的 Gruntfile.js
内部,但我不知道去哪里查看。
我已经试过了:
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/public/{,*/}*.html'],
css: ['<%= yeoman.dist %>/public/{,*/}*.css'],
js: ['<%= yeoman.dist %>/public/{,*/}*.js'],
options: {
assetsDirs: [
'<%= yeoman.dist %>/public',
'<%= yeoman.dist %>/public/assets/images',
'<%= yeoman.dist %>/public/assets/fonts'
],
// This is so we update image references in our ng-templates
patterns: {
js: [
[/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
],
css: [
[/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the CSS to reference our revved images']
]
}
}
},
因为我认为如果我可以让它更改我 CSS 中的名称,那么它可能会起作用。但这并不能真正解决任何问题:-(
更新
这里要求的是文件名的变化
之前:
ITCEDSCR.TTF
之后
20118b60.ITCEDSCR.TTF
根据https://github.com/yeoman/generator-webapp/issues/459 ->
{
usemin: {
options: {
assetsDirs: [
'<%%= config.dist %>',
'<%%= config.dist %>/images',
'<%%= config.dist %>/styles'
]
},
html: ['<%%= config.dist %>/{,*/}*.html'],
css: ['<%%= config.dist %>/styles/{,*/}*.css']
}
}
我猜摆脱字体应该会有帮助?
实际解决方案!
感谢 Fer To link 我找到了解决方案。这有点像他的建议,只需要在其他地方也更改代码。
这是我的解决方案:
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/public/{,*/}*.js',
'<%= yeoman.dist %>/public/{,*/}*.css',
//'<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
//'<%= yeoman.dist %>/public/assets/fonts/*'
]
}
}
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/public/{,*/}*.html'],
css: ['<%= yeoman.dist %>/public/{,*/}*.css'],
js: ['<%= yeoman.dist %>/public/{,*/}*.js'],
options: {
assetsDirs: [
'<%= yeoman.dist %>/public',
'<%= yeoman.dist %>/public/assets/images'
],
// This is so we update image references in our ng-templates
patterns: {
js: [
[/(assets\/images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
]
}
}
},