Vi kan definitivt bli lite nördigare med våra byggverktyg. Vid tidpunkten för publicering av detta är affischbarnet för byggverktyg Grunt. Det finns konkurrenter, men Grunt har varit den mest populära på ett tag. Om du är helt ny på Grunt har jag en mängd saker jag har skrivit och visat om det:
- Grunt för människor som tycker att saker som Grunt är konstiga och hårda
- # 130: Första ögonblicken med Grunt
- # 134: En rundtur i en pågående webbplats byggd med Jekyll, Grunt, Sass, ett SVG-system och mer
Även om du aldrig har använt Grunt, i den här skärmutsändningen börjar vi ganska mycket från början och får allt igång. Tanken är att vi arbetar från den typiska "mappen full av SVG-filer". Varje file.svg representerar någon grafik som vi vill använda på webbplatsen. Vi vill klämma allt detta i ett SVG-defs-block som är klart att användas. Skapade symboler, tillgänglighetsinformation läggs till efter bästa möjliga automatiserade förmåga, etc.
När vi väl har startat Grunt och installerat byggverktyget vi fokuserar på här, grunt-svgstore, är vi klara.
I vår lilla demo har vi konfigurerat Grunt att, via Gruntfile.js, titta på vår mapp full av SVG-filer och skapa en defs.svg-fil som vi lägger i en inkluderingsmapp.
module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );Utjämning härifrån skulle inkludera användning av ett "watch" -program för att titta på den mappen med SVG-filer och automatiskt köra denna uppgift när någon av filerna ändras (eller läggs till eller tas bort). Om du använder en webbplatsbyggare som Jekyll kan du till och med utlösa en jekyll buildefteråt för att se till att den nya filen är tillgänglig på den inbyggda webbplatsen.
Filer
- 18-project-example.zip