Cu siguranță putem deveni un pic mai tocilari cu instrumentele noastre de construcție. La momentul postării acestui articol, copilul poster al instrumentelor de construcție este Grunt. Există concurenți, dar Grunt a fost cel mai popular de ceva vreme. Dacă sunteți nou-nouț la Grunt, am o varietate de lucruri pe care le-am scris și le-am scris:
- Grunt pentru oamenii care cred că lucruri precum Grunt sunt ciudate și grele
- # 130: Primele momente cu Grunt
- # 134: Un tur al unui site în curs construit cu Jekyll, Grunt, Sass, un sistem SVG și multe altele
Chiar dacă nu ați folosit niciodată Grunt, în acest screencast începem de la zero și punem totul în funcțiune. Ideea este că lucrăm din „folderul plin de SVG-uri” prin excelență. Fiecare fișier.svg reprezintă o grafică pe care dorim să o folosim pe site. Vrem să strângem toate acestea într-un bloc de definiții SVG care este gata de utilizare. Simboluri create, informații de accesibilitate adăugate la maximum de abilitățile noastre automatizate etc.
Odată ce punem Grunt în funcțiune și instalăm instrumentul de construire pe care ne concentrăm aici, grunt-svgstore, suntem bine să mergem.
În mica noastră demonstrație, Grunt este configurat să, prin Gruntfile.js, să ne uităm la folderul nostru plin de SVG-uri și să creăm un fișier defs.svg pe care l-am pus într-un folder include.
module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );Creșterea nivelului de aici ar include utilizarea unui plugin „ceas” pentru a urmări acel folder de SVG-uri și a rula automat această sarcină atunci când oricare dintre fișiere se schimbă (sau sunt adăugate sau șterse). Dacă utilizați un constructor de site-uri cum ar fi Jekyll, s-ar putea chiar să declanșați un jekyll buildulterior pentru a vă asigura că noul fișier este disponibil pe site-ul construit.
Dosare
- 18-proiect-example.zip