Sådan minimeres din CSS med gulp

I denne artikel skal jeg vise en enkel måde til automatisk at minificere dine CSS-filer ved hjælp af gulp. ?

For at starte - hvad er gulp?

Gulp er en JavaScript task runner, der giver dig mulighed for at automatisere opgaver såsom ...

  • Bundling og minificering af biblioteker og typografiark.
  • Opdatering af din browser, når du gemmer en fil.
  • Hurtigt kørende enhedstest.
  • Kører kodeanalyse.
  • Mindre / Sass til CSS kompilering.
  • Og meget mere!

Gulp-arbejdsgangen fungerer som følger:

Vi kan oprette opgaver, som vi gerne vil udføre. I disse opgaver indlæser vi filer, som vi vil have gulp til at arbejde med (ændring eller ej), og derefter returnerer vi dem til en returmappe.

Det er simpelt.

I denne lille tutorial lærer jeg dig, hvordan du opretter en opgave til at minificere alle CSS-filer i din mappe. Sæt derefter de minificerede i en anden mappe.

Lad os begynde

Til denne vejledning skal du sørge for at have den nyeste version af npm-pakken installeret på din maskine. Hvis du ikke har det, kan du downloade det her .

Når du har npm installeret, i basismappen til dit projekt installerer vi gulp ved hjælp af disse kommandoer:

npm install gulp-cli -g

npm install gulp -D

Vi bruger også et gulp-plugin til at minimere CSS kaldet gulp-clean-css , så installer det i projekttypen:

npm install gulp-clean-css --save-dev

Meget god, lad os nu oprette en fil kaldet Gulpfile.js med de afhængigheder, der er installeret i projektet . Denne fil er ansvarlig for vores opgaver.

Vi opretter også to mapper i dette arkiv. Den ene vil blive kaldt stilarter, hvor vores stilfiler forbliver, og en anden kaldes dist, hvor de minificerede filer vil gå.

I sidste ende vil vores projekt have denne struktur:

I Gulpfile.js

I begyndelsen af ​​filen foretager vi opkald fra de pakker, vi vil bruge.

Med de kaldte pakker opretter vi den ansvarlige opgave ved at minificere vores filer.

Du undrer dig måske - du er allerede i stand til at formindske dine filer? Ja, ved at udføre gulp-kommandoen i terminalen efterfulgt af opgavens navn.

Men at køre denne kommando hele tiden er lidt irriterende, er det ikke? Vi kan oprette en metode til at observere ændringer af filer i stilartsmappen.

På denne måde vil kørsel af gulp-kommandoen vente på ændringer i de valgte filer for at aktivere minify-css-opgaven.

Konklusion

Dette er kun en lille måde, som gulp kan hjælpe os med i udviklingen af ​​vores applikationer.

Du kan finde koden til dette projekt i dette arkiv på GitHub.

Tak fordi du læste, er du velkommen til? og hjælpe andre med at finde det.

Vi ses snart. ?

Referencer

gulp.js

Ved at foretrække kode frem for konfiguration, node-praksis og en minimal API-overflade - gulp gør tingene enkle som ... gulpjs.com gulp-clean-css

Minimer css med clean-css. www.npmjs.com