This is gruntplugin task.
Convert to data-uri from image path
Install from npm.
% npm i -D grunt-data-uri-advanced
Add your project's Gruntfile.js
.
grunt.loadNpmTasks('grunt-data-uri-advanced');
grunt.initConfig({
// sample configuration
dataUri: {
dist: {
// src file
src: ['sample/css/raw/*.css'],
// output dir
dest: 'sample/css',
options: {
// specified files are only encoding
target: ['sample/img/embed/*.*'],
// adjust relative path?
fixDirLevel: true,
// img detecting base dir
// baseDir: './'
// Do not inline any images larger
// than this size. 2048 is a size
// recommended by Google's mod_pagespeed.
maxBytes : 2048,
// Control the output of the script
log: {
skipped: true,
processBinaryFileTooBig: true,
processBinaryFileEncoded: true,
processBinaryFileAdjusted: true,
processBinaryFileIgnored: true
},
// Generates an error when a file is ignored
exitOnError: false,
prefixByNumber: false, // prefix the name of all file names processed by an incremental number
copyOversized: true, // copy file in specified folder when its size exceeds maxBytes
copyOversizedFolder: 'sample/css', // specified folder, default value is same of 'dest'
copyOversizedPathPrefix: '', // prefix for css files ex: url('copyOversizedPathPrefix/filename.ext')
}
}
}
}
For traversal image files. If options.baseDir
is specified, use baseDir
instead of src css exsting dir. That's useful when image paths in your css are absolute.
This file is raw css.
html { background-image: url('../../img/embed/will_encode.jpeg'); }
body { background-image: url('../../img/embed/not_encode.jpeg'); }
div { background-image: url('../../img/not_encode.png'); }
Execute grunt-data-uri-advanced
% grunt dataUri
Running "dataUri:dist" (dataUri) task
SRC: 3 file uri found on sample/css/raw/main.css
>> Encode: ../../img/embed/will_encode.jpeg
>> Skipping (size 24875 > 10240): ../../img/embed/not_encode.jpeg
>> Adjust: ../../img/not_encode.png -> ../img/not_encode.png
>> => path/to/project/sample/css/main.css
Done, without errors.
This file is processed and output css.
/* encoded to data-uri(base64) */
html { background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAAAQA...'); }
/* not encoded too large image */
body { background-image: url('../../img/embed/not_encode.jpeg'); }
/* not encoded but adjust relative path! */
div { background-image: url('../img/not_encode.png'); }
npm install
npm test
- 0.3.0
- Update
data-uri
module - Remove query and hash fragment from url
- Update
- 0.2.0
- Add
maxBytes
option - fix
fixDirLevel
bug
- Add
- 0.1.0
- Add
baseDir
option
- Add
- 0.0.2
- Add
datauri
module
- Add
- 0.0.1
- first commit
MIT