Ar saviem veidošanas rīkiem mēs noteikti varam kļūt nedaudz nerdierāki. Ievietošanas laikā būvniecības rīku plakātu bērns ir Grunt. Ir konkurenti, taču Grunt ir bijis populārākais jau labu laiku. Ja jūs esat pavisam jauns lietotājs Grunt, man ir dažādas lietas, ko esmu par to uzrakstījis un uzrakstījis:
- Grunt cilvēkiem, kuri domā tādas lietas kā Grunt ir dīvaini un grūti
- # 130: Pirmie mirkļi ar Grunt
- # 134: Ekskursija pa vietni, kas izveidota, izmantojot Jekyll, Grunt, Sass, SVG sistēmu un citus
Pat ja jūs nekad neesat lietojis Grunt, šajā ekrānuzņēmumā mēs diezgan daudz sākam no nulles un visu to sākam. Ideja ir tāda, ka mēs strādājam no būtiskās “mapes, kas pilna ar SVG”. Katrs file.svg attēlo kādu grafiku, kuru vēlamies izmantot vietnē. Mēs vēlamies to visu sagriezt SVG defektu blokā, kas ir gatavs lietošanai. Izveidotie simboli, informācija par pieejamību, kas tiek izmantota pēc mūsu automātiskās iespējas utt.
Kad mēs sākam Grunt un instalējam būvēšanas rīku, uz kuru mēs šeit koncentrējamies, grunt-svgstore, mums ir labi iet.
Mūsu mazajā demonstrācijā mēs esam Grunt konfigurējuši, lai caur Gruntfile.js skatītu mūsu mapi, kurā ir daudz SVG, un izveidotu failu defs.svg, kuru ievietojam mapē ietver.
module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );Paaugstināšana no šejienes ietver “skatīšanās” spraudņa izmantošanu, lai skatītos šo SVG mapi un automātiski palaistu šo uzdevumu, kad kāds no failiem mainās (vai tiek pievienots vai izdzēsts). Ja izmantojat vietņu veidotāju, piemēram, Jekyll, jekyll buildpēc tam, iespējams, pat aktivizējat , lai pārliecinātos, ka jaunais fails ir pieejams izveidotajā vietnē.
Faili
- 18-project-example.zip