2

緑色のチェック マークと灰色のチェック マークの 2 つの画像があります。これらは、ユーザーがリスト内の項目をチェックまたはチェック解除すると、表示/非表示になります。私が抱えている問題は、アプリの画像をで縮小するとgrunt-contrib-imagemin、これら2つの画像ng-srcが縮小された画像の名前に変更されないことです。なぜこれが起こるのか、それを修正する方法はありますか?

<img ng-if="item.checkedState === 'unchecked'" ng-src="images/unchecked.png" ng-click="changeCheckedState(item)">
<img ng-if="item.checkedState === 'checked'" ng-src="images/checked.png" ng-click="changeCheckedState(item)">

私のuseminタスク：

usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  options: {
    assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images']
  }
}

編集: @Tony Barnes ソリューションをテストすることにより:

usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  options: {
    assetsDirs: ['<%= yeoman.dist %>','<%= yeoman.dist %>/images'],
    patterns: {
    html: [
        [/<img[^\>]*[^\>\S]+ng-src=[""]([^'"\)#]+)(#.+)?["']/gm, 'Update the HTML with non standard ng-src attribute on img']
    ]
    }
  }
}

スクリプトとスタイルの他の src 名は失敗します。つまり、ファイルvendors132918.jsがvendor.jsになり、ファイルが呼び出されないため、エラーsrcがスローされます。ここで他のが失敗する原因は何ですか? 私が見る限り、パターンは画像のsrcを除いて何も変更すべきではありません..404 not foundvendor.jssrc

4

2 に答える 2

4

問題はgrunt-usemin、参照を置き換えるタスクにあります。デフォルトでng-srcは、usemin によって無視されます。

このhtmlパターンを含めると、ng-src参照が正しく置き換えられます。

usemin: {
  options: {
    patterns: {
      html: [

        [/<img[^\>]*[^\>\S]+ng-src=[""]([^'"\)#]+)(#.+)?["']/gm, 'Update the HTML with non standard ng-src attribute on img']

      ]
    }
  }
}

（この最近のコミットに触発されました）

ただし、これにより、スタイルとスクリプトへの他の参照が壊れます。上記の追加により、他のデフォルトuseminパターンが上書きされているようです。

これをすべて機能させるには、上記のパターンとデフォルトのパターンの from を組み合わせる必要がありますusemin。

options: {
    assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images'],
    patterns: {
      html: [
         [/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm,
         'Update the angular directives that ref revved images'],

         //defaults from node module
         [ /<script.+src=['"]([^"']+)["']/gm,
         'Update the HTML to reference our concat/min/revved script files'
         ],
         [ /<link[^\>]+href=['"]([^"']+)["']/gm,
         'Update the HTML with the new css filenames'
         ],
         [ /<img[^\>]+src=['"]([^"']+)["']/gm,
         'Update the HTML with the new img filenames'
         ],
         [ /data-main\s*=['"]([^"']+)['"]/gm,
         'Update the HTML with data-main tags',
         function (m) { return m.match(/\.js$/) ? m : m + '.js'; },
         function (m) { return m.replace('.js', ''); }
         ],
         [ /data-(?!main).[^=]+=['"]([^'"]+)['"]/gm,
         'Update the HTML with data-* tags'
         ],
         [ /url\(\s*['"]([^"']+)["']\s*\)/gm,
         'Update the HTML with background imgs, case there is some inline style'
         ],
         [ /<a[^\>]+href=['"]([^"']+)["']/gm,
         'Update the HTML with anchors images'
         ],
         [/<input[^\>]+src=['"]([^"']+)["']/gm,
         'Update the HTML with reference in input'
         ]
       ],
      js: [
          [/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 
          'Update the JS to reference our revved images']
      ]
    }
  }
于 2015-03-16T12:17:56.590 に答える