批量調整大小

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