angularjs – 使用grunt构建的Angular应用程序中遗漏的资产
|
我已经使用Yeoman和AngularJS(以及所有的东西，像Grunt和Bower)一起构建了一个应用程序。
当使用grunt服务在本地运行时，这一切都很好。然而，在运行grunt和部署应用程序之后，有几个缺少的资源，我不知道最好的解决方法是什么。 首先，运行Grunt似乎将图像复制到dist，但是在不调整CSS中的引用的情况下重命名它们。 app / images / uparrow.png成为dist / images / 3f84644a.uparrow.png。 这里是main.scss的一行： .table.sortable th.sorted-asc { background-image: url(../images/uparrow.png); }
当它在构建过程中编译成CSS时，它不会重写路径，因此浏览器尝试加载缺少的dist / images / uparrow.png。 其次，加载Bootstrap插件的字体有一个问题。 app / bower_components / bootstrap / dist / css / bootstrap.css上的引导CSS引用../fonts/glyphicons-halflings-regular.woff。相对路径被解析为app / bower_components / bootstrap / dist / fonts / glyphicons-halflings-regular.wof，并且工作完美。 一旦构建了，供应商的CSS将被组合成一个单一的CSS文件，在dist / styles / 8727a602.vendor.css。字体的相对路径不会被重写。所以它试图在dist / fonts文件夹中查找字体，而不是dist / bower_components / bootstrap / dist / fonts / glyphicons-halflings-regular.wof文件的实际位置。 任何建议非常感激。
您正在面对尚未修复的构建任务的Yeoman bug。我相信没有干净的解决方案，所以这里有几个解决方法。
首先，图像转速： 只需从rev任务中删除图像，您将很乐意去。 rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/scripts/{,*/}*.js','<%= yeoman.dist %>/styles/{,*/}*.css',// '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',<- remove that line
'<%= yeoman.dist %>/styles/fonts/*'
]
}
}
},
其次，bootstrap-sass字体不会被复制到dist文件夹。我花了几个小时在这个bug，找不到一个正确的解决方案。最后我决定在复制任务中添加一个新的规则： copy: {
dist: {
files: [{
// your existing rules...
},// add this rule to copy the fonts:
{
expand: true,flatten: true,cwd: '<%= yeoman.app %>',dest: '<%= yeoman.dist %>/fonts',src: ['bower_components/sass-bootstrap/fonts/*.*']
}]
},...
}
在这些更改后再次运行grunt构建，它应该可以工作。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |