title: Managing images in bower packages using grunt
body: <p>I have an express app in which I'm using bower to manage the front-end dependencies. I'm also using grunt to build the front end by concatenating, uglifying, minifying, and rev'ing all the assets, including the scripts/styles that ship with each bower component using <a href="https://github.com/yeoman/grunt-usemin" rel="noreferrer"><code>grunt-usemin</code></a>.</p>
  
  <p>To accomplish this I'm moving all of the compiled assets (including bower scripts/styles) to a <code>dist/public</code> directory. I end up with a <code>&lt;cache-buster&gt;.vendor.js</code> and a <code>&lt;cache-buster&gt;.vendor.css</code> file, which contain all of the <em>optimized</em> bower components.</p>
  
  <p>The question is, how should I manage images that ship with various bower packages? I could manually move them into my <code>images</code> folder, but I would prefer to leave them packaged in <code>bower_components</code> (where they belong, in my opinion) and leave it up to grunt during the build process.</p>
  
  <p>Any input would be appreciated.</p>
  
  <hr>
  
  <p><strong>Gruntfile.js (extract)</strong></p>
  
  <pre><code>    rev: {
        dist: {
          files: [{
            src: [
              'dist/public/css/{,*/}*.css',
              'dist/public/js/{,*/}*.js',
              'dist/public/img/{,*/}*.{gif,jpeg,jpg,png}'
            ]
          }]
        }
      },
  
      useminPrepare: {
        options: {
          dest: 'dist/public'
        },
        jade: ['dist/views/{,*/}*.jade']
      },
  
      usemin: {
        jade: ['dist/views/{,*/}*.jade'],
        options: {
          assetsDirs: ['dist/public'],
          patterns: {
            jade: require('usemin-patterns').jade
          }
        }
      },
  
      concurrent: {
        server: [
          'stylus', 'coffee'
        ],
        dist: [
          'stylus', 'coffee'
        ]
      },
  
      copy: {
        dist: {
          files: [{
            expand: true,
            cwd: 'views',
            dest: 'dist/views',
            src: '{,*/}*.jade'
          }]
        }
      }
    });
  
    grunt.registerTask('server', [
      'clean:server',
      'concurrent:server',
      'express:server',
      'watch'
    ]);
  
    grunt.registerTask('build', [
      'clean:dist',
      'concurrent:dist',
      'copy:dist',
      'useminPrepare',
      'concat',
      'uglify',
      'cssmin',
      'rev',
      'usemin'
    ]);
  </code></pre>
  
  <hr>
  
  <p><strong>layout.jade (extract)</strong></p>
  
  <pre><code>//-&lt;!-- build:css(assets) css/vendor.css --&gt;
  link(href='/bower_components/nivo-slider/nivo-slider.css')
  //-&lt;!-- endbuild --&gt;
  
  //-&lt;!-- build:css(.tmp) css/application.css --&gt;
  link(href='/css/one.css')
  link(href='/css/two.css')
  //-&lt;!-- endbuild --&gt;
  
  //-&lt;!-- build:js(assets) js/vendor.js --&gt;
  script(type='text/javascript', src='/bower_components/jquery/jquery.js')
  script(type='text/javascript', src='/bower_components/nivo-slider/jquery.nivo.slider.js')
  //-&lt;!-- endbuild --&gt;
  
  //-&lt;!-- build:js(.tmp) js/application.js --&gt;
  script(type='text/javascript', src='/js/one.js')
  script(type='text/javascript', src='/js/two.js')
  //-&lt;!-- endbuild --&gt;
  </code></pre>