swcs/grunt-datauri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add tests and html to display output functionality

Browse Source
This commit is contained in:
ceee
2013-05-16 16:22:59 +02:00
parent edf21567dc
commit 8d8f4f6633
9 changed files with 230 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Gruntfile.js
+3 -3
View File
@@ -34,7 +34,7 @@ module.exports = function (grunt) {
datauri: {
default: {
options: {
test: true
classPrefix: 'data-'
},
src: [
"test/fixtures/test-png.png",
@@ -60,7 +60,7 @@ module.exports = function (grunt) {
grunt.registerTask('mkdir', grunt.file.mkdir);
grunt.registerTask('test', [ 'clean', 'mkdir:tmp', 'nodeunit', 'clean' ]);
grunt.registerTask('test', [ 'clean', 'mkdir:tmp', 'datauri', 'nodeunit', 'clean' ]);
grunt.registerTask('default', [ 'test', 'datauri' ]);
grunt.registerTask('default', [ 'datauri' ]);
};
README.md
+99
View File
@@ -19,7 +19,106 @@ Once the plugin has been installed, it may be enabled inside your Gruntfile with
grunt.loadNpmTasks('grunt-datauri');
```
## The "datauri" task
### Overview
The _datauri_ task let's you create css datauri's from images. Supported for all image types. Tested are `png`, `jpg`, `gif`, `bmp`.
If you specify `sass` or `scss` files as destination, than [sass placeholders](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholder_selectors_) are used instead of classes.
The class names are generated from the filename. You can specify prefix and suffix for these names.
### Options
#### options.classPrefix
Type: `String`
Default value: `""`
This `string` is prefixed to all generated class names.
#### options.classSuffix
Type: `String`
Default value: `""`
This `string` is suffixed to all generated class names.
### Options (Files)
#### src
Type: `String` or `Array`
Contains a single image or an array of images.
#### dest
Type: `String` or `Array`
Contains all output css files.
#### files
Type: `Array`
This array can be used as a substitution for `src` and `dest` to allow multi-processing per task.
### Usage Example
_Gruntfile.js_
```js
grunt.initConfig( {
datauri: {
default: {
options: {
classPrefix: 'data-'
},
src: [
"test/fixtures/test-png.png",
"test/fixtures/test-gif.gif",
"test/fixtures/test-jpg.jpg",
"test/fixtures/test-bmp.bmp"
],
dest: [
"tmp/base64.css",
"tmp/base64.scss",
"tmp/base64.sass"
]
}
}
} )
```
##### Output
_tmp/base64.css_
```css
.data-test-png {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAAN.....");
}
.data-test-gif {
background-image: url("data:image/png;base64,R0lGODlhZABkAJEA.....");
}
...
```
_tmp/base64.scss_
```scss
%data-test-png {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAAN.....");
}
...
```
_tmp/base64.sass_
```scss
%data-test-png
background-image: url("data:image/png;base64,iVBORw0KGgoAAAAN.....");
...
```
## Release History
* 2013-05-16 v0.2.0 add placeholder (sass) support and support for multiple dest-files
* 2013-05-15 v0.1.0 basic functionality
package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "grunt-datauri",
"description": "create base64 encoded data-uris for css from images",
"version": "0.1.0",
"version": "0.2.0",
"homepage": "https://github.com/ceee/grunt-datauri",
"author": {
"name": "Tobias Klika",
tasks/datauri.js
+49 -42
View File
@@ -15,73 +15,80 @@ module.exports = function (grunt)
var childProcess = require('child_process');
var filesize = require('filesize');
var datauri = require('datauri');
var cssTemplates = {
scss: '%{{class}} {\n\tbackground-image: url(\'{{data}}\');\n}',
sass: '%{{class}}\n\tbackground-image: url(\'{{data}}\')',
default: '.{{class}} {\n\tbackground-image: url(\'{{data}}\');\n}'
scss: '%{{class}} {\n\tbackground-image: url("{{data}}");\n}',
sass: '%{{class}}\n\tbackground-image: url("{{data}}")',
default: '.{{class}} {\n\tbackground-image: url("{{data}}");\n}'
};
grunt.registerMultiTask('datauri', 'create base64 encoded data-uris for css from images', function ()
{
var options = this.options({});
var options = this.options({
classPrefix: '',
classSuffix: ''
});
this.files.forEach(function(f)
{
// filter valid files and map data uri generation
var data = f.src.filter( fileExists ).map( generateData );
var destinationFiles = typeof f.dest === 'string' ? [ f.dest ] : f.dest;
var css;
destinationFiles.forEach(function(dest)
{
css = data.map(function(base64)
this.files.forEach(function(f)
{
// filter valid files and map data uri generation
var data = f.src.filter( fileExists ).map( generateData );
var destinationFiles = typeof f.dest === 'string' ? [ f.dest ] : f.dest;
var css;
destinationFiles.forEach(function(dest)
{
css = data.map(function(dataObj)
{
return generateCss( dest, base64 );
return generateCss( dest, dataObj );
}).join('\n\n');
// Write the destination file.
grunt.file.write(dest, css);
grunt.log.writeln('File "' + dest + '" created.');
});
});
// generates a datauri object from file
// ~~~~~~~~~~~~~~~~~~~~~
function generateData( filepath )
});
});
// generates a datauri object from file
// ~~~~~~~~~~~~~~~~~~~~~
function generateData( filepath )
{
var dataObj = new datauri( filepath );
var base64 = dataObj.content;
return base64;
return {
data: base64,
path: filepath
};
}
// wraps daturi in css class
// ~~~~~~~~~~~~~~~~~~~~~
function generateCss( filepath, data )
// ~~~~~~~~~~~~~~~~~~~~~
function generateCss( filepath, data )
{
var filetype = filepath.split( "." ).pop().toLowerCase();
var className = options.classPrefix + path.basename( data.path ).split( "." )[0] + options.classSuffix;
var template = cssTemplates[ filetype ] || cssTemplates.default;
return template.replace( '{{class}}', 'cls' ).replace( '{{data}}', data );
return template.replace( '{{class}}', className ).replace( '{{data}}', data.data );
}
// Warn on and remove invalid source files (if nonull was set).
// ~~~~~~~~~~~~~~~~~~~~~
// Warn on and remove invalid source files (if nonull was set).
// ~~~~~~~~~~~~~~~~~~~~~
function fileExists( filepath )
{
if (!grunt.file.exists(filepath))
if (!grunt.file.exists(filepath))
{
grunt.log.warn('source file "' + filepath + '" not found.');
return false;
}
}
return true;
}
});
});
};
test/datauri_test.js
+9 -3
View File
@@ -10,10 +10,16 @@ exports.datauri = {
done();
},
datauri_options: function( test )
main_options: function( test )
{
test.expect( 1 );
test.equal( 1, 1, "random..." );
test.expect( 3 );
var file = grunt.file.read;
test.equal( file( "tmp/base64.css" ), file( "test/expected/base64.css" ), "CSS should be equal." );
test.equal( file( "tmp/base64.scss" ), file( "test/expected/base64.scss" ), "SCSS should be equal." );
test.equal( file( "tmp/base64.sass" ), file( "test/expected/base64.sass" ), "SASS should be equal." );
test.done();
}
test/expected/base64.css
+15
View File
File diff suppressed because one or more lines are too long
test/expected/base64.sass
+11
View File
File diff suppressed because one or more lines are too long
test/expected/base64.scss
+15
View File
File diff suppressed because one or more lines are too long
test/expected/index.html
+28
View File
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>datauri test</title>
<meta charset="utf-8" />
<link href="../../tmp/base64.css" rel="stylesheet" />
<style>
div
{
width: 300px;
height: 300px;
float: left;
border: 1px solid gray;
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="data-test-png">png</div>
<div class="data-test-gif">gif</div>
<div class="data-test-jpg">jpg</div>
<div class="data-test-bmp">bmp</div>
</body>
</html>