背景
我正在使用Yeoman Webapp搭建我的前端。
在gruntfile中,他们正在使用grunt-rev和grunt-usemin
Grunt-rev将“撤消”我的 Assets ,而grunt-usemin将更新 Assets 路径。
问题
我有一个正在使用的webfont。我将字体文件夹放置在gruntfile.js('styles/fonts/{,/}.*')中提到的样式目录中。Grunt serve可以正确显示我的字体,但是在构建文件后,它不再起作用,因为字体文件名以一些奇怪的乱码字符为前缀。例如:63b122ab.fontname.ttf而不是fontname.ttf
这是为了清除缓存。
但是我的.css文件没有更新路径来拾取它。
在我的gruntfile.js中的usemin块中
我应该怎么办?我目前有这个,但是没有用。
usemin: {
options: {
assetsDirs: ['<%= config.dist %>', '<%= config.dist %>/images', '<%= config.dist %>/styles/fonts']
},
html: ['<%= config.dist %>/{,/}.html'],
css: ['<%= config.dist %>/styles/{,/}.css']
},
它正在拾取其他所有东西,但没有拾取字体。我手动创建了fonts文件夹。因此,我猜测必须更新gruntfile.js以反射(reflect)更改。
最佳答案
我在css文件中发出咕gr声时遇到了同样的问题。我这样更改了Gruntfile.js中的usemin配置:
usemin: {
html: ['<%= yeoman.dist %>/<%= yeoman.client %>/{,!(bower_components)/**/}*.html'],
css: ['<%= yeoman.dist %>/<%= yeoman.client %>/!(bower_components){,*/}*.css'],
js: ['<%= yeoman.dist %>/<%= yeoman.client %>/!(bower_components){,*/}*.js'],
options: {
assetsDirs: [
'<%= yeoman.dist %>/<%= yeoman.client %>',
'<%= yeoman.dist %>/<%= yeoman.client %>/assets/images'
],
// This is so we update image and font 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'],
[/(assets\/fonts\/.*?\.(?:woff|ttf|svg|eot))/gm, 'Update the CSS to reference our revved fonts']
]
}
}
}