Comments (11)
I'll leave it here.
Here is the solution to the problem : we need to add the {encoding:false} in the src() function option.
This is not yet available in the gulp documentation.
And as it turned out this is not a gulp-imagemin problem.
for example, like this:
// images task
function images() {
return src(baseDir + '/assets/images/**/*.*', { base: baseDir, encoding: false })
.pipe(changed(distDir))
.pipe(
imagemin(
[
gifsicle({ interlaced: true }),
mozjpeg({ quality: 75, progressive: true }),
optipng({ optimizationLevel: 5 }),
svgo({ plugins: [{ name: 'preset-default', params: { overrides: { removeViewBox: false } } }] }),
],
{ verbose: true }
)
)
.pipe(dest(distDir))
}
from gulp-imagemin.
o, well, that's why I need this {encoding:false} setting when everything was working earlier!
from gulp-imagemin.
I'll leave it here. Here is the solution to the problem : we need to add the {encoding:false} in the src() function option. This is not yet available in the gulp documentation. And as it turned out this is not a gulp-imagemin problem. for example, like this:
// images task function images() { return src(baseDir + '/assets/images/**/*.*', { base: baseDir, encoding: false }) .pipe(changed(distDir)) .pipe( imagemin( [ gifsicle({ interlaced: true }), mozjpeg({ quality: 75, progressive: true }), optipng({ optimizationLevel: 5 }), svgo({ plugins: [{ name: 'preset-default', params: { overrides: { removeViewBox: false } } }] }), ], { verbose: true } ) ) .pipe(dest(distDir)) }
Oh thanks man, I’ve been struggling with this question for 18 hours.
here is my gulpfile code
`
const srcFolder = './src';
const buildFolder = './app';
const srcPaths = {
srcImagesFolder: ${srcFolder}/img
,
};
const appPaths = {
buildImagesFolder: ${buildFolder}/img
,
};
const images = () => {
return src([${srcPaths.srcImagesFolder}/**/**.{jpg,jpeg,png,svg}
], { encoding: false })
.pipe(dest(buildtPaths.buildImagesFolder))
}
`
from gulp-imagemin.
Curiously, it worked for me only in the CommonJS version of Gulp, adding what the friend mentioned about
{ encoding: false }
, but in the ESM version it does not work, nor does it add the images to the folder where they should go, nor does it throw an error.
Some details:
Code:
export function images() {
return src(paths.html.src, { encoding: false })
.pipe(imagemin())
.pipe(dest(paths.html.dest));
}
With ESM:
[17:48:19] Starting 'images'...
gulp-imagemin: Minified 0 images
[17:48:19] Finished 'images' after 105 ms
Without ESM but with CommonJS
[17:51:17] Using gulpfile ~/projects/FrontendTemplateContinental/gulpfile.js
[17:51:17] Starting 'optimage'...
[17:51:17] Starting 'imagesOptimize'...
[17:51:17] Finished 'imagesOptimize' after 50 ms
[17:51:17] Finished 'optimage' after 52 ms
gulp-imagemin: Minified 1 image (saved 2.14 MB - 64.7%)
Gulp version
- CLI version: 3.0.0
- Local version: 5.0.0
Node
v20.11.1
from gulp-imagemin.
for me after updating gulp to version 5 when i start gulp console shows gulp-imagemin: Minified 1 image (saved 119 kB - 48.2%) but when i check sizes in src & dist are same
const images = () => {
return src([`${paths.imagesFolder.src}/**/**.{jpg,jpeg,png,svg}`], { encoding: false })
.pipe(gulpif(isProd, imagemin([
mozjpeg({
quality: 60,
progressive: true
}),
optipng({
optimizationLevel: 2
}),
])))
.pipe(dest(paths.imagesFolder.dist))
}
gulp-imagemin: Minified 1 image (saved 119 kB - 48.2%)
from gulp-imagemin.
I'll leave it here. Here is the solution to the problem : we need to add the {encoding:false} in the src() function option. This is not yet available in the gulp documentation. And as it turned out this is not a gulp-imagemin problem. for example, like this:
// images task function images() { return src(baseDir + '/assets/images/**/*.*', { base: baseDir, encoding: false }) .pipe(changed(distDir)) .pipe( imagemin( [ gifsicle({ interlaced: true }), mozjpeg({ quality: 75, progressive: true }), optipng({ optimizationLevel: 5 }), svgo({ plugins: [{ name: 'preset-default', params: { overrides: { removeViewBox: false } } }] }), ], { verbose: true } ) ) .pipe(dest(distDir)) }
if it is not in the docs, may i know how did you found this out? it amazes me, lol
from gulp-imagemin.
` .... /**/**.{jpg,jpeg,png,svg}`
The wrong globe
should be like this: .... /**/*.{jpg,jpeg,png,svg}
from gulp-imagemin.
if it is not in the docs, may i know how did you found this out? it amazes me, lol
Yes, this problem is not yet in the documentation on the site gulpjs.com , but after I submitted the problem, a fix was made in the gulp github documentation here.
And I found out about it by studying gulp closed issues
from gulp-imagemin.
` .... /**/**.{jpg,jpeg,png,svg}`
The wrong globe should be like this:
.... /**/*.{jpg,jpeg,png,svg}
Correct me if I’m wrong, but if the glob pattern was incorrect, would it have worked? I mean, after running the gulp command, images appear in the dist/assets/images folder, but for some reason, the imagemin plugin doesn’t optimize them, although, for example, the gulp-webp plugin with the same glob pattern works perfectly
from gulp-imagemin.
Correct me if I’m wrong, but if the glob pattern was incorrect, would it have worked? I mean, after running the gulp command, images appear in the dist/assets/images folder, but for some reason, the imagemin plugin doesn’t optimize them, although, for example, the gulp-webp plugin with the same glob pattern works perfectly
I can't tell you the answer, because I have to check it in my work. But I recommend enabling hints with the {verbose:true} directive
const images = () => {
return src([`${paths.imagesFolder.src}/**/*.{jpg,jpeg,png,svg}`], { encoding: false })
.pipe(
gulpif( isProd,
imagemin(
[
mozjpeg({ quality: 60, progressive: true }),
optipng({ optimizationLevel: 2 }),
], { verbose: true } )))
.pipe(dest(paths.imagesFolder.dist))
}
from gulp-imagemin.
The problem is solved
from gulp-imagemin.
Related Issues (20)
- Security issues HOT 1
- Keep original input file if optimized version is larger (or "already optimized") HOT 1
- 7.1.0: npm run build results with TypeError in plugin "gulp-imagemin" when running docker-compose on Apple Silicon device HOT 3
- Unable to install on Ubuntu 20.04.3 LTS HOT 2
- Does not appear to work with Gulp v4.0.2
- V8 require() of ES modules is not supported HOT 8
- TypeError in plugin "gulp-imagemin": function_ is not a function HOT 2
- Can't seem to run gulp-imagemin on my mac m1 HOT 2
- Error require() ^8.0.0
- gulp-imagemin plugin crashes with an error. HOT 3
- gulp-imagemin won't work on a computer without an internet connection HOT 1
- TypeError: imagemin.mozjpeg is not a function HOT 1
- crashed due to could not load default plugin `mozjpeg` and no images minfied HOT 3
- Corrupt output files HOT 3
- Imagemin not Optimazing images in Gupl v5 HOT 3
- Cannot use import statement outside a module
- npm warn deprecated
- Thanks
- Corrupted image .jpg and .png HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gulp-imagemin.