generator-angularで生成したプロジェクトをgrunt buildすると画像が見つからない

generator-angularを使ってAngularJSのひな形を生成し、 ビューにimgタグを書いていると、 grunt build で画像の参照が切れました。

grunt-filerevによる名前の変更が反映されていないようです。 例えば app/views/main.html に以下のようなタグがあったとします。

<img src="../images/sample.jpg">

ここで参照している画像が app/images/sample.jpg にあったとすると、 grunt build ( grunt-fillerev )で dist/images/sample01.4b20b3c2.jpg に出力されます。

ビューは grunt-usemin によって以下のようなタグに置き換わるべきなのですが、 置き換わっていないため、404 Not Foundとなっていました。

<img src="../images/sample01.4b20b3c2.jpg">

原因と解決策

Gruntfile.jsの先頭に、処理速度の都合上、一階層しか処理をしないと記述されているので、 app/index.html のみが対象で、ビューとなる app/views/ 以下のファイルが対象外となっていました。

というわけでGruntfile.js のuseminで対象とするhtmlのファイルを増やします。

    usemin: {
      // html: ['<%= yeoman.dist %>/{,*/}*.html'], // generator-angularによる設定
      html: ['<%= yeoman.dist %>/**/*.html'], // 再帰的に対象とする
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
      options: {
        assetsDirs: [
          '<%= yeoman.dist %>',
          '<%= yeoman.dist %>/images',
          '<%= yeoman.dist %>/styles'
        ]
      }
    },