0

I am optimizing old web project. I want to combine multiple assets css files into single css file (and minify later). I was trying to do it using gulp + sass. I made a single file but the urls are now wrong because final css file is in different dir.

I am adding image to explain my problem

https://i.stack.imgur.com/Et9CV.png

file: 'CSS_FINAL.CSS' is my merged file, which i want to include to html folder: 'assets' contains multiple folder of assets with their images, js etc. files: 'asset_1.css' and 'asset_2.css' needs to merged to file 'CSS_FINAL.CSS' top black box: file 'CSS_FINAL.CSS' outcome i am seeking. two bottom black boxes: assets css files.

Is there are way to merge those .css files fixing url paths?

Note: i don't want to change any content in assets files.

Linas Baublys
  • 11
  • 2
  • Reference here: http://stackoverflow.com/questions/9287823/combine-and-minify-multiple-css-js-files – Sean Stopnik Jul 18 '15 at 20:43
  • @SeanStopnik That has nothing to do with this question. The problem is the URLs to the assets. – cimmanon Jul 18 '15 at 20:45
  • @cimmanon Either I am misunderstanding the question, or it's worded very confusingly, but using something like Sass or just a simple minify script is exactly the answer. Maybe I'm not getting it? – Sean Stopnik Jul 18 '15 at 20:55
  • I understand now, but not sure why you are trying to do this?? You need to edit the assets files or not put the files in a sub folder. You are over-complicating it. When reading a CSS file, the path should reference where the asset is. Why would you not want that? Think about the developer who has to take on the project after you... Will they be able to quickly read the CSS and know what's going on? This seems really complicated just to put images next to CSS files, rather than all images in an assets/images folder. – Sean Stopnik Jul 18 '15 at 21:02
  • No one is going to read final minified file. Its like cache for better performance, but if changes should be made in assets (replaced or removed), new cache should be generated. IMO task is fine I just cant find right solution. – Linas Baublys Jul 18 '15 at 21:06
  • Why not use `gulp-contrib-copy` to copy any asset images into a sub folder of the `final_css_folder`? Then you would reference the sub folder in the Sass/SCSS file? Then set Gulp to watch changes in either the images or the css files and then they will run SASS and/or `-copy` as needed? But those images will never be DRY unless you keep them in a separate location from your CSS anyway. – codyogden Jul 19 '15 at 06:59
  • gulp-replace (https://www.npmjs.com/package/gulp-replace) might be a good solution. You could just change the matching URLs, as each file is processed. – Cully Jul 20 '15 at 01:55

1 Answers1

0

While reading about minify I found some keyword which helped me to found gulp-css-rebase-urls (https://www.npmjs.com/package/gulp-css-rebase-urls). Its posible to set root url path to any destination (option is not documented atm, but found it after digging in code), so css file url's with me mapped from that dir.

Linas Baublys
  • 11
  • 2