Missing image or font files for bower packages

sage
6

In my case I wrote a gulp task to copy an image file I needed to the /dist/styles/ folder (which is not how it should be, but I didn’t want to hack bower stylesheets either…)

  • Install mosaic-gulp-task-copy: npm install --save mosaic-gulp-task-copy

  • Edit gulpfile.js and add this to the list of requirements at the top:var copy = require("mosaic-gulp-task-copy");

  • Add this task somewhere in the file (change the src and dest variables to suit your needs and don’t use **/* unless you want the entire bower folder crawled)

// Copy vendor files from bower components to the public folder 
gulp.task("copy", copy([
  {
    src: "bower_components/fotorama/**/*.png",
    dest: "dist/styles"
  },
  {
    src: "bower_components/other/stuff/I/need/**/*.jpg",
    dest: "dist/styles"
  }
]));
  • Add the task to the build chain
gulp.task('build', function(callback) {
  runSequence('styles',
    'scripts', ['fonts', 'images', 'copy'],
    callback);
});
  • Run gulp build and you should see your copy task working: [05:50:22] Starting 'copy'... and check your destination folder, what you need should be in there.

Docs: https://www.npmjs.com/package/mosaic-gulp-task-copy

EDIT: updated the dest references to specify directory paths, since I couldn’t get fancy with the pipe command