Z našimi orodji za gradnjo lahko zagotovo postanemo nekoliko bolj nerdni. V času objave tega je plakat otrok orodij za gradnjo Grunt. Konkurenti so, toda Grunt je že nekaj časa najbolj priljubljen. Če ste povsem novi pri Gruntu, imam o njem veliko stvari, ki sem jih napisal in predal:
- Grunt za ljudi, ki mislijo, da so stvari, kot je Grunt, čudne in težke
- # 130: Prvi trenutki z Gruntom
- # 134: Ogled spletnega mesta v teku, zgrajenega z Jekyllom, Gruntom, Sassom, sistemom SVG in drugimi
Tudi če nikoli niste uporabljali Grunta, v tem predvajanju zaslona začnemo kar od začetka in vse to začnemo. Ideja je, da delamo iz najpomembnejše "mape, polne SVG-jev". Vsaka datoteka.svg predstavlja nekaj slik, ki jih želimo uporabiti na spletnem mestu. Vse to želimo strti v blok SVG defs, ki je pripravljen za uporabo. Ustvarjeni simboli, dodane informacije o dostopnosti po naših najboljših avtomatiziranih zmožnostih itd.
Ko enkrat začnemo Grunt in namestimo orodje za gradnjo, na katerega se osredotočamo, grunt-svgstore, smo pripravljeni.
V naši mali predstavitvi smo Grunt konfigurirali tako, da preko Gruntfile.js pregleduje našo mapo, polno SVG-jev, in ustvari datoteko defs.svg, ki jo damo v mapo vključuje.
module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );Izravnava od tu bi vključevala uporabo vtičnika »watch« za ogled te mape SVG in samodejno zagon te naloge, ko se katera od datotek spremeni (ali je dodana ali izbrisana). Če uporabljate graditelja spletnih mest, kot je Jekyll, boste morda jekyll buildpozneje celo sprožili, da se prepričate, ali je nova datoteka na voljo na zgrajenem spletnem mestu.
Datoteke
- 18-projekt-primer.zip