5

異なる解像度で画像のバージョンを作成する必要があります。しかし、私のgulpコードの出力は混乱しています - 一部のファイルが欠落しており、一部の画像は別のファイル名で保存されています。非同期実行と関係があることは知っていますが、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'))
    });
4

1 に答える 1

6

gulp-responsive を使用して yout タスクを作成してみてください - 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'));
 });
于 2015-11-02T23:03:57.970 に答える