18: 构建工具 – Grunt svgstore

我们绝对可以对构建工具进行更深入的研究。在发布本文时，构建工具的典型代表是 Grunt。虽然也存在竞争对手，但 Grunt 一直是最受欢迎的工具之一，持续了相当长一段时间。如果你刚接触 Grunt，我写过一些文章和制作了一些屏幕录像来介绍它。

• 面向认为 Grunt 之类的工具很奇怪且难以理解的人的 Grunt
• #130：Grunt 初体验
• #134：使用 Jekyll、Grunt、Sass、SVG 系统等构建的站点进度巡礼

即使你从未使用过 Grunt，在这个屏幕录像中，我们几乎是从头开始，并逐步完成整个过程。我们的想法是，我们从一个典型的“包含 SVG 文件的文件夹”开始。每个 file.svg 文件代表我们在网站上要使用的某个图形。我们希望将所有这些图形压缩到一个 SVG defs 块中，以便于使用。创建符号，并尽可能地自动添加可访问性信息等。

一旦我们启动 Grunt 并安装了我们将重点介绍的构建工具 grunt-svgstore，我们就可以开始了。

在我们的演示中，我们配置 Grunt（通过 Gruntfile.js）来查看包含 SVG 文件的文件夹，并创建一个 defs.svg 文件，然后将其放置在 includes 文件夹中。

module.exports = function(grunt) {

  grunt.initConfig({
    svgstore: {
      options: {
        formatting : {
          indent_size : 2
        }
      },
        default: {
          files: {
          'includes/defs.svg': ['svg/*.svg'],
        },
      },
    },
  });

  grunt.loadNpmTasks('grunt-svgstore');

};

更进一步，可以包含一个“监视”插件来监视 SVG 文件夹，并在任何文件发生更改（或添加或删除）时自动运行此任务。如果你使用 Jekyll 之类的网站构建器，甚至可以随后触发 jekyll build，以确保新文件在构建的网站中可用。