Managing images in bower packages using grunt

Viewed 2995

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 grunt-usemin.

To accomplish this I'm moving all of the compiled assets (including bower scripts/styles) to a dist/public directory. I end up with a <cache-buster>.vendor.js and a <cache-buster>.vendor.css file, which contain all of the optimized bower components.

The question is, how should I manage images that ship with various bower packages? I could manually move them into my images folder, but I would prefer to leave them packaged in bower_components (where they belong, in my opinion) and leave it up to grunt during the build process.

Any input would be appreciated.


Gruntfile.js (extract)

    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'
  ]);

layout.jade (extract)

//-<!-- build:css(assets) css/vendor.css -->
link(href='/bower_components/nivo-slider/nivo-slider.css')
//-<!-- endbuild -->

//-<!-- build:css(.tmp) css/application.css -->
link(href='/css/one.css')
link(href='/css/two.css')
//-<!-- endbuild -->

//-<!-- build:js(assets) js/vendor.js -->
script(type='text/javascript', src='/bower_components/jquery/jquery.js')
script(type='text/javascript', src='/bower_components/nivo-slider/jquery.nivo.slider.js')
//-<!-- endbuild -->

//-<!-- build:js(.tmp) js/application.js -->
script(type='text/javascript', src='/js/one.js')
script(type='text/javascript', src='/js/two.js')
//-<!-- endbuild -->
1 Answers
Related