Question

问题 - 复制的图片最终大小为0 x 0 px。

在我的gulpfile.js中，我将图像从app目录复制到dist目录，效果很好。这是该任务的简化版本：

gulp.task('html-deploy', function() {
    return gulp.src([
        'app/img/**/*',
        'app/**/*.html'
        ],
        {
            base: 'app'
        }
    )
    .pipe(gulp.dest('dist'))
});

我的文件结构如下：

/app
    index.html
    /img
        image1.png
        image2.png

即使文件路径正确，所有内容都可以很好地复制，但是图像不会显示在浏览器中。

奇怪的是，当我直接在Finder（osx）中找到图像时，我也无法在那里查看它们，尽管文件大小和读/写值也是正确的。

这可能是因为复制的图像最终大小为0x0像素。为什么会这样？

Answer 1

与离子2应用面临同样的问题。我包括了gulp任务

gulp.task('images', function() {
  return gulp.src('app/images/**/*')
    .pipe(gulp.dest('www/build/images'));
});

从其他构建任务调用它（gulp任务构建）

并将我的图像引用更改为从构建文件夹中引用：

 <img src="build/images/mylogo.png" height="50px" width="50px">

希望它有所帮助！

Answer 2

这是我自己问题的答案 - 至少解决了这个问题。

不是直接复制图像而是通过gulp-imagemin复制它们，而且vo！

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

如何解决构建中的gulp图像复制问题？

2 个答案: