Voimme ehdottomasti saada hieman nerdierin rakennustyökaluillamme. Tämän julkaisuhetkellä rakennustyökalujen juliste-lapsi on Grunt. Kilpailijoita on, mutta Grunt on ollut suosituin jo jonkin aikaa. Jos olet aivan uusi Gruntille, minulla on useita asioita, jotka olen kirjoittanut ja kuvannut siitä:
- Grunt ihmisille, jotka ajattelevat asioita, kuten Grunt, ovat outoja ja vaikeita
- # 130: Ensimmäiset hetket Gruntin kanssa
- # 134: Kierros käynnissä olevasta sivustosta, joka on rakennettu Jekyllillä, Gruntilla, Sassilla, SVG-järjestelmällä ja muulla
Vaikka et ole koskaan käyttänyt Gruntia, aloitamme tässä kuvaruudussa melkein tyhjästä ja saamme kaiken käyntiin. Ajatuksena on, että työskentelemme pohjimmiltaan "SVG: tä täynnä olevasta kansiosta". Jokainen file.svg edustaa grafiikkaa, jota haluamme käyttää sivustolla. Haluamme jakaa kaiken tämän SVG-def-lohkoon, joka on käyttövalmis. Luodut symbolit, esteettömyystiedot lisätään parhaan mahdollisen automatisointimme mukaan jne.
Kun saamme Gruntin käyntiin ja asennamme rakentamistyökalun, johon keskitymme, grunt-svgstore, meillä on hyvä mennä.
Pienessä esittelyssä olemme Gruntin määrittäneet Gruntfile.js: n kautta tarkastelemaan SVG: tä täyttä kansiota ja luomaan defs.svg-tiedoston, jonka laitamme sisällytyskansioon.
module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );Sieltä tasoittaminen merkitsisi "watch" -laajennuksen käyttöä kyseisen SVG-kansion katseluun ja tämän tehtävän suorittamiseen automaattisesti, kun jokin tiedostoista muuttuu (tai lisätään tai poistetaan). Jos käytät sivuston rakentajaa, kuten Jekyll, saatat jopa käynnistää jekyll buildjälkikäteen varmistaaksesi, että uusi tiedosto on käytettävissä rakennetulla sivustolla.
Tiedostot
- 18-projectexample.zip