CODEWITHSUNDEEP
javascriptnode.jsgulp
Antonin Cezard
Antonin Cezard

Reputation: 2021

Gulp is modifying my font-face url path

EDIT: the problem disappears if I have only one file in the task, with gulp-flatten. That is, if my gulp.src calls only one single file, gulp-flatten actually removes the modified path. I need to be able to merge my vendor css though.

gulp.task('libCSS2', function() {
    gulp.src(vendor + '/font-awesome/css/font-awesome.min.css')
        .pipe(flatten())
        .pipe(concatCss('vendor.css'))
        .pipe(gulp.dest(dest + '/css'));
});

When building, Gulp is changing this (from CSS source file) : 

src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0')

to this (CSS build file)

 src: url("../../../font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0")

Basically its adding a new path, relative to the old fontawesome location, that I want to get rid of. It does that for every URL : so bootstrap url's are also messed up. I believe this is a default gulp fonctionnality. Here is my task, as you can see I tried the gulp-flatten plugin but without success

/* ===== CSS LIB START ===== */
gulp.task('libCSS', function() {
    // Define libraries locations
    var bootstrapCss = vendor + '/bootstrap/dist/css/bootstrap.min.css';
    var slickCss = vendor + '/slick.js/slick/slick.css';
    var slickCss2 = vendor + '/slick.js/slick/slick-theme.css';
    var materializeCss = vendor + '/materialize/dist/css/materialize.min.css';
    var fontawesomeCSS = vendor + '/font-awesome/css/font-awesome.min.css';

    // Merge libraries
    return gulp.src([bootstrapCss, slickCss, slickCss2, materializeCss, fontawesomeCSS])
        // Concatenate in a single file
        .pipe(concatCss('vendor.css'))
        .pipe(flatten(''))
        .pipe(gulp.dest(dest + '/css'));
});

Here is my folder organisation

app/
----vendor/
--------boostrap/
--------slick.js/
--------materialize/
--------font-awesome/
------------css/
----------------font-awesome.min.css // font-awesome goes from there
build/
----css/
--------vendor.css // to there

Thanks

Upvotes: 2

Views: 1748

Answers (1)

Antonin Cezard
Antonin Cezard

Reputation: 2021

concateCss was the culprit

.pipe(concatCss('vendor.css', {rebaseUrls:false}))

solved problem

Upvotes: 6

Related Questions