Managing images in bower packages using grunt

Question

I have an express application in which I use bower to manage external dependencies. I also use grunt to create an external interface by combining, extinguishing, minimizing, and modifying all assets, including the scripts / styles that come with each bower component, using grunt-usemin .

To do this, I move all compiled assets (including scripts / styles) to the dist/public directory. I get the <cache-buster>.vendor.js and <cache-buster>.vendor.css that contain all the optimized bower components.

The question is, how do I manage the images that come with the various column packages? I could manually transfer them to my images folder, but I would prefer to leave them packaged in bower_components (where they belong, in my opinion), and leave it to a 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 --> 

Answer 1

Here is a solution adapted to your Grunt file:

 rev: { dist: { files: [{ src: [ 'dist/public/css/{,*/}*.css', 'dist/public/js/{,*/}*.js', 'dist/public/img/{,*/}*.{gif,jpeg,jpg,png}', 'dist/bower_components/**/*.{png,jpg,jpeg,gif,webp,svg,eot,ttf,woff}' ] }] } }, useminPrepare: { options: { dest: 'dist/public', flow: { html: { steps: { js: ['concat', 'uglifyjs'], css: ['cssmin'] }, post: {} } } }, jade: ['dist/views/{,*/}*.jade'] }, cssmin: { options: { root: 'src' } }, 

It is assumed that your bower_compontents directory is located in the source directory with the name 'src'. In my environment (loaded with Yeomen), this was in the application, so you may need to configure cssmin.

Here's what happens:

First, we add rev checksums to the bunch of possible resource files in the bower_components directory.

Next, the flow configuration tells usemin to skip the concat step for css files. This is because cssmin does the concatenation itself, and cssmin needs to know the origin of the css files in order to correct the relative path for the link resources.

Finally, config root tells cssmin which path to start searching to find resources.

You can verify that the results are correct by going to dist/styles/<cache-buster>.vendor.css , and to verify that the images have relative URLs starting with / bower -components /

For example, in my assembly, I have bootstrap.css built into my vendor.css, and it was rewritten as follows:

 @font-face{ font-family:'Glyphicons Halflings'; src:url(/bower_components/bootstrap/dist/fonts/2ad0632b.glyphicons-halflings-regular.eot); 

(adding a line for readability, all its cssminified in reality).

Hope this helps.

Providing credit where necessary, I found it here: https://stackoverflow.com/a/377629/ I have adjusted it for your configuration and added the revision configuration.