GULP：以 JSON 格式获取所有 SVG

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

这是我需要的：

1. 获取文件名并将其添加到“name”中。
2. 获取 SVG 数据并将其添加到“数据”中。
3. 为双引号添加反斜杠。例如。版本=\"1.1\"。

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

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