Gutljaj opisa na ruskom. Instaliranje i korištenje Gulpa

Instalacija Gulpa je prilično jednostavna. Prvo, globalno instalirajte Gulp paket:

Npm install -g gutljaj

Zatim ga instalirajte u svoj projekat:

Npm install --save-dev gulp

Koristeći Gulp

Kreirajmo Gulp zadatak da minimiziramo jednu od naših JavaScript datoteka. Kreirajte datoteku pod nazivom gulpfile.js. Definirat će vaše zadatke, koji se pokreću naredbom gulp.

Dodajte sljedeće naredbe u vaš gulpfile.js fajl:

Var gulp = zahtijevati ("gulp"), uglify = zahtijevati ("gulp-uglify"); gulp.task ("minify", funkcija () (gulp.src ("js / app.js") .pipe (uglify ()) .pipe (gulp.dest ("build"))));

Instalirajte gulp-uglify putem npm-a pokretanjem npm install --save-dev gulp-uglify a zatim pokrenite zadatak kroz gulp minify. Pretpostavimo da imate datoteku pod nazivom app.js u fascikli js, novi app.js će biti kreiran u fascikli za izgradnju i sadržaće komprimovanu verziju js / app.js.

Šta se stvarno dešava ovde?

Radimo nekoliko stvari u našem gulpfile.js. Prvo učitavamo module gulp i gulp-uglify:

Var gulp = zahtijevati ("gulp"), uglify = zahtijevati ("gulp-uglify");

Zatim definiramo zadatak nazvan minify koji, kada se pokrene, poziva funkciju datu kao drugi argument:

Gulp.task ("minify", funkcija () ());

Na kraju, a ovo je najteži dio, definiramo šta naš zadatak treba da uradi:

Gulp.src ("js / app.js") .pipe (uglify ()) .pipe (gulp.dest ("build"))

Ako niste upoznati s nitima, a većina front-end programera nije upoznata s njima, onda vam gornji kod neće ništa reći.

Streams

Tokovi dopuštaju da neki podaci teku kroz niz obično malih funkcija koje modificiraju podatke i zatim ih prosljeđuju sljedećoj funkciji.

U gornjem primjeru, funkcija gulp.src () uzima niz koji odgovara datoteci ili skupu datoteka i kreira tok objekata koji predstavljaju te datoteke. Zatim prelaze (ili se prelivaju) u funkciju uglify (), koja uzima objekte datoteke i vraća nove objekte datoteke sa minimiziranim izvorom. Ovaj rezultat zatim ulazi u funkciju gulp.dest (), koja sprema izmijenjene datoteke.

Evo šta se dešava u obliku dijagrama:

Kada postoji samo jedan zadatak, funkcija ne radi ništa. Međutim, uzmite u obzir sljedeći kod:

Gulp.task ("js", funkcija () (povratak gulp.src ("js / *. Js") .pipe (jshint ()) .pipe (jshint.reporter ("default")) .pipe (uglify () ) .pipe (concat ("app.js")) .pipe (gulp.dest ("build"));));

Da biste ovo sami pokrenuli, instalirajte gulp, gulp-jshint, gulp-uglify i gulp-concat.

Ovaj zadatak uzima sve datoteke koje odgovaraju js / *. Js (drugim riječima, sve JavaScript datoteke iz fascikle js), pokreće JSHint za njih, ispisuje izveštaj, minimizira svaku datoteku, a zatim ih spaja, čuvajući ih u build / app.js. Kao dijagram:

Ako ste upoznati sa Gruntom, primijetit ćete da se ovo prilično razlikuje od načina na koji Grunt radi. Grunt ne koristi streamove. Umjesto toga, uzima datoteke, pokreće jedan zadatak za svaku datoteku i sprema u nove datoteke, ponavljajući cijeli proces za svaki zadatak. Kao rezultat mnogih poziva sistema datoteka, Grunt je sporiji od Gulpa.

Za bolje razumijevanje streamova, pročitajte Priručnik za tok.

gulp.src ()

Funkcija gulp.src () uzima jednu ili više datoteka ili niz i vraća stream koji se može proslijediti dodacima.

Druga dva dodatka su jasnija: funkcija uglify () minimizira kod, a funkcija concat ("app.js") spaja sve datoteke u jedan pod nazivom app.js.

gulp-load-plugin

Modul koji smatram vrlo korisnim zove se gulp-load-plugins, on automatski učitava sve Gulp dodatke iz datoteke package.json i prilaže ih objektu. Glavne aplikacije su sljedeće:

Var gulpLoadPlugins = require ("gulp-load-plugins"), plugins = gulpLoadPlugins ();

