批量resize

我需要制作不同分辨率的图像版本。 然而，我的大嘴巴代码的输出是一团糟 – 一些文件丢失，一些图片保存在不同的文件名下。 我知道它与asynchronous执行有关，但我并不是很熟悉node.js，所以我不能自己弄清楚如何解决它。 任何帮助表示赞赏，特别是解释。

var gulp = require('gulp'); var rename = require('gulp-rename'); var gm = require('gulp-gm'); var originalBasename = ''; gulp.task('resize-all', function () { return gulp.src(['_img/**/*.{jpg,png}', '_img/*.{jpg,png}']) .pipe(rename(function (path) { originalBasename = path.basename; path.basename += "-2048"; })) .pipe(gm(function (gmfile) { return gmfile.resize(2048, 5000); })) .pipe(gulp.dest('_site/img')) .pipe(rename(function (path) { path.basename = originalBasename; // restore basename path.basename += "-1536"; })) .pipe(gm(function (gmfile) { return gmfile.resize(1536, 5000); })) .pipe(gulp.dest('_site/img')) .pipe(rename(function (path) { path.basename = originalBasename; // restore basename path.basename += "-1080"; })) .pipe(gm(function (gmfile) { return gmfile.resize(1080, 5000); })) .pipe(gulp.dest('_site/img')) .pipe(rename(function (path) { path.basename = originalBasename; // restore basename path.basename += "-750"; })) .pipe(gm(function (gmfile) { return gmfile.resize(750, 5000); })) .pipe(gulp.dest('_site/img')) .pipe(rename(function (path) { path.basename = originalBasename; // restore basename path.basename += "-320"; })) .pipe(gm(function (gmfile) { return gmfile.resize(320, 5000); })) .pipe(gulp.dest('_site/img')) }); 

Answer 1

尝试使用gulp-responsive来创build你的任务 – https://github.com/dcgauld/gulp-responsive-images 。

例如：

 var responsive = require('gulp-responsive-images'); gulp.task('resize-all', function() { return gulp.src('_img/**/*') .pipe(responsive({ '**/*.*': [{ width: 2048, height: 5000, suffix: '-2048' }, { width: 1536, height: 5000, suffix: '-1536' }] })) .pipe(gulp.dest('_site/img')); }); 

从文档：

gulp-responsive-images需要GraphicsMagick来运行。 安装很简单：Ubuntu：apt-get install graphicsmagick Mac OS X（使用Homebrew）：brew install graphicsmagick

或者使用https://github.com/mahnunchik/gulp-responsive

 var responsive = require('gulp-responsive'); gulp.task('resize-all', function() { return gulp.src('_img/**/*') .pipe(responsive({ '**/*.*': [{ width: 2048, height: 5000, rename: { suffix: '-2048' } }, { width: 1536, height: 5000, rename: { suffix: '-1536' } }] })) .pipe(gulp.dest('_site/img')); });