资产角缺少应用使用内置咕噜 [英] Assets missing in Angular application built using grunt

问题描述

我已经建立了使用约曼和AngularJS（和所有的东西，与它一起去像咕噜声和鲍尔）。

I have built an application using Yeoman and AngularJS (and all the stuff that goes along with it like Grunt and Bower).

使用本地运行时，这一切都完美地咕噜服务。但是，运行咕噜和部署应用程序后，有一对夫妇失踪的资产，我不知道什么是最好的方式来解决它。

It all works perfectly when running locally using grunt serve. However, after running grunt and deploying the application, there are a couple of missing assets and I'm not sure what the best way to solve it is.

首先，运行咕噜声，似乎对面DIST的图像复制，但它重命名他们没有在CSS调整引用。 应用程序/图像/ uparrow.png 变为 DIST /图像/ 3f84644a.uparrow.png 。

Firstly, running Grunt seems to copy the images across to dist but it renames them without adjusting the references in the CSS. app/images/uparrow.png becomes dist/images/3f84644a.uparrow.png.

下面是从main.scss一行：

Here is a line from the main.scss:

.table.sortable th.sorted-asc        { background-image: url(../images/uparrow.png); }

当它在构建过程编译为CSS，它不会使浏览器尝试加载 DIST /图像/ uparrow.png 这是缺少改写路径

When it is compiled to CSS during the build process, it doesn't rewrite the path so the browser tries to load dist/images/uparrow.png which is missing.

其次，存在与加载的字体为引导插件的问题。引导CSS在应用程序/ bower_components /引导/距离/ CSS / bootstrap.css 引用 ../字体/ glyphicons，半身人，regular.woff 。相对路径被解析为应用程序/ bower_components /引导/距离/字体/ glyphicons，半身人，regular.wof 和完美的作品。

Secondly, there is an issue with loading the fonts for the Bootstrap plugin. The bootstrap CSS at app/bower_components/bootstrap/dist/css/bootstrap.css references ../fonts/glyphicons-halflings-regular.woff. The relative path gets resolved to app/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof and that works perfectly.

在建虽然，厂商CSS被合并，并在 DIST /风格/ 8727a602.vendor.css精缩到一个单一的CSS文件。到字体的相对路径没有得到改写，虽然。因此，它会试图查找字体在 DIST /字体文件夹，而不是 DIST / bower_components /引导/距离/字体/ glyphicons-半身正规.wof 该文件实际上是。

Once built though, the vendor CSS gets combined and minified into a single CSS file at dist/styles/8727a602.vendor.css. The relative path to the font doesn't get rewritten though. So it tries to look for fonts in the dist/fonts folder, rather than dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof where the file actually is.

任何意见多少AP preciated。

Any advice much appreciated.

推荐答案

您正面临着哪些还没有固定的建立任务约曼错误。我相信，有没有干净的解决方案，因此这里有一些解决办法。

You are facing Yeoman bugs with the build task which are not fixed yet. I believe there are no clean solutions so here are a few workarounds.

首先，图像转：

只是删除​​从转任务的图像，你会好到哪里去。

Just remove images from the rev task and you will be good to go.

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/*'
      ]
    }
  }
},

其次，引导，萨斯字体不会复制到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/*.*']
    }]
  },
  ...
}

运行咕噜构建这些更改后再次，它应该工作。

Run grunt build again after these changes and it should work.

这篇关于资产角缺少应用使用内置咕噜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！