# grunt-image-size-export

> Export your image informations into json. Provide your own handlebars template to export to any format and file structure you need.

Latest version **0.1.1** (published 2016-08-16) · 0 weekly downloads

## Install

```sh
npm install grunt-image-size-export
pnpm add grunt-image-size-export
yarn add grunt-image-size-export
bun add grunt-image-size-export
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2016-08-16 |
| First published | 2015-03-21 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.10.28 |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Sebastian Fitzner |
| Maintainers | sebastian-fitzner |
| Keywords | grunt, grunt plugin, images, image, size, image dimensions, image export, dimensions, size, image width, image height, width, height |

## Links

- npm: https://www.npmjs.com/package/grunt-image-size-export
- Repository: https://github.com/Sebastian-Fitzner/grunt-image-size-export
- Issues: https://github.com/Sebastian-Fitzner/grunt-image-size-export/issues
- npm.io page: https://npm.io/package/grunt-image-size-export

## Dependencies (1)

- [image-size-export](https://npm.io/package/image-size-export.md) *

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2016-08-16
- 0.1.0 — 2015-03-21

## README

grunt-image-size-export
============

This is a grunt wrapper for [`image-size-export`](https://github.com/Sebastian-Fitzner/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](https://www.npmjs.com/package/image-size).

## 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: 
``` bash
├───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. 

``` json
[
	{
		"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`.

``` json
[
	{
		"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`.

``` json
[
	{
		"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`](https://github.com/Sebastian-Fitzner/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:

``` js
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

---
_Source: https://npm.io/package/grunt-image-size-export · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._