18: „Build Tool“ - „Grunt svgstore“ CSS-gudrybės

Naudodami savo kūrimo įrankius tikrai galime pasidaryti šiek tiek nerangesni. Paskelbiant tai, statybinių įrankių vaikas yra Gruntas. Yra konkurentų, tačiau „Grunt“ gana ilgą laiką buvo populiariausias. Jei esate visiškai naujas „Grunt“ narys, turiu įvairiausių dalykų, kuriuos apie tai parašiau ir parašiau:

Grūmimas žmonėms, kurie mano, kad tokie dalykai kaip Gruntas yra keisti ir sunkūs
# 130: Pirmos akimirkos su Grunt
# 134: „Jekyll“, „Grunt“, „Sass“, „SVG“ sistemos ir kt. Sukurtos pažangos svetainėje apžvalga

Net jei jūs niekada nenaudojote „Grunt“, šioje ekrano juostoje mes daug ką pradedame nuo nulio ir viską įgyvendiname. Idėja yra ta, kad mes dirbame iš esminio „aplanko, pilno SVG“. Kiekvienas failas.svg pateikia tam tikrą grafiką, kurią norime naudoti svetainėje. Norime visa tai suskirstyti į paruoštą naudoti „SVG defs“ bloką. Sukurti simboliai, prieinamumo informacija pridėta prie visų mūsų automatinių galimybių ir t. T.

Kai pradėsime „Grunt“ ir įdiegsime kūrimo įrankį, į kurį sutelkėme dėmesį, „grunt-svgstore“, mes galime eiti.

Savo mažoje demonstracijoje „Grunt“ sukonfigūravome per „Gruntfile.js“ peržiūrėti mūsų aplanką, pilną SVG, ir sukurti failą defs.svg, kurį įdėjome į aplanką „apima“.

module.exports = function(grunt) ( grunt.initConfig(( svgstore: ( options: ( formatting : ( indent_size : 2 ) ), default: ( files: ( 'includes/defs.svg': ('svg/*.svg'), ), ), ), )); grunt.loadNpmTasks('grunt-svgstore'); );

Iš aukštesnio lygio čia būtų naudojamas „watch“ papildinio naudojimas norint peržiūrėti tą SVG aplanką ir automatiškai paleisti šią užduotį, kai kuris nors failas pasikeičia (arba yra pridėtas ar ištrintas). Jei naudojate svetainių kūrimo priemonę, pvz., „Jekyll“, netgi galite suaktyvinti jekyll buildvėliau, kad įsitikintumėte, jog naujoji byla yra pasiekiamoje svetainėje.