zckrs/gulp-css-base64

Gulp's task for transform all resources found in a CSS (those within a url( ... ) declaration) into base64-encoded data URI strings

Ben Aston

@benaston

Hi there. Thanks for creating gulp-css-base64. It's super useful. Can you help me with a problem with it?

Mehdy Dara

@zckrs

You are welcome. Maybe =] what is your problem?

Ben Aston

@benaston

Hello

I am using your plugin, but my image urls remain unchanged in the output :(

This is my less file:

body {
    background:~"url('test.jpg')";
}

This is my gulp task:

function() {
            return this.src(options.lessSrc)
                .pipe(less())
                .pipe(gulpCssBase64({
                    //Users/ben/Documents/dev/wizerati-ui-prototype/src/images
                    baseDir: path.join(options.basePath, options.imageDir),
                }))
                .pipe(concat(options.packageName + '.min.css'))
                .pipe(minifyCss())
                .pipe(this.dest(distPathAbs));
        }

Can you think what I could be doing wrong?

This is the output:

body{background:url(test.jpg)}div{border:1px solid #000}span{border:2px solid red}

Ben Aston

@benaston

I am using the --harmony flag with node for running gulp

Mehdy Dara

@zckrs

If you use --verbose do you have error ?

Ben Aston

@benaston

That's a gulp flag?

Yes

there is an error

Mehdy Dara

@zckrs

I never tried --harmony with this plugin. But should be work

Ben Aston

@benaston

Can you help me understand what the baseDir parameter is for?

Is it an assumed location for pathless urls?

The error:

[22:08:34] Error: /Users/ben/Documents/dev/wizerati-ui-prototype/src/stylesheets/application/Users/ben/Documents/dev/wizerati-ui-prototype/src/images/test.jpg, file not found

Mehdy Dara

@zckrs

It s difficult to help you. Im on smartphone. Tomorrow i will check jour problem. Ok ?

Ben Aston

@benaston

ok, thanks. i have enough to go on

thanks

Mehdy Dara

@zckrs

This error mean gulp process dont find your image ==> so no change in tour CSS

Maybe you should look the unit/func test to see how it work

https://github.com/zckrs/gulp-css-base64/blob/master/test/test.js#L302

Ben Aston

@benaston

OK thanks. I now have it working by placing a relative path in my less ../../images/test.jpg. Ideally I would just place test.jpg in my less. Can this be achieved?

OK, I have solved this

thanks very much for your help

Mehdy Dara

@zckrs

No problem. I happy to help a user who use my plugin =]

What was wrong ? You set relative path in basedir ?

Ben Aston

@benaston

I didn't realise that i needed to place a / before the url to get the plugin to 'rewrite' it

Mehdy Dara

@zckrs

^^` ok if you want create a pull request to precise this point y r welcome

Ben Aston

@benaston

ok. thanks again

Weboholics

@Weboholics

I have added '.svg' and '.svgz' to extensionsAllowed - but these images isn't embedded into the css

Where communities thrive

People

Repo info

Activity