{"id":182534,"date":"2014-09-17T15:37:10","date_gmt":"2014-09-17T22:37:10","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=182534"},"modified":"2015-10-27T08:35:05","modified_gmt":"2015-10-27T15:35:05","slug":"18-2","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/lodge\/svg\/18-2\/","title":{"rendered":"18: Build Tool &#8211; Grunt svgstore"},"content":{"rendered":"<p>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&#8217;re brand new to Grunt, I have a variety of things I&#8217;ve written and screencasted about it:<\/p>\n<ul>\n<li><a href=\"http:\/\/24ways.org\/2013\/grunt-is-not-weird-and-hard\/\" rel=\"noopener\">Grunt for People Who Think Things Like Grunt are Weird and Hard<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/video-screencasts\/130-first-moments-grunt\/\">#130: First Moments with Grunt<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/video-screencasts\/screencast-134-tour-site-progress-built-jekyll-grunt-sass-svg-system\/\">#134: A Tour of a Site In-Progress Built with Jekyll, Grunt, Sass, an SVG System, and More<\/a><\/li>\n<\/ul>\n<p>Even if you&#8217;ve never used Grunt, in this screencast we pretty much start from scratch and get this all going. The idea is that we&#8217;re working from the quintessential &#8220;folder full of SVGs&#8221;. 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. <\/p>\n<p>Once we get Grunt going, and install the build tool we&#8217;re focusing on here, <a href=\"https:\/\/github.com\/FWeinb\/grunt-svgstore\" rel=\"noopener\">grunt-svgstore<\/a>, we&#8217;re good to go. <\/p>\n<p>In our little demo we have Grunt configured to, via the Gruntfile.js, to look at our folder full of SVG&#8217;s and create a defs.svg file we put in an includes folder.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">module.exports = function(grunt) {\r\n\r\n  grunt.initConfig({\r\n    svgstore: {\r\n      options: {\r\n        formatting : {\r\n          indent_size : 2\r\n        }\r\n      },\r\n        default: {\r\n          files: {\r\n          'includes\/defs.svg': ['svg\/*.svg'],\r\n        },\r\n      },\r\n    },\r\n  });\r\n\r\n  grunt.loadNpmTasks('grunt-svgstore');\r\n\r\n};<\/code><\/pre>\n<p>Leveling up from here would include using a &#8220;watch&#8221; 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&#8217;re using a site builder like Jekyll, you might even trigger a <code>jekyll build<\/code> afterward to make sure the new file is available in the built site.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;re brand new to Grunt, I have a variety of things I&#8217;ve written and screencasted [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":177022,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"lodge-video.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":157918,"url":"https:\/\/css-tricks.com\/video-screencasts\/130-first-moments-grunt\/","url_meta":{"origin":182534,"position":0},"title":"#130: First Moments with Grunt","date":"December 10, 2013","format":false,"excerpt":"There are all these tasks that we need to do as front end developers. Concatenate and compress our files. Run our preprocessors. Optimize images. Run tests. The list goes on and on. Using different tools for all of them is getting increasingly difficult. Running them manually makes it worse, and\u2026","rel":"","context":"With 63 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":190763,"url":"https:\/\/css-tricks.com\/lodge\/svg\/35-optimizing-svg-tools\/","url_meta":{"origin":182534,"position":1},"title":"35: Optimizing SVG with Tools","date":"December 14, 2014","format":false,"excerpt":"We talked about optimizing SVG by hand already. Making choices manually about detail and what kinds of things can be combined or removed. In this screencast we'll look at optimizing SVG with tools. Tools that can reduce the file size of SVG without (hopefully) changing the look of it at\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":177144,"url":"https:\/\/css-tricks.com\/video-screencasts\/screencast-134-tour-site-progress-built-jekyll-grunt-sass-svg-system\/","url_meta":{"origin":182534,"position":2},"title":"#134: A Tour of a Site In-Progress Built with Jekyll, Grunt, Sass, an SVG System, and More","date":"August 1, 2014","format":false,"excerpt":"Warning: this is a meandering, intermediate level screencast in which we look at the code that powers a build process for a site. We don't write any code. A \"build process\" is all the stuff that happens between the code you write and code that goes out to a live\u2026","rel":"","context":"With 50 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":146791,"url":"https:\/\/css-tricks.com\/video-screencasts\/128-effeckt-css-local-setup-with-grunt-and-contributing-on-github\/","url_meta":{"origin":182534,"position":3},"title":"#128: Effeckt.css, Local Setup with Grunt, and Contributing on GitHub","date":"August 15, 2013","format":false,"excerpt":"Effeckt.css is an in-progress open source project that aims to provide performant, quality CSS transitions and animations for web designers. The idea is to provide as little UI and JavaScript as possible so that you can extract an effect to use on your own site, and customize it, easily. In\u2026","rel":"","context":"With 16 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":155747,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/29-getting-production-ready\/","url_meta":{"origin":182534,"position":4},"title":"#29: Getting Production Ready","date":"November 12, 2013","format":false,"excerpt":"We're going to bring it back out to a normal text editor in this screencast, just as we started. In a \"real world\" situation, these things are true: You want to break up your JavaScript into as many small files as makes sense to you. Just like we broke up\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":182535,"url":"https:\/\/css-tricks.com\/lodge\/svg\/19-2\/","url_meta":{"origin":182534,"position":5},"title":"19: More Build Tools!","date":"September 17, 2014","format":false,"excerpt":"We've learned that build tools are a particularly awesome for tasks like turning a folder full of SVGs into an SVG defs block. As is always the case in this lovely web world we live in, there is always more than one tool for the job. There is certainly more\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/182534"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=182534"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/182534\/revisions"}],"predecessor-version":[{"id":183429,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/182534\/revisions\/183429"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/177022"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=182534"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=182534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}