18: Build eszköz - Grunt svgstore - CSS-trükkök

Az építőeszközeinkkel mindenképpen kicsit idegesebbek lehetünk. Ennek feladásakor az építőeszközök poszter gyermeke Grunt. Vannak versenytársak, de a Grunt egy ideje a legnépszerűbb. Ha vadonatúj vagy a Grunt előtt, akkor számos dolgom van, amit írtam és vetítettem róla:

Grunt azokért, akik furcsának és keménynek tartják a Grunt-hez hasonló dolgokat
# 130: Első pillanatok a morgással
# 134: Jekyll, Grunt, Sass, SVG rendszer és még sok más által épített folyamatban lévő webhely bemutatása

Még akkor is, ha még soha nem használta a Grunt-ot, ebben a képernyőn nagyjából a nulláról indulunk, és mindezt elindítjuk. Az ötlet az, hogy a lényegében „SVG-kkel teli mappából” dolgozunk. Minden fájl.svg valamilyen grafikát képvisel, amelyet a webhelyen használni szeretnénk. Mindezt egy használatra kész SVG defs blokkba akarjuk osztani. Létrehozott szimbólumok, az akadálymentességre vonatkozó információk automatizált képességeink legjobbjaival hozzáadva stb.

Amint elindítjuk a Grunt-ot, és telepítjük a buildeszközt, amelyre itt összpontosítunk, grunt-svgstore, már indulhatunk is.

Kis bemutatónkban a Grunt-t úgy konfiguráltuk, hogy a Gruntfile.js-n keresztül megnézze az SVG-kkel teli mappánkat, és létrehozzon egy defs.svg fájlt, amelyet egy include mappába tettünk.

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

Az innen történő felemelkedés magában foglalja a „watch” plugin használatát az SVG-k mappájának megtekintésére, és automatikusan lefuttatja ezt a feladatot, ha bármelyik fájl megváltozik (vagy hozzáadódik vagy törlődik). Ha olyan webhely-készítőt használ, mint a Jekyll, akkor még jekyll buildutána is kiválaszthatja, hogy az új fájl elérhető-e a beépített webhelyen.