Podemos definitivamente ficar um pouco mais nerd com nossas ferramentas de construção. No momento em que postamos isso, o filho do pôster das ferramentas de construção é Grunt. Existem concorrentes, mas Grunt tem sido o mais popular por um bom tempo. Se você é novo no Grunt, tenho uma variedade de coisas que escrevi e screencders sobre ele:
- Grunt para pessoas que pensam que coisas como Grunt são estranhas e difíceis
- # 130: Primeiros momentos com Grunt
- Nº 134: Um tour por um site em andamento criado com Jekyll, Grunt, Sass, um sistema SVG e muito mais
Mesmo que você nunca tenha usado o Grunt, neste screencast nós praticamente começamos do zero e colocamos tudo em movimento. A ideia é que estamos trabalhando a partir da quintessência da “pasta cheia de SVGs”. Cada arquivo.svg representa algum gráfico que queremos usar no site. Queremos espremer tudo isso em um bloco defs SVG que está pronto para uso. Símbolos criados, informações de acessibilidade adicionadas ao melhor de nossa capacidade automatizada, etc.
Assim que colocarmos o Grunt em funcionamento e instalarmos a ferramenta de compilação que estamos focando aqui, grunt-svgstore, estamos prontos para prosseguir.
Em nossa pequena demonstração, configuramos o Grunt para, por meio do Gruntfile.js, olhar nossa pasta cheia de SVGs e criar um arquivo defs.svg que colocamos em uma pasta includes.
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 nível a partir daqui incluiria o uso de um plug-in de “observação” para monitorar aquela pasta de SVGs e executar esta tarefa automaticamente quando qualquer um dos arquivos for alterado (ou adicionado ou excluído). Se você estiver usando um construtor de sites como o Jekyll, pode até mesmo acionar um jekyll builddepois para ter certeza de que o novo arquivo está disponível no site construído.
arquivos
- 18-project-example.zip