Nilalaman
Ang mga tumatakbo sa gawain ng JavaScript tulad ng Grunt ay naging napakapopular sa mga developer ng front-end. Ito ay sapagkat tumutulong sila upang gawin ang isang bagay na nais nating lahat na gawin sa ating mga trabaho - makatipid ng oras!
Ngunit sa higit sa 5,000 (at pagbibilang) na mga Grunt plugin na magagamit na ngayon, maaaring mahirap para sa mga developer na hanapin ang mga 'diamante sa magaspang'. Nilingon namin ang aming oras na natigil sa Grunt upang makita ang perpektong resipe ng mga Grunt plugin na dapat mong gamitin.
01. Uglify
Ang bawat front-end developer na nagkakahalaga ng kanilang asin ay nakakaalam tungkol sa mga pakinabang ng pagliit ng mga file ng JavaScript, at iyon mismo ang ginagawa ng plugin na ito. Ganyan ang kasikatan nito, talagang kasama ito sa Grunt Getting Started Guide. Sa kabila ng pangalan, ang plugin na ito ay maaari ding gamitin upang pagandahin ang iyong JavaScript code - kahit na hindi iyon partikular na kapaki-pakinabang para sa paggamit ng produksyon.
02. Sass
Maaaring may ilang debate tungkol sa kung aling CSS pre-processor ang talagang namamahala sa roost, ngunit dito sa Stickyeyes, naayos na namin ang Sass kaysa sa pangunahing karibal nito, Mas. Nagbibigay-daan sa amin ang plug-in na ito na isulat ang aming mga Sass file at awtomatiko silang naipon. Ang mga katangian ng paggamit ng isang CSS pre-processor ay nagbibigay ng isang hiwalay na artikulo sa sarili nito, ngunit ligtas na sabihin na kung hindi ka gumagamit ng isa ay huli na kayo sa partido!
03. CSSMin
Ang plugin na ito ay katumbas ng CSS ng Uglify. Nakakakuha lamang ito ng anumang tinukoy na mga CSS file at binabawasan ang mga ito. Siyempre kung gagamitin mo ito kasabay ng Sass plugin pagkatapos ay kailangan mong tiyakin na ang gawaing ito ay pinatakbo pagkatapos ng gawain ng Sass.
Maraming mga kahalili sa CSSMin na maaari ring mabawasan ang laki ng iyong mga CSS file gamit ang bahagyang magkakaibang mga diskarte; CSS nano, CSS wring, CSS shrink, atbp Basahin ang madaling gamiting benchmark na ito kung nasa ganoong uri ng mga bagay-bagay.
04. Concat
Tulad ng ipinahihiwatig ng pangalan, ang plugin na ito ay tumatagal lamang ng maraming mga file at pinagsama ang mga ito sa isa. Tulad ng sa minifying code, ang pagsasama-sama ng mga file ay isa ring pinakamahusay na kasanayan sa edad para sa pagbawas ng mga oras ng pag-load ng pahina.
Ang konklusyon ng file ay dapat palaging ginagamit sa paggawa para sa parehong JavaScript at CSS. Ito ang karaniwang huling gawain na tatakbo - pagkatapos ng gawain ng paunang pagproseso ng CSS at gawain sa pag-minimize. Madaling sabihin lamang ang plugin na ito upang pagsamahin ang lahat ng mga file sa isang tukoy na direktoryo, ngunit mag-ingat sa pagkakasunud-sunod na ang mga file ay magkakasama - maaaring kailanganin mong magbigay ng isang tukoy na pagkakasunud-sunod o pangalanan ang mga file upang palaging sila ay concatenated sa order na gusto mo .
05. ImageMin
Sa parehong ugat ng CSSMin at Uglify, tinutugunan ng ImageMin ang isa pang matagal nang problema para sa pag-load ng pahina - laki ng file ng imahe. Ang 'minification' ng imahe ay karaniwang isang unang port-of-call para sa pag-optimize, kaya't ang plugin na ito ay mahalaga upang mabawasan ang kabuuang sukat ng file ng pahina hangga't maaari.
Kung nagtatrabaho ka sa JPG, PNG, GIF o SVG (isang patuloy na patok na tanyag na format ng imahe ng vector), magreresulta ang plugin na ito na magbigay ng walang kabawasang mga pagbawas sa laki ng file ng iyong mga imahe, nang hindi mo kinakailangang iangat ang isang daliri. Kung mayroon kang maraming mga imahe sa iyong proyekto magandang ideya na patakbuhin lamang ang gawaing ito kapag pinipilit mo ang paggawa, sa halip na patakbuhin ang gawaing ito sa isang kaganapan sa panonood (tingnan ang susunod na punto).
06. Panoorin
Ang plugin na ito ay hindi aktwal na nakakaapekto sa iyong website sa harap, ngunit ito ay lubos na kapaki-pakinabang sa paglikha ng isang mahusay na proseso ng Grunt. Ang panonood ay binabantayan lamang ang anumang mga direktoryo na tinukoy mo, at sa sandaling may magbago ay awtomatiko itong magpapalitaw ng ilang mga gawain sa Grunt.
Kaya maaari kang mag-set up ng isang kundisyon sa panonood sa iyong 'js' direktoryo upang patakbuhin ang iyong mga gawain sa JavaScript, at isa pa sa iyong direktoryo na 'css' upang patakbuhin ang iyong mga gawain sa CSS. Nangangahulugan ito na hindi mo na kailangang manu-manong patakbuhin ang iyong pangunahing proseso ng Grunt! Ipasimula lamang ang grunt na gawain sa relo bago ka magsimulang gumawa ng mga pagbabago at makakalimutan mong nandiyan pa ito.
Salita: Jamie Shields
Si Jamie Shields ay isang back end developer sa ahensya ng digital marketing na Stickyeyes.
Ganito? Basahin mo ito!
- Grunt vs Gulp: Aling tool sa pagbuo ng JavaScript ang dapat mong piliin?
- 8 mga paraan upang mapabuti ang iyong Grunt set-up
- Ang pinakamahusay na libreng mga tema ng WordPress
