Definitivno možemo postati malo nervozniji s našim alatima za izgradnju. U vrijeme objavljivanja ovoga, podređeno dijete alata za izradu je Grunt. Postoje konkurenti, ali Grunt je već duže vrijeme najpopularniji. Ako ste potpuno novi za Grunt, o njemu sam napisao razne stvari i napisao ih:
- Grunt za ljude koji misle da su stvari poput Grunta čudne i teške
- # 130: Prvi trenuci s Gruntom
- # 134: Obilazak web lokacije u izgradnji izgrađene s Jekylllom, Gruntom, Sassom, SVG sustavom i mnogim drugim
Čak i ako nikada niste koristili Grunt, u ovom screencastu uglavnom krećemo ispočetka i sve to pokrećemo. Ideja je da radimo iz najistaknutije "mape pune SVG-ova". Svaka datoteka.svg predstavlja neku grafiku koju želimo koristiti na web mjestu. Sve to želimo ugurati u SVG defs blok koji je spreman za upotrebu. Stvoreni simboli, dodane informacije o pristupačnosti u najboljem slučaju naših automatiziranih mogućnosti itd.
Jednom kad pokrenemo Grunt i instaliramo alat za izgradnju na koji smo ovdje usmjereni, grunt-svgstore, spremni smo za početak.
U našem malom demonstracijskom programu Grunt smo konfigurirali da putem Gruntfile.js pregleda našu mapu punu SVG-ova i stvori defs.svg datoteku koju stavimo u mapu uključuje.
module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );Izravnavanje odavde uključivalo bi upotrebu dodatka "watch" za gledanje te mape SVG-ova i automatsko pokretanje ovog zadatka kad se bilo koja datoteka promijeni (ili se doda ili izbriše). Ako koristite graditelj web stranica kao što je Jekyll, možda ćete čak i jekyll buildkasnije pokrenuti postupak kako biste bili sigurni da je nova datoteka dostupna na izgrađenom mjestu.
Datoteke
- 18-projekt-primjer.zip