18: Strumento di compilazione - Grunt svgstore - Trucchi CSS

Possiamo sicuramente diventare un po 'più nerd con i nostri strumenti di costruzione. Al momento della pubblicazione di questo messaggio, il poster secondario degli strumenti di costruzione è Grunt. Ci sono concorrenti, ma Grunt è stato il più popolare per un bel po '. Se sei nuovo di zecca su Grunt, ho una varietà di cose che ho scritto e scritto su di esso:

Grunt per persone che pensano che cose come Grunt siano strane e dure
# 130: Primi momenti con Grunt
# 134: Un tour di un sito in corso realizzato con Jekyll, Grunt, Sass, un sistema SVG e altro

Anche se non hai mai usato Grunt, in questo screencast partiamo praticamente da zero e facciamo tutto questo. L'idea è che stiamo lavorando dalla quintessenza della "cartella piena di SVG". Ogni file.svg rappresenta un grafico che vogliamo utilizzare sul sito. Vogliamo schiacciare tutto ciò in un blocco defs SVG pronto per l'uso. Simboli creati, informazioni sull'accessibilità aggiunte al meglio delle nostre capacità automatizzate, ecc.

Una volta avviato Grunt e installato lo strumento di compilazione su cui ci stiamo concentrando qui, grunt-svgstore, siamo a posto.

Nella nostra piccola demo abbiamo Grunt configurato per, tramite Gruntfile.js, per guardare la nostra cartella piena di SVG e creare un file defs.svg che mettiamo in una cartella include.

module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );

Salire di livello da qui includerebbe l'utilizzo di un plug-in "watch" per controllare quella cartella di SVG ed eseguire automaticamente questa attività quando uno qualsiasi dei file cambia (o viene aggiunto o eliminato). Se stai utilizzando un costruttore di siti come Jekyll, potresti persino attivare un jekyll buildsuccessivo per assicurarti che il nuovo file sia disponibile nel sito creato.