gulp-responsive icon indicating copy to clipboard operation
gulp-responsive copied to clipboard

embed images

Open Chapier opened this issue 6 years ago • 8 comments

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 avatar Nov 25 '19 11:11 Chapier

Nobody had a similar problem ?

Chapier avatar Nov 26 '19 08:11 Chapier

I have the same problem with Ubuntu

Chapier avatar Nov 26 '19 16:11 Chapier

I'm having the same issue too

regpaq avatar Dec 06 '19 08:12 regpaq

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

regpaq avatar Dec 06 '19 09:12 regpaq

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

Chapier avatar Dec 06 '19 09:12 Chapier

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

regpaq avatar Dec 06 '19 17:12 regpaq

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

Chapier avatar Dec 11 '19 14:12 Chapier

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.

robinloeffel avatar Feb 18 '20 15:02 robinloeffel