How to solve gulp image copy issue on build?

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'))
    })