gulp 使用 sharp 的正确方法是什么？

Question

我正在尝试将一堆 svg 转换为 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 之后编辑。

这是我的两个镜头。不幸的是，两者都失败了。

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

这会在目标中生成空文件（具有正确的名称）。

Answer 1

sharp第一个参数需要是Buffer的字符串，gulp不会传这些

您可以使用gulp-each在每个文件上调用sharp（或编写您自己的简单方法）

Answer 2

以下作品，与 gulp-svg2png（平均 10 个复杂 svgs ~540ms）相比，时间缩短了 ~100ms（平均 10 个复杂 svgs ~430ms）。

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

gulp 使用 sharp 的正确方法是什么？

What is the right way to use sharp with gulp?

gulp

sharp