mahnunchik / gulp-responsive

gulp-responsive generates images at different sizes
https://npmjs.com/gulp-responsive
MIT License
503 stars 60 forks source link

embed images #134

Open Chapier opened 5 years ago

Chapier commented 5 years ago

Hello,

I'm on Windows and when I want to embed images I have the following issue :

Error at DestroyableTransform.though2Handler [as_transform]

in gulp-responsive\lib\index.js:98:14

Someone know why ? And how solve it ?

Morevover, I have black background color and not white... :(

I have jpg and png :

var gulp = require('gulp')
var $ = require('gulp-load-plugins')()

gulp.task('images', function () {
  return gulp
    .src('src/*.{jpg,png}')
    .pipe(
      $.responsive(
        {
          '*.{jpg,png}': {
            // Resize all JPG images to 200 pixels wide
            width: 360,
        height: 360,
        background: 'white',
        format: 'jpg',
       rename: {
                extname: '.jpg'
            },
          },
        },
        {
          // Global configuration for all images
          // The output quality for JPEG, WebP and TIFF output formats
          quality: 70,
          // Use progressive (interlace) scan for JPEG and PNG output
          progressive: true,
          // Zlib compression level of PNG output format
          compressionLevel: 6,
          // Strip all metadata
          withMetadata: false,
          embed: true,
        }
      )
    )
    .pipe(gulp.dest('dist'))
})

Thank you :)

Chapier commented 4 years ago

Nobody had a similar problem ?

Chapier commented 4 years ago

I have the same problem with Ubuntu

regpaq commented 4 years ago

I'm having the same issue too

regpaq commented 4 years ago

I figured it out. I found out this error was occurring because our gulp files wasn't watching or catching error. Try adding to your global config the following options:

errorOnEnlargement: false,
withMetadata: false,
skipOnEnlargement: true,
errorOnUnusedConfig: false,
errorOnUnusedImage: false
Chapier commented 4 years ago

Thank you for the reply :)

I tried but I have the same problem :

This is my code:

var gulp = require('gulp')
var $ = require('gulp-load-plugins')()

gulp.task('images', function () {
  return gulp
    .src('src/*.{jpg,png}')
    .pipe(
      $.responsive(
        {
          '*.{jpg,png}': {
            // Resize all JPG images to 200 pixels wide
            width: 360,
            height: 360,
            background: {r:255,b:255,g:255,alpha:0},
            format: 'jpg',
            rename: {
                extname: '.jpg'
            },
          },
        },
        {
          // Global configuration for all images
          // The output quality for JPEG, WebP and TIFF output formats
          quality: 70,
          // Use progressive (interlace) scan for JPEG and PNG output
          progressive: true,
          // Zlib compression level of PNG output format
          compressionLevel: 6,
          // Strip all metadata
          withMetadata: false,
          embed: true,
          errorOnEnlargement: false,
          skipOnEnlargement: true,
          errorOnUnusedConfig: false,
          errorOnUnusedImage: false
        }
      )
    )
    .pipe(gulp.dest('dist'))
})

image

regpaq commented 4 years ago

Was this working for you before and suddenly stopped working? I'm afraid I'm not sure what's causing your error. Perhaps try reinstalling Sharp

Chapier commented 4 years ago

No it was not working before. I tried to reinstall Sharp but I still have an error.

On Ubuntu : image

Could you give me the "proper" way/step to install this modul with npm ?

Thak you :)

PS : I think I did some mistake. I did : On linux I had install npm npm install --save-dev gulp-responsive

After that I don't have a package.json

robinloeffel commented 4 years ago

A few days ago I've had the same issue, https://github.com/mahnunchik/gulp-responsive/issues/142. After some time I got impatient with it and went ahead and created a plugin on my own. It's called gulp-rezzy and you can check it out here: https://github.com/robinloeffel/gulp-rezzy.