gulp-cssmin: How to change relative URLs in minified CSS

Tags: javascript,css,gulp

Problem :

I'm new to gulp and need your help with the gulp-cssmin plugin to minify my CSS files. My simple project structure:


My goal is now to minify the CSS file myCSS.css in folder css/, rename it to myCSS.min.css and copy it to folder css/min/. This is working as expected. Now I'm using relative URL paths in my CSS file:

background-image: url("../images/myImg.jpg");

When copying the file to folder css/min/, the path is no longer correct. I need to rebase the URL. How do I do this? I've tried to set the target option, with no effect. My gulpfile.js:

var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');

gulp.task('default', function () {
        .pipe(cssmin({ showLog: true, target: '../', keepBreaks: true }))
        .pipe(rename({ suffix: '.min' }))

Solution :

You need two options:

  • relativeTo: the folder where your input files are located (i.e. css/)
  • target: the folder that your output files are written to (i.e. css/min/)

So you end up with:

gulp.task('default', function () {
      showLog: true, 
      relativeTo: 'css/',
      target: 'css/min/', 
      keepBreaks: true
   .pipe(rename({ suffix: '.min' }))

    CSS Howto..

    how to add css on click and remove it when they click close button [closed]

    How do I avoid multiple jquery dropdown boxes interfering with eachother

    How do I check for a css value using jQuery?

    how to change inline css to free attributes

    How do I make everything on this page centered and fully responsive for all browsers?

    How to give equal width for all the fields in the form with validations?

    How to style a single QToolButton using qss/css

    How do I change gradient color of text inside the Jumbotron?

    API embeded code is sending