web-dev-qa-db-ja.com

Angular gruntを使用して構築されたアプリケーションで欠落しているアセット

私はYeomanとAngularJS（およびGruntやBowerなどのそれに付随するすべてのもの）を使用してアプリケーションを構築しました。

grunt serveを使用してローカルで実行すると、すべて完全に機能します。ただし、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プラグインのフォントの読み込みに問題があります。bootstrap CSS at app/bower_components/bootstrap/dist/css/bootstrap.cssは../fonts/glyphicons-halflings-regular.woffを参照します。相対パスはapp/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wofに解決され、それは完全に機能します。

ただし、ビルドされると、ベンダーのCSSは結合され、dist/styles/8727a602.vendor.cssで単一のCSSファイルに縮小されます。ただし、フォントへの相対パスは書き換えられません。そのため、ファイルが実際にあるdist/fontsではなく、dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wofフォルダーでフォントを検索しようとします。

どんなアドバイスも大歓迎です。

angularjsgruntjsyeomanbower
16
theandywaite

buildタスクでYeomanのバグに直面していますが、まだ修正されていません。クリーンな解決策はないと思いますので、ここにいくつかの回避策があります。

まず、画像の回転：

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フォルダーにコピーされません。私はこのバグに何時間も費やしましたが、適切な解決策を見つけることができませんでした。最後に、copyタスクに新しいルールを追加することにしました。

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 buildこれらの変更後、再び機能するはずです。

27
Guilhem Soulas

CSSの問題に対する適切な解決策を見つけました-SCSSには画像用の関数が組み込まれており、これによりアセットへのパスが自動的に書き換えられます。

.table.sortable th.sorted-asc        { background-image: image-url('uparrow.png'); }
3
theandywaite

ルートオプション付きのcssminは、すべての相対パスを置き換えます。

gruntfile.jsでcssminのルートオプションを無効にすることができます

cssmin: {
  options: {
    //root: '<%= yeoman.app %>'
  }
},
2
Eduardo Dennis

私はまったく同じ問題を抱えていて、次の方法で解決しました。

1。コピータスク（gruntfile内）にbootstratフォントを追加します。

{
expand: true,
cwd: ‘src/main/webapp/bower_components/bootstrap/dist’,
 src: ‘fonts/*’,
 dest: ‘<%= yeoman.dist %>/assets/’
}

これにより、dist/assets/fontsフォルダー内のbootstrapフォントがコピーされます。

2。cssminタスクを削除するか、rootパラメーターをコメントアウトします。これで、パスに関する問題が解決するはずです。

詳細については、 詳細な説明を含むこの投稿を確認してください ：

1
ignacio.suay