Combining / Moving CSS Files Using Gulp

Question

I am looking for a chain of plugins for use with Gulp that provides:

• source map support
• less
• minification
• concatenation
• Replacing URL (rebase) with relocation / concat

I currently have the first four, but I can’t find a combination of existing plugins that will also give me the latest (URL reload). I did not find plugins to redistribute the URLs that emit the source files.

Just to be clear, my problem is that when I compile a few small CSS files from my project development folders and put them in a shared folder, moving due to concatenation breaks relative URLs, for example for background images.

edits:

It seems that the whole chain of tools that I am currently using is already designed to solve this problem. So this is supposedly the answer. However, another question arises as to how the required syntax should work.

There are theoretically many duplicates in this question:

• clean-css # 152: reposition function is very frustrating
• clean-css # 195: root option on Windows
• clean-css # 263: How to get relativeTo parameter for working with CSS files in different ways
• http://adilapapaya.com/docs/clean-css/#howtorebaserelativeimageurls
• Grunt cssmin reset relative URI?

Unfortunately, no answers really explain the syntax; they just demonstrate voodoo; so I don’t know why the following does not work. If I can solve it, I will return here and note that this is customary to indicate that this tool chain is really doing what I need.

Source files:

 /assets /site styleInput1.less "url(../site/logo.png)" logo.png background.png /application styleInput2.less "url(../site/background.png)" 

Gulp Task:

 gulp.task(filename, function () { return gulp.src(files) .pipe(sourcemaps.init()) .pipe(less()) .pipe(minifyCss({ relativeTo: './compiled' })) .pipe(concat(filename)) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('./compiled')); }); 

Result, with broken URLs. Pay attention to several defects. Although CSS has elevated the directory level relative to required assets, an additional parent directory (!) Has been added. In addition, one of the URLs has changed the name of the hard assets folder (!). Very strange:

 /compiled styleOutput1.css "url(../../compiled/logo.png)" styleOutput2.css "url(../../site/background.png)" 

My apologies for continuing voodoo, but here is my working Gulp pipe :

 .pipe(minifyCss({ relativeTo: './compiled', target: './compiled' })) 

And the correct conclusion:

 /compiled styleOutput1.css "url(../assets/site/logo.png)" styleOutput2.css "url(../assets/site/background.png)" 

Answer 1

I personally use gulp -minify-css and specify the relativeTo attribute.

 gulp.task('css', function() { gulp.src('./assets/css/main.css') // Here I specify the relative path to my files .pipe(minifyCSS({keepSpecialComments: 0, relativeTo: './assets/css/', processImport: true})) .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false })) .pipe(gulp.dest('./assets/css/dist/')) .pipe(notify({ "title": "Should I Go?", "subtitle": "Gulp Process", "message": '<%= file.relative %> was successfully minified!', "sound": "Pop", "onLast": true })); }); 

If this does not work for you, they have many other options for resetting the urls: https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-programmatically

In particular:

• rebase - set to false to skip reloading the URL.
• relativeTo - the way to resolve relative @import rules and URLs
• restructuring - set to false to disable restructuring in Advanced Optimization
• root - path to resolving absolute @import rules and relative relative relative URL