URL rebasing from index.html

Hi

I’m using gulp-clean-css with the version 3.4.23. I’m trying to pack all css files into one, loading it from the index.html

<!-- application css --> <link rel="stylesheet" type="text/css" href="style/application/bootstrap.css"> <!-- endbuild -->

And in the gulp

return gulp.src('src/index.html') .pipe(gulpif('*.css', cleanCSS({options}))) .pipe(uncache()) .pipe(gulp.dest(buildDir));

What options should use to properly rebase the url() inside css file. Resources from url can be allocated in different folders, and they are copy to buildDir. Like: src/a/b/image.png -> buildDir/a/b/image.png

I was playing with relativeTo, target, root, rebase(true/false) and nothing seems to work.

[jakubpawlowicz]

This is odd.

I assume you don’t use rebase: false as an option, right? Does the same thing happen with image URLs as well?

[jakubpawlowicz]

Re 1 - that’s because you need to point relativeTo differently, e.g. this works fine:

var gulp = require('gulp');
var useref = require('gulp-useref');
var cleanCSS = require('gulp-clean-css');
var gulpif = require('gulp-if');
var uncache = require('gulp-uncache');

var targetDir = 'dist';

gulp.task('lib-resources', function () {
  return gulp.src(['src/lib/**/*', '!src/lib/**/*.css'], { base: 'src' })
    .pipe(gulp.dest(targetDir));
});

gulp.task('build', ['lib-resources'], function () {
  return gulp.src('src/index.html')
    .pipe(useref())
    .pipe(gulpif('*.css', cleanCSS({ target: 'src', relativeTo: 'src/resource' })))
    .pipe(uncache())
    .pipe(gulp.dest(targetDir));
});

Re 2 - this is not up to clean-css as it receives a piped file from gulp, namely useref plugin. I’m pretty sure you can patch useref to turn all <link... statements into @import rules, so do the current manual application.css step in-memory.