Možete napisati sve na jednom redu ( var plugins = require ("gulp-load-plugins") ();), ali nisam veliki obožavatelj poziva sa jednom linijom.

Nakon pokretanja ovog koda, plugins objekat će sadržavati vaše dodatke s imenima u stilu CamelCase (na primjer, gulp-ruby-sass će se učitati kao plugins.rubySass). Možete ih koristiti na uobičajen način. Na primjer, naš js zadatak će se smanjiti ovako:

Var gulp = zahtijevaju ("gulp"), gulpLoadPlugins = zahtijevaju ("gulp-load-plugins"), plugins = gulpLoadPlugins (); gulp.task ("js", funkcija () (povratak gulp.src ("js / *. js") .pipe (plugins.jshint ()) .pipe (plugins.jshint.reporter ("default")) .pipe (plugins.uglify ()) .pipe (plugins.concat ("app.js")) .pipe (gulp.dest ("build"));));

Ovome je priložena datoteka package.json koja sadrži nešto slično:

("devDependencies": ("gulp-concat": "~ 2.2.0", "gulp-uglify": "~ 0.2.1", "gulp-jshint": "~ 1.5.1", "gulp": " ~ 3.5.6 "))

Ovaj primjer zapravo nije mnogo kraći. Međutim, za velike i složene Gulp datoteke, ovo će smanjiti blok za učitavanje datoteka na jedan ili dva reda.

Verzija 0.4.0 gulp-load-plugina objavljena početkom marta dodala je lijeno učitavanje dodatka što poboljšava performanse. Dodaci se neće učitati dok ih ne pozovemo, što znači da ne morate da brinete o tome da li će nekorišćeni dodaci u package.json uticati na performanse (iako bi ih verovatno trebalo ukloniti u svakom slučaju). Drugim riječima, ako pokrenete zadatak koji zahtijeva samo dva dodatka, neće učitati sve dodatke koji su potrebni za druge zadatke.

Praćenje fajlova

Gulp ima mogućnost da prati promjene u fajlu i izvrši zadatak ili zadatke kada se otkriju promjene. Ova funkcija je iznenađujuće korisna (vjerovatno jedna od najkorisnijih u Gulpu za mene). Možete sačuvati Less datoteku i Gulp će je pretvoriti u CSS i osvježiti pretraživač bez ikakve akcije s vaše strane.

Za gledanje datoteke ili datoteka koristite funkciju gulp.watch (), koja uzima uzorak datoteka ili niz (kao što je gulp.src ()), ili niz zadataka za pokretanje ili izvršavanje funkcije povratnog poziva.

Pretpostavimo da imamo zadatak izgradnje koji konvertuje naše datoteke šablona u HTML i želimo da definišemo zadatak praćenja koji prati promene šablona i pokreće zadatak da ih konvertuje u HTML. Funkciju sata možemo koristiti ovako:

Gulp.task ("watch", funkcija () (gulp.watch ("templates / *. Tmpl.html", ["build"]);));

Sada, kada se datoteka predloška promijeni, pokrenut će se zadatak izgradnje, koji će generirati HTML.

Također možete odrediti funkciju povratnog poziva za gledanje umjesto niza zadataka. U ovom slučaju, funkcija prima objekt događaja koji sadrži informacije o događaju koji je pozvao funkciju:

