3

I'm building a site using the Yeoman generator: https://github.com/Thomas-Lebeau/generator-bootstrap-less.

I've installed fancybox using bower by doing the following:

  • bower install fancybox --save
  • add the fancybox script include into my usemin build block in index.html
  • @import "../bower_components/fancybox/source/jquery.fancybox.css"; into my only .less file
  • finally, copy across the fancybox vendor images using the following config in grunt's copy task.

code:

// Gruntfile.js
...
copy: {
    dist: {
        files: [{
            expand: true,
            dot: true,
            cwd: '<%= yeoman.app %>',
            dest: '<%= yeoman.dist %>',
            src: [
                '*.{ico,png,txt}',
                '.htaccess',
                'images/{,*/}*.{webp,gif}']
        }, {
            expand: true,
            dot: true,
            cwd: '<%= yeoman.app %>/bower_components/fancybox/source',
            src: '**/*.{png,jpg,jpeg,gif}',
            dest: '<%= yeoman.dist %>/bower_components/fancybox/source'
        }]
    },
    ...

(Sorry, don't know why the formatting is glitched there.. https://gist.github.com/ptim/8555923)

This is working for me, but I'd like to take it a step further to get a better understanding of what's going on. It's working simply because I'm replicating the relative path used in app/ when I copy.

What I'd like is to have the bower assets copied in with my other images, and the paths in my html rewritten (as happens with imagemin and usemin, etc)

....
   }, {
      expand : true,
      dot : true,
      cwd : '<%= yeoman.app %>/bower_components/fancybox/source',
      src : '**/*.{png,jpg,jpeg,gif}',
      dest : '<%= yeoman.dist %>/images'
    }]
 ....

How do I achieve that using the conventions of this package?

Here's the trail I'm following:

  • grunt build finishes with copy, rev, usemin,
  • rev is adding a version number to the fancybox files
  • usemin is executes usemin:html and rewrites all the image filenames to match the rev'd files
  • usemin:css then runs, but doesn't list any rewrites, then grunt finishes:

    Running "usemin:css" (usemin) task

    Processing as CSS - dist/styles/cf3b732a.main.css Update the CSS with new img filenames

    Done, without errors.

Can anyone suggest a tweak for me?

Community
  • 1
  • 1
ptim
  • 14,902
  • 10
  • 83
  • 103

0 Answers0