[英]How to solve gulp image copy issue on build?
Problem - copied images end up with size 0 x 0 px
. 问题复制的图像最终的大小为
0 x 0 px
。
In my gulpfile.js
I copy images from the app
directory to the dist
directory, which works well. 在我的
gulpfile.js
我将图像从app
目录复制到dist
目录,效果很好。 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. 奇怪的是,当我直接在Finder(osx)中定位图像时,尽管文件大小和读/写值也正确,但我也无法在其中查看图像。
This is probably because the copied images end up being 0x0 px in size. 这可能是因为复制的图像最终的大小为0x0 px。 Why is this happening?
为什么会这样呢?
Was facing the same issue with ionic 2 application. 与ionic 2应用程序面临相同的问题。 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) 从其他构建任务中调用它(称为Gulp任务构建)
and changed my image reference to refer from build folder: 并更改了我的图像引用以从构建文件夹进行引用:
<img src="build/images/mylogo.png" height="50px" width="50px">
Hope it helps someone! 希望它能对某人有所帮助!
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à! 我不是直接复制图像,而是通过
gulp-imagemin
和gulp-imagemin
复制它们。
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'))
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.