https://github.com/zekth/gulp-image-process
Gulp task for processing images
https://github.com/zekth/gulp-image-process
gulp gulp-plugin gulp-tasks gulpjs gulpplugin image-manipulation image-processing sharp sharp-library
Last synced: 4 months ago
JSON representation
Gulp task for processing images
- Host: GitHub
- URL: https://github.com/zekth/gulp-image-process
- Owner: zekth
- License: mit
- Archived: true
- Created: 2018-07-26T07:40:15.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-09-02T15:29:25.000Z (over 5 years ago)
- Last Synced: 2025-01-16T04:21:12.272Z (about 1 year ago)
- Topics: gulp, gulp-plugin, gulp-tasks, gulpjs, gulpplugin, image-manipulation, image-processing, sharp, sharp-library
- Language: JavaScript
- Size: 5.99 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gulp-image-process
A Gulp task for processing images base on [sharp](https://github.com/lovell/sharp) for its speed, features and easiness of deployement.
## Installation
```
npm install gulp gulp-image-process --save-dev
```
## Usage
```javascript
'use strict'
const imageProcess = require('gulp-image-process')
const gulp = require('gulp')
const path = require('path')
gulp.task('images', () => {
let imageFolder = path.resolve('test', 'ressources', 'src', '*.jpg')
return gulp
.src(imageFolder)
.pipe(
imageProcess({
verboseLogging: true,
progressive:true,
width:200,
heigth:200,
output: 'webp',
ignoreRatio:false,
multipleResize: [150,300],
watermark: {
filePath: 'test/ressources/src/watermark.png',
position: 'north',
maxSize: 20,
margin: 30
}
})
)
.pipe(gulp.dest(path.resolve('test', 'result')))
})
```
## API
### options
##### options.output
Type: `String`
Default: `false`
Force the output format. Possible values `jpeg|png|webp`
##### options.quality
Type: `Number`
Default: `100`
Quality of the output image. From 0 to 100.
#### options.verboseLogging
Type: `Boolean`
Default: `false`
Enable the verbose logging.
#### options.multipleResize
Type: `Array`
Default: `false`
Will perform multiple resize of the values passed in parameter. Resizes are made on the rendered images, for example it will resize the image with the watermark.
### options.keepMetadata
Type: `Boolean`
Default: `false`
Keep the EXIF file on the output file.
### options.progressive
Type: `Boolean`
Default: `false`
Output using progressive scan. Only available for jpeg output.
### options.ignoreRatio
Type: `Boolean`
Default: `false`
While resizing it will ignore the base ratio of the image with a crop.
#### options.watermark
Type: `Object`
Default: `null`
##### options.watermark.filePath
Type: `String`
Default: `''`
Is Mandatory: `True`
Path of the watermark file.
##### options.watermark.position
Type: `String`
Default: `''`
Is Mandatory: `True`
Position of the watermark on the image.
Possible values:
```
center
north
south
west
east
northwest
northeast
southwest
southeast
```
Little reminder:
```
northwest north northeast
\ | /
\ | /
west ---- center ---- east
/ | \
/ | \
southwest south southeast
```
##### options.watermark.maxSize
Type: `Number`
Default: `-1`
Max Size in Percent of the watermark on the image. If default value is used, the watermark will get its original size.
##### options.watermark.margin
Type: `Number`
Default: `0`
Margin of the watermark from the border of the image. Applied to all coordinates. Similar of css attribute `margin:px;`
## TODO
- Unit tests :v
- Optimization prompt (diff input / ouput size)
## License
[MIT License](http://en.wikipedia.org/wiki/MIT_License)