How to solve gulp image copy issue on build? - image

Question

Problem - copied images end up with size 0 x 0 px.
In my gulpfile.js I copy images from the app directory to the dist directory, which works well. Here's a simplified version of the task:
gulp.task('html-deploy', function() {
return gulp.src([
'app/img/**/*',
'app/**/*.html'
],
{
base: 'app'
}
)
.pipe(gulp.dest('dist'))
});
My file structure looks like this:
/app
index.html
/img
image1.png
image2.png
Everything copies over well and nice, however the images don't display in the browser, even though filepaths are correct.
The weird thing is when I locate the images directly in Finder (osx) I can't view them there either, although the filesizes and read/write values are correct too.
This is probably because the copied images end up being 0x0 px in size. Why is this happening?

Answer 1

Was facing the same issue with ionic 2 application.
I included gulp task
gulp.task('images', function() {
return gulp.src('app/images/**/*')
.pipe(gulp.dest('www/build/images'));
});
called it from other build tasks are called (gulp task build)
and changed my image reference to refer from build folder:
<img src="build/images/mylogo.png" height="50px" width="50px">
Hope it helps someone!

Answer 2

This is kind of an answer to my own question - at least it fixed the problem.
Instead of directly copying the images I copy them via gulp-imagemin, and voilà!
var gulp = require('gulp');
var imagemin = require('gulp-imagemin')
var del = require('del')
// Minify and copy new images to dist
gulp.task('imagemin', ['clean'], function() {
return gulp.src('app/img/**/*')
.pipe(changed('dist/img'))
.pipe(imagemin())
.pipe(gulp.dest('dist/img'))
})