Jums vajadzētu izmantot 6 būtiskus Grunt spraudņus

Autors: Lewis Jackson
Radīšanas Datums: 6 Maijs 2021
Atjaunināšanas Datums: 15 Maijs 2024
Anonim
The Great Gildersleeve: House Hunting / Leroy’s Job / Gildy Makes a Will
Video: The Great Gildersleeve: House Hunting / Leroy’s Job / Gildy Makes a Will

Saturs

Tādi JavaScript uzdevumu skrējēji kā Grunt ir ļoti populāri priekšējo izstrādātāju vidū. Tas ir tāpēc, ka viņi palīdz paveikt vienu lietu, ko mēs visi vēlamies darīt savā darbā - ietaupiet laiku!

Bet tagad, kad tagad ir pieejami vairāk nekā 5000 (un tiek skaitīti) Grunt spraudņi, izstrādātājiem var būt grūti atrast šos dimantus. Mēs esam atskatījušies uz mūsu laiku, kas iestrēdzis Grunt, lai atrastu perfektu Grunt spraudņu recepti, kas jums būtu jāizmanto.

01. Uglify

Katrs sava sāls vērts front-end izstrādātājs zina par JavaScript failu samazināšanas priekšrocībām, un tieši to dara šis spraudnis. Tāda ir tā popularitāte, tā faktiski ir iekļauta Grunt darba sākšanas rokasgrāmatā. Neskatoties uz nosaukumu, šo spraudni var izmantot arī jūsu JavaScript koda izrotāšanai, lai gan tas nav īpaši noderīgs ražošanas vajadzībām.


02. Sass

Var būt dažas debates par to, kurš CSS priekšapstrādātājs patiešām valda roost, taču šeit, Stickyeyes, mēs esam apmetušies uz Sass, nevis tā galveno konkurentu Less. Šis spraudnis ļauj mums rakstīt mūsu Sass failus un automātiski tos apkopot CSS. CSS priekšapstrādātāja izmantošanas pamatotība pati par sevi garantē atsevišķu rakstu, taču var droši teikt, ka, ja jūs to jau neizmantojat, esat ļoti nokavējis ballīti!

03. CSSMin

Šis spraudnis ir Uglify CSS ekvivalents. Tas vienkārši iegūst visus norādītos CSS failus un tos samazina. Protams, ja jūs to izmantojat kopā ar Sass spraudni, jums jānodrošina, lai šis uzdevums tiktu izpildīts pēc Sass uzdevuma.

CSSMin ir daudz alternatīvu, kas var arī samazināt jūsu CSS failu lielumu, izmantojot nedaudz atšķirīgas metodes; CSS nano, CSS izspiešana, CSS saraušanās utt. Izlasiet šo ērto etalonu, ja jums patīk šāda veida lietas.

04. Concat

Kā norāda nosaukums, šis spraudnis vienkārši uzņem vairākus failus un apvieno tos vienā. Tāpat kā koda samazināšanai, arī failu sasiešana ir sena paraugprakse lapu ielādes laika samazināšanai.


Failu salīmēšana vienmēr jāizmanto gan JavaScript, gan CSS ražošanā. Parasti tas ir pēdējais izpildāmais uzdevums - pēc CSS pirmapstrādes un sasmalcināšanas uzdevuma. Šim spraudnim ir vienkārši vienkārši pateikt, lai visi faili tiek savienoti noteiktā direktorijā, taču piesargieties no secības, kādā faili tiks sasieti - jums, iespējams, būs jāpiešķir noteikts pasūtījums vai jānosauc faili, lai tie vienmēr būtu sasieti vajadzīgajā secībā. .

05. ImageMin

Tāpat kā CSSMin un Uglify, ImageMin risina vēl vienu senu lapu ielādes problēmu - attēla faila lielumu. Attēla “samazināšana” parasti ir pirmais optimizācijas pieprasījums, tāpēc šis spraudnis ir būtisks, lai pēc iespējas samazinātu kopējo lapas faila lielumu.

Ja strādājat ar JPG, PNG, GIF vai SVG (arvien populārāks vektora attēlu formāts), šis spraudnis nodrošinās bezzudumu samazinājumu jūsu attēlu faila lielumā, jums nav jāpaceļ pirksts. Ja jūsu projektā ir daudz attēlu, ieteicams šo uzdevumu izpildīt tikai tad, kad virzāties uz ražošanu, nevis palaist šo uzdevumu skatīšanās pasākumā (skat. Nākamo punktu).


06. Skatīties

Šis spraudnis faktiski neietekmē jūsu vietnes front-end, taču tas ir ļoti noderīgs, lai izveidotu efektīvu Grunt procesu. Watch vienkārši seko līdzi jebkuriem norādītajiem direktorijiem, un, tiklīdz kaut kas mainīsies, tas automātiski aktivizēs noteiktus Grunt uzdevumus.

Tātad jūs varat iestatīt vienu skatīšanās nosacījumu direktorijā ‘js’, lai palaistu JavaScript uzdevumus, un citu direktoriju ’css’, lai palaistu CSS uzdevumus. Tas nozīmē, ka jums nekad nebūs manuāli jāpalaiž galvenais Grunt process! Pirms sākat veikt izmaiņas, vienkārši inicializējiet rūciena skatīšanās uzdevumu, un jūs varat aizmirst, ka tas ir pat tur.

Vārdi: Džeimijs Vairss

Džeimijs Šildss ir digitālā mārketinga aģentūras Stickyeyes aizmugures izstrādātājs.

Kā šis? Lasi šo!

  • Grunt vs Gulp: kuru JavaScript veidošanas rīku jums vajadzētu izvēlēties?
  • 8 veidi, kā uzlabot jūsu Grunt iestatījumus
  • Labākās bezmaksas WordPress tēmas
Populārs Portālā
Kā iestatīt katru dizaina projekta budžetu 4 soļos
Izlasīt

Kā iestatīt katru dizaina projekta budžetu 4 soļos

Ļoti vienkāršā līmenī budžet no aka, cik daudz jum jāiegulda projektā. Radošā vīzija kvalitātei vienmēr ir jādiktē kaitļi - ta ir ta , ko jū galu galā e at pārdevi klientam.Tomēr tabil budžet nodrošin...
Code Club dod bērniem iespēju izstrādāt dejojošu robotu
Izlasīt

Code Club dod bērniem iespēju izstrādāt dejojošu robotu

Jaunieši acenša , lai iegūtu klēpjdatoru , izveidojot Lielbritānija iecienītāko deju robotu. Tieš ai te konkur ā, kuru rīko Code Club, ka ir lieli ka iniciatīva, lai 9–11 gadu vecu bērnu ieintere ētu ...
Kā izmantot fotogrāfiju dizainā
Izlasīt

Kā izmantot fotogrāfiju dizainā

Fotogrāfija dizainā var būt daudz ietekmīgāka nekā grafika vai ilu trācija, jo tā paziņo ziņojumu ar reāli ma izjūtu un bieži vien arī veido vairāk kā vizuālu itienu. Tomēr, kad jū u dizainā ir fotogr...