S našimi zostavovacími nástrojmi sa určite môžeme trochu zblázniť. V čase uverejnenia tohto príspevku je plagátovým potomkom nástrojov na vytváranie nástrojov Grunt. Sú konkurenti, ale Grunt je už nejaký čas najobľúbenejší. Ak ste pre Grunta úplne nový, mám o ňom veľa vecí, ktoré som o tom napísal a premietal:
- Grunt pre ľudí, ktorí si myslia, že veci ako Grunt sú divné a tvrdé
- # 130: Prvé chvíle s Gruntom
- # 134: Prehliadka prebiehajúceho webu zostaveného s Jekyll, Grunt, Sass, systémom SVG a ďalšími
Aj keď ste Grunt nikdy nepoužívali, v tomto obrazovom vysielaní začneme úplne od nuly a do toho vstupujeme. Ide o to, že pracujeme z podstatného „priečinka plného súborov SVG“. Každý súbor.svg predstavuje grafiku, ktorú chceme použiť na tejto stránke. Všetko to chceme prehnať do bloku SVG defs, ktorý je pripravený na použitie. Vytvorené symboly, informácie o prístupe doplnené podľa našich najlepších automatizovaných schopností atď.
Akonáhle spustíme Grunt a nainštalujeme si tu zostavovací nástroj, na ktorý sa zameriavame, grunt-svgstore, môžeme vyraziť.
V našej malej ukážke máme Grunt nakonfigurovaný tak, aby sa cez súbor Gruntfile.js pozrel na náš priečinok plný súborov SVG a vytvoril súbor defs.svg, ktorý sme vložili do priečinka includes.
module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );Zvýšenie úrovne odtiaľto by zahrňovalo použitie doplnku „watch“ na sledovanie tohto priečinka súborov SVG a automatické spustenie tejto úlohy pri zmene (alebo pridaní alebo odstránení) niektorého zo súborov. Ak používate nástroj na tvorbu webových stránok, ako je Jekyll, môžete spustiť aj jekyll buildneskôr, aby ste sa uistili, že nový súbor je k dispozícii na vytvorenom webe.
Súbory
- 18-projekt-priklad.zip