18: Build Tool - Grunt svgstore - CSS-trucs

We kunnen zeker een beetje nerdier worden met onze bouwtools. Op het moment dat dit werd geplaatst, is Grunt het kind van build-tools. Er zijn concurrenten, maar Grunt is al een tijdje het populairst. Als Grunt nieuw voor je is, heb ik er verschillende dingen over geschreven en gescreend:

Grunt voor mensen die denken dat dingen als Grunt raar en moeilijk zijn
# 130: Eerste momenten met Grunt
# 134: Een rondleiding door een site in uitvoering, gebouwd met Jekyll, Grunt, Sass, een SVG-systeem en meer

Zelfs als je Grunt nog nooit hebt gebruikt, beginnen we in deze screencast vrijwel vanaf nul en krijgen we dit allemaal op gang. Het idee is dat we werken vanuit de typische "map vol SVG's". Elk bestand.svg vertegenwoordigt een afbeelding die we op de site willen gebruiken. We willen dat allemaal in een SVG defs-blok persen dat klaar is voor gebruik. Symbolen gemaakt, toegankelijkheidsinformatie toegevoegd aan onze beste geautomatiseerde mogelijkheden, enz.

Zodra we Grunt aan de gang hebben, en de build-tool installeren waarop we ons hier concentreren, grunt-svgstore, zijn we klaar om te gaan.

In onze kleine demo hebben we Grunt geconfigureerd om, via de Gruntfile.js, naar onze map vol SVG's te kijken en een defs.svg-bestand te maken dat we in een include-map plaatsen.

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

Het nivelleren vanaf hier zou het gebruik van een 'watch'-plug-in omvatten om die map met SVG's te bekijken en deze taak automatisch uit te voeren wanneer een van de bestanden verandert (of wordt toegevoegd of verwijderd). Als u een sitebouwer zoals Jekyll gebruikt, kunt u zelfs een jekyll buildachteraf activeren om ervoor te zorgen dat het nieuwe bestand beschikbaar is op de gebouwde site.