Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

embed images #134

Open
Chapier opened this issue Nov 25, 2019 · 8 comments
Open

embed images #134

Chapier opened this issue Nov 25, 2019 · 8 comments

Comments

@Chapier
Copy link

Chapier commented Nov 25, 2019

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
Copy link
Author

Chapier commented Nov 26, 2019

Nobody had a similar problem ?

@Chapier
Copy link
Author

Chapier commented Nov 26, 2019

I have the same problem with Ubuntu

@regpaq
Copy link

regpaq commented Dec 6, 2019

I'm having the same issue too

@regpaq
Copy link

regpaq commented Dec 6, 2019

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
Copy link
Author

Chapier commented Dec 6, 2019

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
Copy link

regpaq commented Dec 6, 2019

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
Copy link
Author

Chapier commented Dec 11, 2019

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
Copy link

A few days ago I've had the same issue, #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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants