Vi kan helt sikkert blive lidt nørdere med vores byggeværktøjer. På tidspunktet for udstationering af dette er plakatbarnet til byggeværktøjer Grunt. Der er konkurrenter, men Grunt har været den mest populære i et stykke tid. Hvis du er helt ny i Grunt, har jeg en række ting, jeg har skrevet og screenet om det:
- Grunt for folk der tænker ting som Grunt er underlige og hårde
- # 130: Første øjeblikke med Grunt
- # 134: En rundvisning i et igangværende sted bygget med Jekyll, Grunt, Sass, et SVG-system og mere
Selvom du aldrig har brugt Grunt, i denne screencast starter vi stort set fra bunden og får det hele i gang. Ideen er, at vi arbejder fra den indbegrebet "mappe fuld af SVG'er". Hver file.svg repræsenterer noget grafik, som vi vil bruge på webstedet. Vi ønsker at klemme alt det ind i en SVG defs-blok, der er klar til brug. Oprettede symboler, tilgængelighedsoplysninger tilføjet efter vores bedste automatiserede evne osv.
Når vi kommer i gang med Grunt, og installerer det byggeværktøj, vi fokuserer på her, grunt-svgstore, er vi klar til at gå.
I vores lille demo har vi konfigureret Grunt til via Gruntfile.js at se på vores mappe fyldt med SVG'er og oprette en defs.svg-fil, vi placerer i en inkluderer-mappe.
module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );Nivellering herfra vil omfatte brug af et "watch" -plugin til at se den mappe med SVG'er og automatisk køre denne opgave, når nogen af filerne ændres (eller tilføjes eller slettes). Hvis du bruger en webstedsbygger som Jekyll, kan du endda udløse en jekyll buildefterfølgende for at sikre dig, at den nye fil er tilgængelig på det byggede websted.
Filer
- 18-project-example.zip