Gulp secondary assets

Question

I have Gulp compiling all my JS and CSS into combined files and outputting to /public/assets/js/application.js or /public/assets/js/application.css

This is all great but things like URL paths to linked files like CSS background images etc now no longer work.

As these linked assets are in my /vendor/assets/bower-components directory, I can't just rewrite the path as /vendor is not web accessible. What I would like to do is to go through the CSS and JS compiled files, find all the linked asset references, go and grab them and place them in /public/assets/<filetype-here>

then rewrite the paths to the new locations.

What I need is a way of find all the references in (mainly CSS) but could be JS too. Grab that file, check what filetype it is, place it in /public/assets<filetype-here> folder and rewrite the original filepath.

How would you go about doing this? I realise I can use plugins like gulp-repace etc but not sure how to do the "take this thing that's been found, and go and get that file and do something with it" kind of thing.

An example would be very very helpful.

Thanks

Answer 1

I was about to suggest you to do it yourself, but then I found gulp-bower-fix-css-path.

Apparently, it's a (not yet so popular) tool which might suit your project's needs:

gulp-bower-fix-css-path

This module fix (re-organize) the css assets path from bower-installer. Specify the absolute path folder to public/vendor and fix all path like (fonts, imgs, svgs)

^{Small tool module to use combining with bower (bower-installer). Fix all css path (assets like fonts/images) in all diferent repositories that your project depends}

That said, I suggest you to try using that lib and customize it, if necessary, and make a pull request afterwards. Otherwise you would need to implement all of this from scratch.