18: Herramienta de construcción - Grunt svgstore - Trucos CSS

Definitivamente podemos volvernos un poco más nerd con nuestras herramientas de construcción. En el momento de publicar esto, el ejemplo secundario de las herramientas de construcción es Grunt. Hay competidores, pero Grunt ha sido el más popular durante bastante tiempo. Si eres nuevo en Grunt, tengo una variedad de cosas que he escrito y proyectado al respecto:

Grunt para personas que piensan que cosas como Grunt son raras y difíciles
# 130: Primeros momentos con Grunt
# 134: Un recorrido por un sitio en progreso construido con Jekyll, Grunt, Sass, un sistema SVG y más

Incluso si nunca has usado Grunt, en este screencast prácticamente comenzamos desde cero y hacemos que todo funcione. La idea es que estemos trabajando desde la quintaesencia de la “carpeta llena de SVG”. Cada file.svg representa algún gráfico que queremos usar en el sitio. Queremos aplastar todo eso en un bloque de definiciones SVG que esté listo para usar. Símbolos creados, información de accesibilidad agregada de la mejor manera posible a nuestra capacidad automatizada, etc.

Una vez que pongamos en marcha Grunt e instalemos la herramienta de compilación en la que nos estamos centrando aquí, grunt-svgstore, estamos listos para comenzar.

En nuestra pequeña demostración tenemos Grunt configurado para, a través de Gruntfile.js, mirar nuestra carpeta llena de SVG y crear un archivo defs.svg que colocamos en una carpeta incluye.

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

Subir de nivel desde aquí incluiría el uso de un complemento de "vigilancia" para ver esa carpeta de SVG y ejecutar automáticamente esta tarea cuando cualquiera de los archivos cambie (o se agregue o elimine). Si está utilizando un creador de sitios como Jekyll, incluso puede activar un jekyll builddespués para asegurarse de que el nuevo archivo esté disponible en el sitio creado.