Nous pouvons certainement devenir un peu plus nerd avec nos outils de construction. Au moment de publier ceci, l'affiche des outils de construction est Grunt. Il y a des concurrents, mais Grunt est le plus populaire depuis un certain temps. Si vous êtes nouveau sur Grunt, j'ai une variété de choses que j'ai écrites et screencées à ce sujet:
- Grunt pour les gens qui pensent que des choses comme Grunt sont bizarres et difficiles
- # 130: Premiers moments avec Grunt
- # 134: Visite d'un site en cours construit avec Jekyll, Grunt, Sass, un système SVG, etc.
Même si vous n'avez jamais utilisé Grunt, dans ce screencast, nous partons à peu près de zéro et faisons tout fonctionner. L'idée est que nous travaillons à partir du «dossier plein de SVG» par excellence. Chaque fichier.svg représente un graphique que nous voulons utiliser sur le site. Nous voulons écraser tout cela dans un bloc defs SVG prêt à être utilisé. Symboles créés, informations d'accessibilité ajoutées au mieux de notre capacité automatisée, etc.
Une fois que nous avons lancé Grunt et installé l'outil de construction sur lequel nous nous concentrons ici, grunt-svgstore, nous sommes prêts à partir.
Dans notre petite démo, nous avons configuré Grunt pour, via le Gruntfile.js, regarder notre dossier plein de SVG et créer un fichier defs.svg que nous avons placé dans un dossier d'inclusion.
module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );La mise à niveau à partir d'ici inclurait l'utilisation d'un plugin «watch» pour regarder ce dossier de SVG et exécuter automatiquement cette tâche lorsque l'un des fichiers change (ou est ajouté ou supprimé). Si vous utilisez un constructeur de site comme Jekyll, vous pouvez même en déclencher une jekyll buildpour vous assurer que le nouveau fichier est disponible dans le site créé.
Des dossiers
- 18-projet-example.zip