【问题标题】:Having problems to work with SVG using Inkscape in gulp task在 gulp 任务中使用 Inkscape 使用 SVG 时遇到问题
【发布时间】:2016-09-07 04:12:31
【问题描述】:

好吧,我正在尝试为 gulp 任务中的每个文件执行一个 inkscape 任务。

这个想法是在一个复合路径中转换我拥有的每个 SVG 文件(一个仅由一个复杂路径组成的 SVG)。

我正在尝试通过以下方式实现这一目标:

gulp.task('minify-shapes', function() {
    function makeChange() {
        var Stream = require('stream');

        function transform(file, cb) {
            var svgConverter = new Inkscape(['--verb=ObjectToPath', '--export-plain-svg']);

            var stdout = new Stream();
            var bufs = [];

            console.log(file.history);

            stdout.on('data', function(d) {
                bufs.push(d);
            });

            stdout.on('end', function() {
                var buf = Buffer.concat(bufs);

                file.contents = buf;

                cb(null, file);
            });

            file.pipe(svgConverter).pipe(stdout);
        }

        return require('event-stream').map(transform);
    }

    return gulp.src('app/assets/shapes/**/*.svg')
        .pipe(makeChange())
        .pipe(gulp.dest('app/assets/shapes'));
});

问题是,这个 npm 包 Inkscape 与流一起使用,所以我应该以某种方式管道 Inkscape 输出并写回 gulp file.contents。

这似乎不起作用,因为此 Inkscape 流输出到缓冲区的转换是异步的,因此它与 gulp 任务流不同步。

我收到的错误是:

stream.js:59
    dest.end();
         ^

TypeError: dest.end is not a function
    at Inkscape.onend (stream.js:59:10)
    at emitNone (events.js:91:20)
    at Inkscape.emit (events.js:185:7)
    at Inkscape.<anonymous> (node_modules\inkscape\lib\Inkscape.js:161:26)
    at emitNone (events.js:91:20)
    at ReadStream.emit (events.js:185:7)
    at endReadableNT (_stream_readable.js:926:12)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)

谁能帮帮我?

【问题讨论】:

    标签: javascript node.js svg gulp


    【解决方案1】:

    file.contents 属性不必是Buffer。它也可以是流式的。您所要做的就是将buffer:false option 传递给gulp.src()

    那么就很简单,将现有的file.contents 流替换为通过调用.pipe() 创建的新流:

    var gulp = require('gulp');
    var map = require('event-stream').map;
    var Inkscape = require('inkscape');
    
    gulp.task('minify-shapes', function() {   
      return gulp.src('app/assets/shapes/**/*.svg', { buffer:false })
        .pipe(map(function(file, done) {
          var svgConverter = new Inkscape([
            '--verb=ObjectToPath', 
            '--export-plain-svg'
          ]);
    
          file.contents = file.contents.pipe(svgConverter);
          done(null, file);
        }))
        .pipe(gulp.dest('app/assets/shapes'));
    });
    

    【讨论】:

    • 嗨,感谢您的回答,这段代码看起来比我的要好得多:) 但是,现在我收到另一个错误:[20:16:28] 开始“缩小形状”... events.js:160 抛出 er; // 未处理的“错误”事件 ^ 错误:不支持流式传输
    • 好吧,算了,这个错误是因为我在管道中使用了另一个不支持流的插件。
    猜你喜欢
    • 1970-01-01
    • 2013-09-06
    • 2020-10-03
    • 2019-09-27
    • 1970-01-01
    • 2020-02-06
    • 2019-05-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多