18: Build Tool – Grunt svgstore

We can definitely get a little nerdier with our build tools. At the time of posting this, the poster child of build tools is Grunt. There are competitors, but Grunt has been the most popular for quite a while. If you’re brand new to Grunt, I have a variety of things I’ve written and screencasted about it:

• Grunt for People Who Think Things Like Grunt are Weird and Hard
• #130: First Moments with Grunt
• #134: A Tour of a Site In-Progress Built with Jekyll, Grunt, Sass, an SVG System, and More

Even if you’ve never used Grunt, in this screencast we pretty much start from scratch and get this all going. The idea is that we’re working from the quintessential “folder full of SVGs”. Each file.svg represents some graphic we want to use on the site. We want to squish all that into a SVG defs block that is ready to use. Symbols created, accessibility information added to the best of our automated ability, etc.

Once we get Grunt going, and install the build tool we’re focusing on here, grunt-svgstore, we’re good to go.

In our little demo we have Grunt configured to, via the Gruntfile.js, to look at our folder full of SVG’s and create a defs.svg file we put in an includes folder.

module.exports = function(grunt) {

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

  grunt.loadNpmTasks('grunt-svgstore');

};

Leveling up from here would include using a “watch” plugin to watch that folder of SVGs and automatically run this task when any of the files change (or are added or deleted). If you’re using a site builder like Jekyll, you might even trigger a jekyll build afterward to make sure the new file is available in the built site.