Inhalt
JavaScript Task Leefer wéi Grunt sinn extrem populär bei Frontend Entwéckler ginn. Dëst ass well se hëllefen eng Saach ze maachen déi mir all an eise Beruffer wëlle maachen - spuert Zäit!
Awer mat méi wéi 5.000 (a zielen) Grunt Plugins elo verfügbar, kann et schwéier sinn fir Entwéckler déi 'Diamanten am Rauw' ze fannen. Mir hunn e Réckbléck op eis Zäit gemaach fir an de Grunt hänke bliwwen fir dat perfekt Rezept vu Grunt Plugins ze fannen dat Dir sollt benotzen.
01. Uglify
All Frontend-Entwéckler, dee säi Salz wäert ass, weess iwwer d'Virdeeler vun der Minifizéierung vu JavaScript Dateien, an dat ass genau wat dëse Plugin mécht. Sou ass seng Popularitéit, et ass tatsächlech am Grunt Getting Started Guide abegraff. Trotz dem Numm kann dëse Plugin och benotzt ginn fir Ären JavaScript Code ze verschéineren - och wann dat net besonnesch nëtzlech fir d'Benotzung vun der Produktioun ass.
02. Sass
Et kann e puer Debatte sinn iwwer wéi en CSS Pre-Prozessor wierklech de Roost regéiert, awer hei bei Stickyeyes hu mir eis op Sass anstatt säin Haaptkonkurrent, Manner. Dëse Plug-in erlaabt eis eis Sass Dateien ze schreiwen an automatesch op CSS ze kompiléieren. D'Verdéngschter fir e CSS Pre-Prozessor ze benotzen garantéiert en separaten Artikel u sech, awer et ass sécher ze soen datt wann Dir e scho net benotzt sidd Dir ganz spéit op d'Party!
03. CSSMin
Dëse Plugin ass den CSS Äquivalent vun Uglify. Et kritt einfach all spezifizéiert CSS Dateien a minifizéiert se. Natierlech wann Dir dëst a Verbindung mam Sass Plugin benotzt, da musst Dir sécher sinn datt dës Aufgab no der Sass Task gerannt gëtt.
Et gi vill Alternativen zu CSSMin déi och d'Gréisst vun Äre CSS Dateie mat liicht verschiddenen Techniken reduzéiere kënnen; CSS Nano, CSS Wring, CSS Schrumpf, asw Liest dëse praktesche Benchmark wann Dir an dëser Zort Saachen sidd.
04. Concat
Wéi den Numm et scho seet, hëlt dëse Plugin einfach verschidde Dateien a verknëppelt se an een. Wéi och mam Minifizéierungscode ass d'Verknëpplung vun Dateien och en alen ale Praktike fir d'Säitluedezäiten ze reduzéieren.
Dateikonkatenatioun sollt ëmmer an der Produktioun fir JavaScript a CSS benotzt ginn. Dëst ass normalerweis déi lescht Aufgab ze lafen - no der CSS Pre-Processing Task a Minification Task. Et ass einfach just dëse Plugin ze soen all d'Fichier'en an engem spezifesche Verzeechnes ze verknëppelen, awer passt op den Optrag datt d'Fichierë matenee verbonne sinn - Dir musst vläicht e spezifeschen Optrag ginn oder d'Fichier'en nennen sou datt se ëmmer an der Reiefolleg matenee verbonne sinn .
05. ImageMin
An der selwechter Ader wéi CSSMin an Uglify, tackelt ImageMin en aneren alen alen Probleem fir d'Säit ze lueden - Bild Dateigréisst. Bild 'Minifizéierung' ass normalerweis en éischte Port-of-Call fir Optimiséierung, sou datt dëse Plugin wesentlech ass fir d'Gesamt Säit Dateigréisst sou vill wéi méiglech erof ze reduzéieren.
Wann Dir mat JPG, PNG, GIF oder SVG (en ëmmer méi populärem Vecteure Bildformat) schafft, wäert dëse Plugin Resultatlos Verloschter an der Dateigréisst vun Äre Biller ubidden, ouni datt Dir e Fanger hëlt. Wann Dir vill Biller an Ärem Projet hutt, ass et eng gutt Iddi dës Aufgab nëmmen auszeféieren wann Dir op d'Produktioun dréckt, anstatt dës Aufgab op engem Iwwerwaachungsevenement auszeféieren (kuckt nächste Punkt).
06. Kuckt
Dëse Plugin beaflosst net tatsächlech Är Websäit Frontend, awer et ass extrem nëtzlech fir en effizienten Grunt Prozess ze kreéieren. Kuckt hält einfach all Verzeechnes déi Dir spezifizéiert, am Aa, a wann eppes ännert, gëtt et automatesch verschidde Grunt Aufgaben ausgeléist.
Also kënnt Dir eng Iwwerwaachungsbedingung an Ärem 'js' Verzeechnes opstellen fir Är JavaScript Aufgaben auszeféieren, an eng aner an Ärem 'css' Verzeechnes fir Är CSS Aufgaben auszeféieren. Dëst bedeit datt Dir ni Ären Haaptgrunt Prozess manuell lafe musst! Initialiséiert just d'Grunt Auer Aufgab ier Dir Ännerunge maacht an Dir kënnt vergiessen datt et och do ass.
Wierder: Jamie Schëlder
Den Jamie Shields ass e Backend-Entwéckler bei der digitaler Marketingagence Stickyeyes.
Esou? Liest dëst!
- Grunt vs Gulp: Wéi en JavaScript Build Tool sollt Dir wielen?
- 8 Weeër fir Äert Grunt Set-Up ze verbesseren
- Déi bescht gratis WordPress Themen