Gulp.watch ("templates / *. Tmpl.html", funkcija (event) (console.log ("Event type:" + event.type); // dodan, promijenjen ili uklonjen console.log ("Event path:" + event.path); // put do datoteke));

Još jedna sjajna karakteristika gulp.watch () je da vraća posmatrača. Koristite ga za slušanje dodatnih događaja ili za dodavanje fajlova za gledanje. Na primjer, da biste pokrenuli listu zadataka i pozvali funkciju u isto vrijeme, možete dodati slušatelja u događaj promjene kada se posmatrač vrati:

Var watcher = gulp.watch ("templates / *. Tmpl.html", ["build"]); watcher.on ("promjena", funkcija (događaj) (console.log ("Tip događaja:" + event.type); // dodan, promijenjen ili uklonjen console.log ("Putanja događaja:" + event.path); // put do datoteke ));

Osim događaja promjene, možete slušati i niz drugih događaja:

kraj
Pokreće se kada promatrač završi (što znači da se zadaci i povratni pozivi više neće pozivati kada se datoteke promijene).
greška
Pali se kada dođe do greške.
spreman
Pokreće se kada su fajlovi pronađeni i spremni za praćenje.
nomatch
Aktivira se kada nijedan fajl ne odgovara zahtjevu.

Objekt promatrača također sadrži neke metode koje se mogu pozvati:

watcher.end ()
Zaustavlja promatrača (ovo sprječava da se zadaci ili povratni pozivi više pozivaju).
watcher.files ()
Vraća listu fajlova koje posmatra posmatrač.
watcher.add (global)
Dodaje datoteke promatraču koje odgovaraju navedenom glob uzorku (također prihvaća opcionalnu funkciju povratnog poziva kao drugi argument).
watcher.remove (datoteka)
Uklanja određenu datoteku iz promatrača.

Zdravo svima. Ako se na bilo koji način bavite JS-om, vjerovatno ste čuli za aplikaciju kao što je gulp. Ili su ga možda čak koristili. Iz vlastitog iskustva mogu reći da može biti teško "ući" kako se s tim radi, iako ključ za razumijevanje leži na površini. Stoga objavljujem ovaj materijal u nadi da će biti od koristi.

Takođe, na osnovu ovog materijala snimljen je i video, tako da možete birati u kom obliku ćete konzumirati.

Ako uporedite gulp sa drugim popularnim sistemima za izradu, onda je to kao da poredite gotov kvadrokopter za kupovinu i letenje i set za samostalno sastavljanje dron. Da, poletjet ćete tek sljedeći dan, ali vaše ruke imaju više fleksibilnosti i kontrole, pogotovo ako imate nestandardni zadatak.

Zapravo, nakon prelaska ulaznog praga, gulp ne izgleda tako komplikovano, au nekim trenucima je čak i jasan i logičan. Ali, bez odgovarajuće pripreme, može biti teško doći u ovo stanje. Zaronimo u to i vidimo na kojim principima je izgrađen gulp.

Idemo izdaleka. U nodejs ekosistemu postoji nešto kao streamovi ili stream. Zbog složenosti prevođenja, niti se nazivaju i nitima višenitnog programa. U našem slučaju, stream je objekt koji predstavlja streaming podataka, i potpuno je drugačiji koncept.

Dakle, ovi tokovi nude korisničko sučelje za asinhroni rad sa podacima. Cijelim procesom čitanja/pisanja upravlja motor čvora, a mi imamo samo odgovarajuće povratne pozive kada se pojavi novi dio podataka, kada dođe do greške, kada se stream završi itd. Dakle, I/O efikasnost se postiže uz minimalne troškove za programera.

Const fs = zahtijevaju ("fs"); const input = fs.createReadStream ("myfile"); input.on ("podaci", (komad) => (console.log (komad);)); input.on ("kraj", () => (console.log ("datoteka je pročitana");));
Tokovi u nodejs-u mogu biti gotovo sve, od datoteka ili stringova do utičnica. Na primjer, u poznatom Express okviru, HTTP zahtjev a odgovor je ništa više od potoka. Tokovi mogu biti samo za čitanje, samo za pisanje ili oboje.

Potoci imaju jednu korisna funkcija: mogu se sabrati u lanac koji se zove lula. Tako možemo kombinovati nekoliko tokova jedni s drugima i upravljati njima kao jednom cjelinom. Izlaz jednog toka ide na ulaz sljedećeg i tako do kraja. Kao što možete pretpostaviti iz prijevoda riječi cijevi, to uvelike liči na cjevovod.

Ovo vam omogućava da odredite potreban protok podataka (opet, složenost prijevoda. Ovdje mislimo na tok, ili tok) upravo ovdje i sada bez čekanja da podaci postanu dostupni.

Na primjer, ovako možemo odrediti šta želimo dati kao rezultat, a sam motor se već bavi time „kako“ dati.

Const fs = zahtijevaju ("fs"); const express = zahtijevati ("izraziti"); var app = express (); app.get ("/", funkcija (req, res) (fs.createReadStream ("myfile") .pipe (res);)); app.listen (3000);
Imajte na umu da se rukovalac zahtjeva dovršava prije nego što se datoteka uopće otvori - nod engine preuzima ostalo.

Gulp je izgrađen na sličnom pristupu. To je njegova prednost, ali je i nedostatak. Nedostatak se barem može nazvati zbog nastale konfuzije, budući da gulp koristi druge, slične, ali nekompatibilne tokove. Gulp tesno radi sa sistem podataka, zbog čega koristi tokove koji predstavljaju ne toliko tok podataka koliko odvojene virtuelne datoteke, svaki sa svojim sadržajem.

Ako ste ikada čuli za vinil, ovo je implementacija streama koju gulp koristi. Ako standardni zadatak uzmemo za gap, i vidimo šta je unutra, otkrit ćemo da nam za svaki poziv data događaja dolazi fajl objekat koji sadrži sve potrebne informacije: naziv datoteke, putanju do datoteke, radni direktorij i, naravno, njegov sadržaj.

Const gulp = zahtijeva ("gulp"); gulp.task ("podrazumevano", funkcija () (gulp.src ("./*. js") .on ("podaci", funkcija (datoteka) (console.log ("povratni poziv podataka"); console.log ( file.inspect ()); / * Izlazi: * povratni poziv podataka * > * povratni poziv podataka * > * /)) .pipe (gulp.dest ("dist /")); ));
Sadržaj se može predstaviti u dva formata: u obliku već pročitanog bafera ili u obliku izvornog toka čvora. Svaka faza Galp cijevi uzima takve datoteke kao ulaz, vrši određenu transformaciju i prenosi je na izlaz u sljedeći lanac. Posljednji lanac ih obično samo sprema na disk.

Pipe (gulp.dest ("dist /"));
Svijest o tome da su tokovi u gutljaju različiti vodi do prosvjetljenja i razumijevanja, jer to objašnjava većinu problema i grešaka.

Razmislite pravi primjer... Želite da koristite browserify da zalijepite svoje JS datoteke zajedno. Odete i pronađete dodatak gulp-browserify. Ali vidite postscript koji kaže da je dodatak zastario, tj. Zastarjelo.

Kao dobro vaspitan programer, odbacujete ovu opciju i tražite rešenje koje nije zastarelo. Pronađite zvanične recepte za gutljaj i vidjet ćete da browserify radi direktno s gulp-om. Pa, kako direktno, kroz sloj, koji samo prevodi izvorni Nod stream u vinil stream, koji gulp razumije. Bez toga ništa ne bi funkcionisalo, jer su to različite teme.

Ako želite da napišete svoju transformaciju, možete koristiti ovaj šablon.
Kao što vidite, ovdje je sve jednostavno: za svaki fajl će biti pozvan naš rukovalac, koji će izvršiti izmjene. Možemo učiniti šta god želimo: promijeniti sadržaj datoteke, preimenovati datoteku, izbrisati datoteku ili dodati još nekoliko novih datoteka u tok.

Kao što se sjećamo, sadržaj datoteke u vinil streamu može biti predstavljen kao bafer ili kao tok podataka. Međutim, nije potrebno podržavati oba. Uvijek možete koristiti paket

Zdravo svima! U ovom članku ćemo kreirati naš projekat, inicijalizirati datoteku manifesta i instalirati Gulp lokalno.

Prvo, treba reći da put do foldera (uključujući korisničko ime računara) mora biti uključen engleski jezik inače možete dobiti greške prilikom korištenja Gulp... Napravio sam folder Projekti, u kojem ću kreirati sve svoje projekte. Na primjer, dat ću naziv našem projektu firstProject.

Dakle, u posljednjem članku koji smo instalirali Gulp globalno, sada ga moramo lokalno instalirati. Prije svega, izvršit ćemo inicijalizaciju. Napišite sljedeću naredbu u terminalu:

Cd path_to_your_project (cd "korisnik / projekti / prvi projekat")
npm init

Zahvaljujući ovoj komandi, kreiraćemo osnovnu datoteku manifesta za naš projekat. U principu, tu je sve jasno, pa neću objašnjavati. Ako ne želite da se zamarate sa svim ovim postavkama, samo pritisnite cijelo vrijeme enter pošto trebat će nam ovaj fajl za drugi, početne postavke nisu toliko bitne.

Ako ste sve uradili ispravno, tada bi se datoteka trebala pojaviti u fascikli vašeg projekta package.json... Ako ga otvorite, vidjet ćete da su tu pohranjene sve informacije koje ste unijeli (ili niste unijeli) tokom inicijalizacije. Osim toga, datoteka pohranjuje informacije o korištenim paketima i to je upravo ono što nam treba. Ako stalno koristite, na primjer, biblioteku JQuery, onda ga možete zapisati u ovu datoteku i automatski će se preuzeti kada pokrenete novi projekat.

Sada instalirajmo Gulp lokalno u našu mapu.

Npm i gulp --save-dev

Zastava --save-dev potrebno za paket Gulp i njegova verzija je automatski zapisana u datoteku package.json... Ako otvorite ovu datoteku nakon uspješne instalacije paketa, vidjet ćete da se tamo pojavljuje sljedeće:

"devDependencies": (
"gulp": "^ 3.9.1"
}

Mislim da je jasno da je ovdje napisano ime paketa i njegova verzija. Strelica gore označava da se ovaj paket može ažurirati. Imamo i folder node_modules gdje se sada čuva Gulp i sve njegove zavisnosti. Ovdje će se instalirati novi moduli.

To je sve za danas. Razmotrili smo kako instalirati gulp lokalno u fasciklu projekta i zašto vam je potreban manifest package.json.

Da bismo ubrzali proces front-end razvoja, automatiziramo neke zadatke koristeći Gulp builder.
Za ovo nam je potreban NPM menadžer paketa. Ali da biste instalirali NPM, prvo morate instalirati Node.js.

Korak 1. Instaliranje Node
Idite na službenu web stranicu https://nodejs.org i preuzmite preporučenu verziju.

Pokrenite instalater sa administratorskim pravima.
Nakon instalacije, pojavit će se 2 ikone: Node.js i Node.js coomand prompt. Neće nam biti od koristi, jer ne koristimo Node.js, a postoje pogodnije opcije za pokretanje konzole:
1. Koristite komandnu konzolu TotalCommander (Komande - Otvorite komandnu konzolu).
2. Držite Shift i kliknite desnim tasterom miša da otvorite kontekstni meni... U njemu će se pojaviti stavka "Otvori komandni prozor".
Bolje je pokrenuti komandnu liniju dok u direktoriju projekta koji vam je potreban, konzola će odmah prikazati putanju do potrebnog direktorija, to će eliminirati potrebu za ručnim unosom putanje.

Da biste provjerili verzije čvora i npm, upišite u komandnu liniju
čvor -v i pritisnite Enter
zatim npm -v

NPM verzije se obično ažuriraju češće od verzija čvorova kako bi se dobila najnovija verzija:
npm install [email protected]-g

Npm komande koje su nam potrebne :
npm lista- spisak svih instalirane pakete
npm -g ls --dubina = 0- lista globalno instaliranih paketa
npm zastario provjerite da li su paketi zastarjeli
npm update gulp- ažuriranje verzija dodataka
npm init- kreirajte package.json
npm install ime_paketa- instalirajte paket (package_name je naziv potrebnog paketa)
npm install ime_paketa --save-dev- instalirajte paket i napišite o njemu u package.json u odjeljku devDependencies
npm deinstalirati naziv_paketa- uklanjanje paketa
npm install- instalirajte sve pakete navedene u package.json
Prije puštanja u proizvodnju npm shrinkwrap- popravite verzije paketa, sada će npm install instalirati upravo njih i bit ćete sigurni da će sve raditi kako treba

Skraćenice
-v: --verzija
-g: --globalno
-S: --sačuvaj
-D: --save-dev
-y: --da
-n: --da lažno

Korak 2. Instaliranje gulp-a
Prvo, gulp mora biti instaliran globalno.

Pokrećemo komandnu konzolu.
Ponekad se na nekim resursima nalazi znak dolara ispred komande, na primjer
$ npm install --global gulp-cli

Nemojte kopirati znak dolara, zalijepite samo samu naredbu
npm install --global gulp-cli

Prompt: da zalijepite kopirani tekst komandna linija, otvorite komandnu liniju, pritisnite ALT + RAZMAK -> Podrazumevane vrednosti, potvrdite izbor u polju za potvrdu Odaberi mišem. Sada možete odabrati tekst mišem, kopirati, u com. desnim klikom na liniju - tekst će se automatski umetnuti.

Korak 3. Rad sa gulp-om u određenom projektu

3.1 Prvo, kreirajmo paket zavisnosti package.json
Datoteka package.json sadrži informacije koje ćemo unijeti u terminal i listu svih paketa koje koristimo u projektu.

Kada instalirate paket sa --save-dev prekidačem, paket se automatski dodaje u package.json. Kako ne bismo ručno instalirali sve pakete u svaki novi projekat, koristićemo gotovi package.json sa potrebnim modulima i zavisnostima, stavljajući ga u koren našeg projekta.

package.json se generiše pomoću naredbe npm init, koja će ispisati nekoliko pitanja na konzoli za kreiranje datoteke.
U klauzuli imena, prema zadanim postavkama, prikazuje se ime vašeg projektnog direktorija.

Prompt:
Ovu datoteku možete generirati brže i lakše koristeći --yes opciju (automatski da na sva pitanja):
npm init --da

Dobro je znati:
Možete postaviti zadane vrijednosti koje će se koristiti svaki put kada pokrenete npm init, što će vam uštedjeti vrijeme. Nakon instalacije, oni se spremaju u .npmrc datoteke.
Na primjer:
npm config set init.author.name "Valentina Vladova"
npm config set init.author.email " [email protected]"
npm config set init.author.url "http://simpalmarket.com/"
npm set init-license MIT
npm set init-version 0.0.0
Zatim pokrenite npm init, sve navedene vrijednosti će biti povučene u odgovarajuće varijable.

Kada npm init pita za git spremište, napišite kratko user / repo - npm je dovoljno pametan da proširi liniju na https://github.com/user/repo. npm će takođe generisati spremište, greške i polja početne stranice u ispravnom formatu.

Dakle, idite u korijenski folder projekta, pozovite komandnu konzolu i ukucajte
npm init --da

Json fajl sa nečim ovakvim će se pojaviti u korenu projekta

3.2 Instalirajte gulp lokalno
U fasciklu projekta na konzoli unesite:
npm install --save-dev gulp

ili skraćeno
npm i gulp --save-dev

Lista će uključivati Upozori - zanemari.

Da biste provjerili verziju, koristite naredbu
gulp --verzija

Node_modules folder se pojavio u korijenskom direktoriju projekta. Svi moduli i zavisnosti koje ćemo instalirati u projekat biće automatski učitani u njega. Može postojati mnogo foldera sa zavisnostima, čak i ako nema toliko instaliranih paketa. To je zbog činjenice da su pored glavnih paketa instalirani i programi koji su neophodni za ispravan rad glavnog paketa. Ne morate ništa da čistite i brišete iz fascikle node_modules.

Json fajl će dodati unos
"devDependencies": (
"gulp": "^ 3.9.1"
}

Sada možete instalirati razne dodatke za gulp.
http://gulpjs.com/plugins/
U polje za pretragu unesite naziv dodatka koji vas zanima.

Dodaci se mogu instalirati jedan po jedan, na primjer:
npm install --save-dev gulp-plumber
i lista odvojena razmakom, na primjer:
npm install gulp-sass gulp-vodoinstalater gulp-autoprefixer gulp-minify-css --save-dev
Instalirajte dodatke i dodatke za izgradnju najbolje je instalirati pomoću zasebnih naredbi.

Npm init

trebat će vam:

Odredite naziv projekta
Verzija projekta
Opis projekta
Ulazna tačka
Tim
Git spremište
Ključne riječi
Ime autora
Licenca

Npm i –g gutljaj

Naziv zadatka

Gulp test

Zadatak radi.

Gulp service

Npm i gulp-sass --save-dev

Prevođenje sass u css
Dodavanje prefiksa
Čuvanje datoteke u src / css

Kreiranje zadatka u gutljaju

Izlaz.

https://gulpjs.com/plugins/

Otvorite terminal i idite u fasciklu projekta. Prva stvar koju treba da uradimo je da inicijalizujemo npm za ovo pokrećemo naredbu:

Npm init

trebat će vam:

Odredite naziv projekta
Verzija projekta
Opis projekta
Ulazna tačka
Tim
Git spremište
Ključne riječi
Ime autora
Licenca

Sve se može ostaviti po defaultu (ako ne želite da otpremite projekat na opšti pristup)

Zatim potvrđujemo unesene podatke.

U redu. NPM je inicijaliziran. Fajl packages.json se sada pojavljuje u korenu - konfiguracionoj datoteci menadžera paketa.

Sada možemo instalirati gulp. Prvo ga morate instalirati globalno, a zatim za projekat. Za globalnu instalaciju pokrenite sljedeću naredbu:

Npm i –g gutljaj

Sada instalirajmo gulp za projekat:

Npm install --save-dev gulp

Sav gulp za projekat je instaliran.

Hajde da proverimo. Kreirajmo gulpfile.js datoteku i napravimo jedan testni zadatak u njemu, koji će na konzoli prikazati "Radim".

Var gulp = zahtijeva ("gulp"); gulp.task ("test", funkcija () (console.log ("Radim");));

Prvo, uključujemo gulp, a drugo, pozivamo gulp funkciju zadataka, koja uzima dva parametra:

Naziv zadatka
Anonimna funkcija koji opisuje naš zadatak

Sada u konzoli pokrenite sljedeću naredbu

Gulp test

Zadatak radi.

Sada instalirajmo i omogućimo pakete koji pomažu u rasporedu.

Browsersync, paket koji vam omogućava da automatski osvježite stranicu kada se datoteke promijene

Da instalirate u konzolu, pokrenite sljedeću naredbu:

Npm i browser-sync --save-dev

Sada kreirajmo zadatak koji će pokrenuti sinhronizaciju pretraživača i pratiti promjene datoteka.

Gulp.task ("serve", ["sass"], funkcija () (browserSync.init ((server: "src /")); gulp.watch ("src / css / *. Css") na ("promjena ", browserSync.reload); gulp.watch (" src / *. html "). on (" promjena ", browserSync.reload);));

Zadatak se zove poslužiti. A browser-sync će automatski osvježiti stranicu pretraživača ako su se datoteke sa ekstenzijom css (koje se nalaze u src / css folderu) i sa html ekstenzijom (koje se nalaze u src folderu) promijenjene.

Da biste pokrenuli ovaj zadatak, pokrenite naredbu

Gulp service

Koristim sass za raspored. Stoga koristim gulp-sass paket za kompajliranje sa sass u css.

Instalacija i konfiguracija gulp-sass

Da instalirate gulp-sass u konzolu, pokrenite naredbu:

Npm i gulp-sass --save-dev

Sada kreirajmo sass zadatak koji će kompajlirati sass u css. I promijenimo zadatak posluživanja tako da naš pretraživač-sinhronizacija prati umjesto css fajl sass.

Var gulp = zahtijeva ("gulp"); var browserSync = zahtijevaju ("browser-sync"). create (); var sass = zahtijevaju ("gulp-sass"); gulp.task ("serve", ["sass"], funkcija () (browserSync.init ((server: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("promjena", browserSync.reload);)); gulp.task ("sass", funkcija () (povratak gulp.src ("src / sass / *. sass") .pipe (sass (). on ("error", sass.logError)) .pipe (gulp. dest ("src / css")) .pipe (browserSync.stream ());));

Sada kada pokrenete zadatak posluživanja, pokrenut će se i sass zadatak.

Instalacija i konfiguracija gulp-autoprefixera

Da instalirate gulp-autoprefixer, pokrenite naredbu:

Npm i gulp-autoprefixer --save-dev

I dodajte prefiks zadatku sass.

Var gulp = zahtijeva ("gulp"); var browserSync = zahtijevaju ("browser-sync"). create (); var sass = zahtijevaju ("gulp-sass"); var autoprefixer = zahtijevaju ("gulp-autoprefixer"); gulp.task ("serve", ["sass"], funkcija () (browserSync.init ((server: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("promjena", browserSync.reload);)); gulp.task ("sass", funkcija () (povratak gulp.src ("src / sass / *. sass") .pipe (sass (). on ("error", sass.logError)) .pipe (autoprefikser ( (pretraživači: ["zadnje 2 verzije"], kaskada: false))) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream ());));

Sada, kada pokrenete sass zadatak, c će imati:

Prevođenje sass u css
Dodavanje prefiksa
Čuvanje datoteke u src / css

Sljedeći paket kombinuje sve css datoteke u jedan.

Instalacija i konfiguracija contactCss

Da instalirate contactCss, koristite sljedeću naredbu:

Npm i gulp-concat-css --save-dev

I dodajte izvršenje ovog paketa u sass zadatak. (Mi ćemo kombinovati sve css fajlove u style.css)

Var gulp = zahtijeva ("gulp"); var browserSync = zahtijevaju ("browser-sync"). create (); var sass = zahtijevaju ("gulp-sass"); var autoprefixer = zahtijevaju ("gulp-autoprefixer"); var concatCss = zahtijevati ("gulp-concat-css"); gulp.task ("serve", ["sass"], funkcija () (browserSync.init ((server: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("promjena", browserSync.reload);)); gulp.task ("sass", funkcija () (povratak gulp.src ("src / sass / *. sass") .pipe (sass (). on ("error", sass.logError)) .pipe (autoprefikser ( (pretraživači: ["zadnje 2 verzije"], kaskada: false))) .pipe (concatCss ("style.css")) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream ( ));));

U redu. Sada dodajmo paket koji preimenuje datoteke. (Trebat će nam kada minimiziramo css i js fajlove)

Instalacija i konfiguracija gulp-rename

Da instalirate gulp-rename, pokrenite sljedeću naredbu:

Npm i gulp-rename --save-dev

Za sada, nećemo dodavati ovaj paket nijednom zadatku.

Instalacija i konfiguracija paketa za minimiziranje CSS datoteka - clean-css

Da instalirate clean-css, pokrenite sljedeću naredbu:

Npm i gulp-clean-css --save-dev

Sada kreirajmo mincss zadatak koji će dodati sufiks ".min" imenu datoteke, minimizirati css datoteku i spremiti je u app / css

Var gulp = zahtijeva ("gulp"); var browserSync = zahtijevaju ("browser-sync"). create (); var sass = zahtijevaju ("gulp-sass"); var autoprefixer = zahtijevaju ("gulp-autoprefixer"); var concatCss = zahtijevati ("gulp-concat-css"); var cleanCSS = zahtijevaju ("gulp-clean-css"); var rename = zahtijevaju ("gulp-rename"); gulp.task ("serve", ["sass"], funkcija () (browserSync.init ((server: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("promjena", browserSync.reload);)); gulp.task ("sass", funkcija () (povratak gulp.src ("src / sass / *. sass") .pipe (sass (). on ("error", sass.logError)) .pipe (autoprefikser ( (pretraživači: ["zadnje 2 verzije"], kaskada: false))) .pipe (concatCss ("style.css")) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream ( ));)); gulp.task ("mincss", funkcija () (povratak gulp.src ("src / css / *. css") .pipe (preimenuj ((sufiks: ".min"))) .pipe (cleanCSS ()). pipe (gulp.dest ("app / css"));))

Odlično, hajde da instaliramo gulp paket koji će minimizirati js fajlove.

Instaliranje i konfiguriranje gulp paketa za minimiziranje js datoteka —gulp-uglify

Da instalirate gulp-uglify, pokrenite sljedeću naredbu:

Npm i gulp-uglify --save-dev

Sada kreirajmo zadatak koji će dodati sufiks ".min" u datoteku, minimizirati js datoteku i spremiti je u app / js

Var gulp = zahtijeva ("gulp"); var browserSync = zahtijevaju ("browser-sync"). create (); var sass = zahtijevaju ("gulp-sass"); var autoprefixer = zahtijevaju ("gulp-autoprefixer"); var concatCss = zahtijevati ("gulp-concat-css"); var cleanCSS = zahtijevaju ("gulp-clean-css"); var rename = zahtijevaju ("gulp-rename"); var uglify = zahtijevati ("gulp-uglify"); gulp.task ("serve", ["sass"], funkcija () (browserSync.init ((server: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("promjena", browserSync.reload);)); gulp.task ("sass", funkcija () (povratak gulp.src ("src / sass / *. sass") .pipe (sass (). on ("error", sass.logError)) .pipe (autoprefikser ( (pretraživači: ["zadnje 2 verzije"], kaskada: false))) .pipe (concatCss ("style.css")) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream ( ));)); gulp.task ("mincss", funkcija () (povratak gulp.src ("src / css / *. css") .pipe (preimenuj ((sufiks: ".min"))) .pipe (cleanCSS ()). pipe (gulp.dest ("app / css"));)) gulp.task ("minjs", funkcija () (povratak gulp.src ("src / js / *. js") .pipe (preimenuj ((sufiks : ".min"))) .pipe (uglify ()) .pipe (gulp.dest ("app / js"));))

Kreirali smo osnovne zadatke. Ali posljednja dva moraju biti urađena prilikom puštanja projekta u proizvodnju. I moraju se izvoditi zajedno. Kreirajmo zadatak koji će izvršiti mincss zadatak, a zatim minjs

Kreiranje zadatka u gutljaju

Kreirajmo min zadatak koji će pokretati mincss i minjs zadatke

Var gulp = zahtijeva ("gulp"); var browserSync = zahtijevaju ("browser-sync"). create (); var sass = zahtijevaju ("gulp-sass"); var autoprefixer = zahtijevaju ("gulp-autoprefixer"); var concatCss = zahtijevati ("gulp-concat-css"); var cleanCSS = zahtijevaju ("gulp-clean-css"); var rename = zahtijevaju ("gulp-rename"); var uglify = zahtijevati ("gulp-uglify"); gulp.task ("serve", ["sass"], funkcija () (browserSync.init ((server: "src /")); gulp.watch ("src / sass / *. sass", ["sass" ]); gulp.watch ("src / *. html"). on ("promjena", browserSync.reload);)); gulp.task ("sass", funkcija () (povratak gulp.src ("src / sass / *. sass") .pipe (sass (). on ("error", sass.logError)) .pipe (autoprefikser ( (pretraživači: ["zadnje 2 verzije"], kaskada: false))) .pipe (concatCss ("style.css")) .pipe (gulp.dest ("src / css")) .pipe (browserSync.stream ( ));)); gulp.task ("mincss", funkcija () (povratak gulp.src ("src / css / *. css") .pipe (preimenuj ((sufiks: ".min"))) .pipe (cleanCSS ()). pipe (gulp.dest ("app / css"));)) gulp.task ("minjs", funkcija () (povratak gulp.src ("src / js / *. js") .pipe (preimenuj ((sufiks : ".min"))) .pipe (uglify ()) .pipe (gulp.dest ("app / js"));)) gulp.task ("min", ["mincss", "minjs"]) ;

Sve. Postavimo i zadani zadatak.