grunt-image-size-export
v0.1.1
Published
Export your image informations into json. Provide your own handlebars template to export to any format and file structure you need.
Downloads
18
Maintainers
Readme
grunt-image-size-export
This is a grunt wrapper for image-size-export
.
Pass a folder of images to this module and get infos like:
- width
- height
- name
- path
- breakpoint (when you provide this information in your filename)
Written with ImageSize.
Installation
npm install grunt-image-size-export
Usage
Read picture infos from a provided source, process its infos and output processed infos to a custom output file (default = JSON).
When your file structure looks like that:
├───tmp
│ └───pictures
│ ├───carousel
│ │ └───stage
│ │ pic-01--1025.jpg
│ │ pic-01--1025_2x.jpg
│ │ pic-01--320.jpg
│ │ pic-01--320_2x.jpg
│ │ pic-01--769.jpg
│ │
│ └───marginal
│ ├───contact
│ │ pic-01--480.jpg
│ │ pic-01--480_2x.jpg
│ │ pic-01--768.jpg
│ │ pic-01--768_2x.jpg
│ │ pic-01--769.jpg
│ │ pic-01--769_2x.jpg
│ │
│ └───images
│ pic-01--480.jpg
│ pic-01--480_2x.jpg
│ pic-01--640.jpg
│ pic-01--640_2x.jpg
│ pic-01--768.jpg
│ pic-01--768_2x.jpg
│ pic-01--769.jpg
│ pic-01--769_2x.jpg
You will get one of the following outputs:
Simple:
This output is the standard output and fully adaptable with a handlebars template.
[
{
"breakpoint": "1025",
"name": "pic-01--1025.jpg",
"width": 1344,
"height": 536,
"path": "tmp/pictures/carousel/stage/pic-01--1025.jpg"
},
{
"breakpoint": "1025_2x",
"name": "pic-01--1025_2x.jpg",
"width": 2051,
"height": 817,
"path": "tmp/pictures/carousel/stage/pic-01--1025_2x.jpg"
},
{
"...": "..."
}
]
Folders:
This output is categorized by folder names. Just use the option categorizeBy
and define the value folders
.
[
{
"carousel-stage": [
{
"breakpoint": "1025",
"name": "pic-01--1025.jpg",
"width": 1344,
"height": 536,
"folder": "carousel-stage",
"path": "tmp/pictures/carousel/stage/pic-01--1025.jpg"
},
{
"...": "..."
}
]
},
{
"marginal-contact": [
{
"...": "..."
}
]
},
{
"marginal-images": [
{
"...": "..."
}
]
}
]
Breakpoints:
This output is categorized by breakpoints. Just use the option categorizeBy
and define the value breakpoints
.
[
{
"1025": [
{
"breakpoint": "1025",
"name": "pic-01--1025.jpg",
"width": 1344,
"height": 536,
"folder": "stage",
"path": "tmp/pictures/carousel/stage/pic-01--1025.jpg"
}
]
},
{
"1025_2x": [
{
"...": "..."
}
]
},
{
"320": [
{
"...": "..."
}
]
}
]
Options
All options of image-size-export
are available.
Usage
You can enable this plugin in the Gruntfile.js
of your project like that:
grunt.loadNpmTasks('grunt-image-size-export');
Example
To get all image infos, here are some setting examples:
imageSizeExport: {
options: {
path: 'tmp/pictures/**/*.jpg',
breakpointDelimiter: '--'
},
simple: {
options: {
output: 'test/expected/simple.json'
}
},
custom: {
options: {
output: 'test/expected/custom.yaml',
template: 'test/source/custom.hbs'
}
},
folders: {
options: {
output: 'test/expected/folders.json',
categorizeBy: 'folders',
folderDepth: 2
}
},
breakpoints: {
options: {
output: 'test/expected/breakpoints.json',
categorizeBy: 'breakpoints'
}
}
}
License
Copyright (c) 2015 Sebastian Fitzner. Licensed under the MIT license.
ToDos
- Add tests