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:

gulpfile.js
  css/
    myCss.css
    min/
      myCss.min.css
  images/
    myImg.jpg

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 () {
    gulp.src('css/*.css')
        .pipe(cssmin({ showLog: true, target: '../', keepBreaks: true }))
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('css/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 () {
  gulp.src('css/*.css')
   .pipe(cssmin({ 
      showLog: true, 
      relativeTo: 'css/',
      target: 'css/min/', 
      keepBreaks: true
    }))
   .pipe(rename({ suffix: '.min' }))
   .pipe(gulp.dest('css/min'));
});

    CSS Howto..

    How to use html entities in CSS content property?

    How to overlap images in the header section?

    How do I fix the navigation menu in Firefox and Internet Explorer?

    CSS gone wild - how to stop a style from going too far

    How to get inline style that was overridden by CSS !important using JavaScript

    How do I get my header to align with my navigation bar at the center of my page?

    How to add HTML/CSS using the editor on DNN? How to add markup without relying on modules?

    How to apply CSS style when ID is taken?

    how to change other element css when selected element has new class

    How to modify CSS to achieve three lines?

    How to prevent a span from breaking into the next line - responsive webdesign?

    How to handle Chrome rendering dynamically added elements with incomplete CSS

    How to inherit css from grandparent tag? [duplicate]

    How do I convert a text to css hex value?

    How would I write css to access the following class “total total_plus hidden_elem” or “total total_plus”?

    how to add a CSS attribute just for specific time via JQuery (revert back to normal after 2 sec)

    How can I make a DIV cursor and background color change if I hover over it?

    Wordpress Plugin - How can I make the text responsive, OR replace it with a new div?

    What is the best tutorial or tutorials on how to make a tooltip using CSS or JQuery or Both? [closed]

    how to change height of ellipse in radial gradient in css for background property

    Getting an class to show when item is clicked

    How to set css for first div, if there's no second div

    How to stack a div absolutely on top of table cells

    How to position ionic button using CSS

    Icon with overhead label - how to get both to respond to hover, with CSS?

    How to check if a TR contains a TD with a specific CSS class with jquery?

    How to use easeOutBounce animiation on display block?

    How to create responsive square

    How to understand this CSS Menu Demo? [closed]

    How to Centralize a Float on the Screen (such horizontally as vertically) Using CSS