Vi kan definitivt bli litt nerdier med byggeverktøyene våre. På tidspunktet for utgivelsen av dette er plakatbarnet til byggverktøyene Grunt. Det er konkurrenter, men Grunt har vært den mest populære en god stund. Hvis du er helt ny for Grunt, har jeg en rekke ting jeg har skrevet og vist om det:
- Grunt for folk som tenker ting som Grunt er rare og harde
- # 130: Første øyeblikk med Grunt
- # 134: En omvisning av et pågående nettsted bygget med Jekyll, Grunt, Sass, et SVG-system og mer
Selv om du aldri har brukt Grunt, begynner vi i denne screencast ganske mye fra bunnen av og får alt i gang. Tanken er at vi jobber fra den kjente "mappen full av SVG-er". Hver file.svg representerer noe grafikk vi vil bruke på nettstedet. Vi vil pusse alt det inn i en SVG defs-blokk som er klar til bruk. Opprettede symboler, tilgjengelighetsinformasjon lagt til etter beste evne, etc.
Når vi kommer i gang med Grunt, og installerer byggeverktøyet vi fokuserer på her, grunt-svgstore, er vi klare.
I vår lille demo har vi konfigurert Grunt til å, via Gruntfile.js, se på mappen vår full av SVG-filer og lage en defs.svg-fil vi legger 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'); );Utjevning herfra vil inkludere bruk av et "watch" -tillegg for å se den mappen med SVG-er og kjøre denne oppgaven automatisk når noen av filene endres (eller legges til eller slettes). Hvis du bruker en nettstedsbygger som Jekyll, kan du til og med utløse en jekyll buildetterpå for å sikre at den nye filen er tilgjengelig på det innebygde nettstedet.
Filer
- 18-prosjekteksempel.zip
