S našimi sestavovacími nástroji můžeme určitě být trochu nerdiernější. V době zveřejnění tohoto příspěvku je potomkem sestavovacích nástrojů Grunt. Existují konkurenti, ale Grunt je už nějakou dobu nejoblíbenější. Pokud jste v Gruntovi úplně nový, mám o něm spoustu věcí, které jsem o tom napsal a promítl:
- Grunt pro lidi, kteří si myslí, že věci jako Grunt jsou divné a tvrdé
- # 130: První okamžiky s Gruntem
- # 134: Prohlídka probíhajícího webu postaveného s Jekyllem, Gruntem, Sassem, systémem SVG a dalšími
I když jste Grunt nikdy nepoužívali, v tomto screencastu začínáme úplně od nuly a vše probíhá. Myšlenka je, že pracujeme z klíčové „složky plné SVG“. Každý soubor.svg představuje nějakou grafiku, kterou chceme na webu použít. Chceme to všechno rozbít do bloku SVG defs, který je připraven k použití. Vytvořené symboly, informace o přístupnosti přidané k našim automatizovaným schopnostem atd.
Jakmile spustíme Grunt a nainstalujeme nástroj pro sestavení, na který se zde zaměřujeme, grunt-svgstore, je dobré jít.
V naší malé ukázce máme Grunt nakonfigurovaný tak, aby se prostřednictvím Gruntfile.js podíval na naši složku plnou SVG a vytvořil soubor defs.svg, který jsme vložili do složky includes.
module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );Povýšení odtud by zahrnovalo použití pluginu „watch“ ke sledování této složky SVG a automatické spuštění tohoto úkolu, když se některý ze souborů změní (nebo je přidán či odstraněn). Pokud používáte nástroj pro tvorbu webů, jako je Jekyll, můžete dokonce spustit jekyll buildpozději, abyste se ujistili, že je nový soubor k dispozici na vytvořeném webu.
Soubory
- 18-project-example.zip