批量调整大小

Question

我需要制作不同分辨率的图像版本。但是，我的代码输出很乱 - 一些文件丢失，一些图片保存在不同的文件名下。我知道它与异步执行有关，但我并不十分熟悉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来创建您的任务 - 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')); 
}); 

从文档：

吞响应图像需要GraphicsMagick工具起作用。安装简单： Ubuntu的： 易于得到安装实：graphicsmagick 的Mac OS X（使用自制）： 冲泡安装实：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')); 
});