Question

我有许多需要通过JSON提供的SVG图标。我喜欢有一个任务让所有SVG都做这样的事情。

{
  "name": "icon-file-name",
  "data": "<svg version=\"1.1\">...</svg>"
},
{
  "name": "icon-file-name",
  "data": "<svg version=\"1.1\">...</svg>"
}

到目前为止，我有这个：

gulp.task('buildSvgIcon', function() {
  return gulp.src([ paths.svgIcons + '*.svg'])
    .pipe(gulp.dest('./www/assets/cleaned-up-svg-icons/'));
});

这就是我需要的：

获取文件名并将其添加到＆＃34; name＆＃34;。
获取SVG数据并将其添加到＆＃34;数据＆＃34;。
为双引号添加反斜杠。例如。版本= \＆＃34; 1.1 \＆＃34;

如果你能告诉我一个想法如何做到这将是很有帮助的。

Answer 1

这样的事情：

var fc2json = require('gulp-file-contents-to-json');
var jsonTransform = require('gulp-json-transform');

gulp.task('svg', function() {

    gulp.src(config.paths.svg)
        .pipe(fc2json('contents.json'))
        .pipe(jsonTransform(function(data) {

            var resultJson = '',
                objects = [],
                keys = Object.keys(data);

            for (var i = 0; i < keys.length; i++) {

                objects.push({
                    name: keys[i],
                    data: data[keys[i]]
                });
            }

            // return objects; it's correct json

            var i = 0;
            objects.map(function(e) {

                i++;
                resultJson += JSON.stringify(e) +
                    (i == keys.length ? '' : ',\n');
            });

            return resultJson; // it's just what you want in result file, but it's no valid json file
        }))
        .pipe(gulp.dest(config.paths.dist + '/svg_json'));
});

GULP：获取JSON中的所有SVG

1 个答案: