A grunt task to resize images if needed and base 64 encode files into LESS or SASS format.
This plugin requires Grunt ^0.4.0
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-base64-less --save-dev
One the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-base64-less');
In your project's Gruntfile, add a section named base64Less
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
base64Less: {
your_target: {
// Target-specific file lists and/or options go here.
process: [
'wildcard/*'
],
dest: "output.file",
prefix: "font_",
sass: true, //[Optional] Defaults: false, output sass file & format
dimensions: false, //[Optional] Obtain dimensions and add vars in less
resize: { //[Optional] Resize images
imageMagick: true, //[Optional] defaults to GraphicsMagick if not set
width: 100, //Use width alone to change width while keeping aspect ratio
height: 100, //Use height alone to change height while keeping aspect ratio
force: true //[Optional] Forces aspect ratio change
}
}
}
})
grunt.initConfig({
base64Less: {
font: {
prefix: "font-",
process: ['package/fonts/*', 'bowerBuild/fonts/*'],
dest: 'package/less/font.less'
},
img: {
prefix: "img-",
process: ["package/img/*"],
dest: 'package/less/img.less',
dimensions: true
}
}
})
Creates variables to be used in LESS or SASS.
//Use in LESS
@import "img.less";
@import "font.less";
.mountain {
background: url(@img-mountain_jpg);
}
@font-face {
font-family: 'font_here';
src: url('@{font-font_here_eot}');
}
//Use in SASS
@import "img";
@import "font";
.mountain {
background: url($img-mountain_jpg);
}
@font-face {
font-family: 'font_here';
src: url('${font-font_here_eot}');
}
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
0.3.0: Added unit tests, SASS support, Circleci build
0.2.5: Change grunt depends
0.2.4: Depends fixes
0.2.3: Bug fix
0.2.2: Bug fix
0.2.1: Bug fix
0.2.0: Bug fixes, cleaned up
0.1.2: Add image resizing
0.1.11: Fix version
0.1.1: Dimensions output added
0.1.0: Initial release