gulp-css-url-rebase's Introduction

gulp-css-url-rebase

Rebase relative image URLs

This project has been forked to fix issues that were not resolved by its original author.

Install

npm install gulp-css-url-rebase --save-dev

Example

var gulp = require('gulp');
var rebase = require('gulp-css-url-rebase');

gulp.task('default', function () {
  gulp.src('css/**/*.css')
    .pipe(rebase())
     .pipe(concat('style.css'))
     .pipe(gulp.dest('./build/'));
});

rebase urls and copy files

var gulp = require('gulp');
var rebase = require('gulp-css-url-rebase');

gulp.task('default', function () {
  gulp.src(['css/**/*.css',
            'plugins/font-awesome/css/font-awesome.min.css',
            'plugins/bootstrap/css/bootstrap.min.css'])
    .pipe(rebase({
        copyFiles:{
            //urls in css will be rebased relative to publicPath
            publicPath: "./assets",
            //where to copy the files
            filePath: './build/assets/',
            fileTypes: [
                {
                    //match file extensions
                    test: /\.(png|jpg|gif)$/,
                    //subfolder relative to filePath
                    folder: 'img',
                    //max file size for data uri in kb
                    inlineLimit: 100
                },
                {
                    test: /\.(woff|woff2|eot|ttf|svg)(\?.*?|)$/,
                    folder: 'font'
                }
            ]
        }    
    }))
     .pipe(concat('style.css'))
     .pipe(gulp.dest('./build/'));
});

What it tries to solve

Let's say you have this structure:

bower_components
├ dep1
│   ├ images/*
│   └ css/
│       └ style.css
├ dep2
│   ├ images/*
│   └ css/
│       └ style.css
dist/

In dep1/css/style.css you might have:

.sel {
  background: url('../images/icons/home.png') no-repeat top left;
}

And in dep2/css/style.css:

.item {
  background: url('../images/logo.jpg') no-repeat top left;
}

When I minify everything, for example to be in dist/style.css in production. I want this final file for the css above, and all the files are copied to dist/assets/img/, so I don't bother with all the urls in css

.sel {
  background: url('dist/assets/img/icons/home.jpg') no-repeat top left;
}
.item {
  background: url('dist/assets/img/logo.jpg') no-repeat top left;
}

Recommend Projects