Как правильно использовать острый глоток? - PullRequest
Новая
       5

Как правильно использовать острый глоток?

0 голосов
/ 18 января 2020

Я пытаюсь конвертировать кучу svgs в png. Но из-за печального состояния gulp-svg2png и gulp-sharp я оцениваю другие варианты; Sharp выглядит достаточно многообещающе.

Версии: 

$ gulp --version
CLI version: 2.2.0
Local version: 4.0.2
$ node -
Welcome to Node.js v13.6.0.
Type ".help" for more information.
> require('./package.json').dependencies.sharp
'^0.24.0'

К сожалению, следующее 

gulp.task('svg-convert', function() {
  var sharp = require('sharp')
  gulp.src(config.svg2png)
  .pipe(sharp().png())
  .pipe(gulp.dest('./dist/images'))
});

отправляет эту ошибку: 

TypeError [ERR_INVALID_ARG_TYPE] [ERR_INVALID_ARG_TYPE]: The "chunk" argument must be of type string or an instance of Buffer. Received an instance of File
    at validChunk (_stream_writable.js:285:10)
    at Sharp.Writable.write (_stream_writable.js:324:23)
    ...
    (stacktrace continues)

Кто-то решил это?

Или есть лучший способ справиться с этой конкретной потребностью?

Отредактировано после @AllainLG answer .

Это мои два дубля К сожалению, оба сбоя. 

gulp.task('svg2png', function() {
  var sharp = require('sharp');
  return gulp.src(c.svg2png)
  .pipe(plug.each(function(content, file, callback) {
    var newContent = sharp(content).png(); // here content is a buffer containing the image, newContent should be too?
    // var newContent = sharp(content).png().toBuffer(); // this sends a Promise and fails
    return callback(null, newContent);
  }), 'buffer')
  .pipe(plug.rename(function(path) {
    return path.extname = ".png";
  }))
  .pipe(plug.imagemin())
  .pipe(gulp.dest('./dist/images'));
});

Это ничего не передает к месту назначения: ничего в ./dist/images.

Эта вторая попытка использует gulp-tap. 

gulp.task('svg2png2', function() {
  var sharp = require('sharp');
  return gulp.src(c.svg2png)
  .pipe(plug.tap(function(file) {
    return file.contents = sharp(file.contents).png();
  }))
  .pipe(plug.rename(function(path) {
    return path.extname = ".png";
  }))
  // .pipe(plug.imagemin()) // sends "Streaming not supported"
  .pipe(gulp.dest('./dist/images'));
});

Это создает пустые файлы в месте назначения (с правильными именами).

Ответы [ 2 ]

0 голосов
/ 21 марта 2020

Следующие работы с незначительным бонусом улучшения времени ~ 100 мс (в среднем 10 сложных svgs ~ 430 мс) по сравнению с gulp-svg2png (в среднем 10 комплексных svgs ~ 540 мс).

Используется through2 .

Я приму этот ответ примерно через месяц, если у кого-то нет лучшего ответа. 

gulp.task('svg2png', function() {
  var sharp, through2;
  sharp = require('sharp');
  through2 = require('through2');

  return gulp.src(c.svg2png)
  .pipe(through2.obj(function(file, _, cb) {
    return sharp(file.contents).png().toBuffer().then(function(buffer) {
      file.contents = buffer;
      return cb(null, file);
    }).catch(function(err) {
      console.error(err);
      return cb(null, file);
    });
  }))
  .pipe(plug.rename(function(path) {
    return path.extname = ".png";
  }))
  .pipe(plug.imagemin())
  .pipe(gulp.dest('./dist/images'));
});
0 голосов
/ 09 марта 2020
* * * * * Первый параметр должен быть строкой буфера, gulp не пропустит их.

Вы можете использовать gulp-each , чтобы вызывать sharp для каждого файла (или написать свой собственный простой метод)

...