Instalarea Gulp este destul de simplă. Mai întâi, instalați pachetul Gulp la nivel global:
npm install -g gulp
Apoi instalează-l în proiectul tău:
npm install --save-dev gulp
Folosind Gulp
Să creăm o sarcină Gulp pentru a reduce unul dintre fișierele noastre JavaScript. Creați un fișier numit gulpfile.js. Acesta vă va defini sarcinile care sunt executate cu comanda gulp.
Adăugați următoarele comenzi în fișierul dvs. gulpfile.js:
Var gulp = cere("gulp"), uglify = require ("gulp-uglify"); gulp.task("minify", function () ( gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build")) ));
Instalați gulp-uglify prin npm rulând npm install --save-dev gulp-uglifyși apoi rulați sarcina prin gulp minify . Să presupunem că aveți un fișier numit app.js în folderul js, un nou app.js va fi creat în folderul de compilare și va conține o versiune comprimată a js/app.js.
Ce se întâmplă cu adevărat aici?
Facem câteva lucruri în fișierul nostru gulpfile.js. În primul rând, încărcăm modulele gulp și gulp-uglify:
Var gulp = cere("gulp"), uglify = require ("gulp-uglify");
Definim apoi o sarcină numită minify care, atunci când este rulată, apelează funcția dată ca al doilea argument:
Gulp.task("minify", function () ( ));
În cele din urmă, și aceasta este cea mai grea parte, definim ce ar trebui să facă sarcina noastră:
Gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build"))
Dacă nu sunteți familiarizat cu firele și majoritatea dezvoltatorilor front-end nu sunt, atunci codul de mai sus nu vă va spune nimic.
cursuri
Fluxurile permit unor date să treacă printr-o serie de funcții de obicei mici care modifică datele și apoi le transmit la următoarea funcție.
În exemplul de mai sus, funcția gulp.src() preia un șir care corespunde unui fișier sau unui set de fișiere și creează un flux de obiecte reprezentând acele fișiere. Apoi trec (sau curg) în funcția uglify(), care preia obiecte fișier și returnează noi obiecte fișier minificate din sursă. Acest rezultat curge apoi în funcția gulp.dest(), care salvează fișierele modificate.
Iată ce se întâmplă sub formă de diagramă:
Când există o singură sarcină, funcția nu face nimic. Cu toate acestea, luați în considerare următorul cod:
Gulp.task(„js”, funcția () ( return gulp.src(„js/*.js”) .pipe(jshint()) .pipe(jshint.reporter(„implicit”)) .pipe(uglify() ) .pipe(concat("app.js")) .pipe(gulp.dest("build")); ));
Pentru a rula singur acest lucru, instalați gulp, gulp-jshint, gulp-uglify și gulp-concat.
Această sarcină preia toate fișierele care se potrivesc cu js/*.js (cu alte cuvinte, toate Fișiere JavaScript din folderul js), rulează JSHint pe ele, scoate un raport, minimizează fiecare fișier și apoi le concatenează, salvându-le în build/app.js. Sub formă de diagramă:
Dacă sunteți familiarizat cu Grunt, veți observa că acesta este destul de diferit de modul în care funcționează Grunt. Grunt nu folosește fire. În schimb, preia fișiere, rulează o sarcină per fișier și salvează în fișiere noi, repetând întregul proces pentru fiecare sarcină. Ca rezultat al multor accesări la sistemele de fișiere, Grunt este mai lent decât Gulp.
Pentru o mai bună înțelegere a fluxurilor, citiți Manualul fluxurilor.
gulp.src()
Funcția gulp.src() preia unul sau mai multe fișiere sau o matrice și returnează un flux care poate fi transmis pluginurilor.
Celelalte două plugin-uri sunt mai clare: funcția uglify() minimizează codul, iar funcția concat("app.js") concatenează toate fișierele într-un singur denumit app.js.
gulp-load-plugin
Un modul pe care îl găsesc destul de util se numește gulp-load-plugins, care încarcă automat orice plugin Gulp din fișierul package.json și le atașează obiectului. Aplicația principală este următoarea:
Var gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins();
Puteți scrie totul într-un singur rând ( var plugins = require("gulp-load-plugins")();), dar nu sunt un mare fan al single line require.
După rularea acestui cod, obiectul pluginuri va conține pluginurile dvs. cu nume în stil CamelCase (de exemplu, gulp-ruby-sass va fi încărcat ca plugins.rubySass ). Le puteți folosi în mod normal. De exemplu, sarcina noastră js ar fi scurtată astfel:
Var gulp = require("gulp"), gulpLoadPlugins = require("gulp-load-plugins"), plugins = gulpLoadPlugins(); gulp.task(„js”, funcția () ( return gulp.src(„js/*.js”) .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter(„implicit”)) .pipe (plugins.uglify()) .pipe(plugins.concat("app.js")) .pipe(gulp.dest("build")); ));
Se atașează un fișier package.json care conține ceva similar cu:
( "devDependencies": ( "gulp-concat": "~2.2.0", "gulp-uglify": "~0.2.1", "gulp-jshint": "~1.5.1", "gulp": " ~3,5,6" ))
Acest exemplu nu este de fapt mult mai scurt. Cu toate acestea, pentru fișierele Gulp mari și complexe, acest lucru va reduce blocul de încărcare a fișierelor la una sau două linii.
Versiunea 0.4.0 a gulp-load-plugins lansată la începutul lunii martie a adăugat încărcare leneșă a pluginului, ceea ce îmbunătățește performanța. Pluginurile nu sunt încărcate până când nu sunt apelate, ceea ce înseamnă că nu trebuie să vă faceți griji că pluginurile neutilizate din package.json afectează performanța (deși probabil ar trebui să fie eliminate oricum). Cu alte cuvinte, dacă rulați o sarcină care necesită doar două pluginuri, aceasta nu va încărca toate pluginurile pe care le necesită alte sarcini.
Urmărirea fișierelor
Gulp are capacitatea de a urmări fișierele pentru modificări și de a executa o sarcină sau sarcini atunci când sunt detectate modificări. Această caracteristică este uimitor de utilă (probabil una dintre cele mai utile din Gulp pentru mine). Puteți salva fișierul Less și Gulp îl va transforma în CSS și va actualiza browserul fără nicio acțiune din partea dvs.
Pentru a viziona un fișier sau fișiere, utilizați funcția gulp.watch(), care preia un model de fișiere sau o matrice a acestora (cum ar fi gulp.src() ), sau o serie de activități pentru a le rula sau a executa un apel invers funcţie.
Să presupunem că avem o sarcină de compilare care transformă fișierele noastre șablon în HTML și dorim să definim o sarcină de urmărire care urmărește modificările șablonului și rulează o sarcină pentru a le converti în HTML. Putem folosi funcția ceas astfel:
Gulp.task("watch", function () ( gulp.watch ("templates/*.tmpl.html", ["build"]); ));
Acum, când fișierul șablon este schimbat, sarcina de construire va fi rulată, care va genera HTML.
De asemenea, puteți oferi ceasului un apel invers în loc de o serie de sarcini. În acest caz, funcția primește un obiect eveniment care conține informații despre evenimentul care a apelat funcția:
Gulp.watch("șabloane/*.tmpl.html", funcție (eveniment) ( console.log("Tipul eveniment: " + event.type); // adăugat, modificat sau eliminat console.log("Calea evenimentului: " + event.path); // calea fișierului ));
Un alt trăsătură distinctivă gulp.watch() este că returnează un observator. Folosiți-l pentru a asculta evenimente suplimentare sau pentru a adăuga fișiere de vizionat. De exemplu, pentru a rula o listă de sarcini și a apela o funcție în același timp, puteți adăuga un ascultător la evenimentul de modificare când observatorul revine:
Var watcher = gulp.watch("templates/*.tmpl.html", ["build"]); watcher.on(„schimbare”, funcție (eveniment) ( console.log(„Tipul eveniment: „ + event.type); // adăugat, schimbat sau eliminat console.log(„Cale eveniment: „ + event.path) ; // calea către fișier ));
Pe lângă evenimentul de schimbare, puteți asculta o serie de alte evenimente:
- Sfârșit
Se declanșează când observatorul se termină (însemnând că sarcinile și apelurile inverse nu vor mai fi apelate atunci când fișierele se schimbă). - eroare
Se declanșează când apare o eroare. - gata
Se declanșează când fișierele au fost găsite și sunt gata pentru a fi urmărite. - nu se potrivesc
Se declanșează când niciun fișier nu corespunde cererii.
Obiectul watcher conține și câteva metode care pot fi numite:
- watcher.end()
Oprește observatorul (nu vor mai fi apelate sarcini sau apeluri inverse). - watcher.files()
Returnează o listă de fișiere urmărite de observator. - watcher.add(glob)
Adaugă fișiere la Watcher care se potrivesc cu modelul glob specificat (acceptă și o funcție opțională de apel invers ca al doilea argument). - watcher.remove(filepath)
Elimină fișierul specificat din watcher.
Salutare tuturor. Dacă sunteți în vreun fel conectat cu JS, probabil ați auzit de o astfel de aplicație precum gulp . Și poate chiar folosit. Din propria mea experiență, pot spune că poate fi dificil să „intru” cum să lucrezi cu el, deși cheia înțelegerii se află la suprafață. Prin urmare, public acest material, sperând că va deveni util.
De asemenea, pe baza acestui material, s-a filmat și un videoclip, astfel încât să puteți alege sub ce formă să consumați.
Dacă comparați gulp cu alte sisteme de construcție populare, atunci este ca și cum ați compara un quadcopter finit de tipul „cumpărați și zburați” și un kit pentru autoasamblare trântor. Da, vei decola abia a doua zi, dar ai mai multă flexibilitate și control în mâini, mai ales dacă ai o sarcină nestandard.
De fapt, după ce a depășit pragul de intrare, înghițitul nu pare atât de complicat și, uneori, chiar de înțeles și logic. Dar, fără o pregătire adecvată, poate fi dificil să ajungi într-o astfel de stare. Să ne aruncăm în ea și să vedem pe ce principii se bazează gulp.
Să mergem de departe. În ecosistemul nodejs, există un astfel de lucru ca fluxuri, sau flux. Datorită complexității traducerii, firele sunt denumite și fire ale unui program cu mai multe fire. În cazul nostru, un flux este un obiect care reprezintă date în flux și este un concept complet diferit.
Deci aceste fluxuri oferă interfață ușor de utilizat pentru lucrul asincron cu date. Întregul proces de citire/scriere este gestionat de motorul nodului și avem apelurile corespunzătoare doar atunci când a apărut o nouă bucată de date, când a apărut o eroare, când s-a încheiat fluxul etc. În acest fel, eficiența I/O este atinsă cu un efort minim din partea programatorului.
Const fs = require("fs"); const input = fs.createReadStream("fișierul meu"); input.on("date", (bucătură) => ( console.log(bucătură); )); input.on("sfârșit", () => ( console.log ("fișierul este citit"); ));
Fluxurile din nodejs pot fi aproape orice, de la fișiere sau șiruri până la socketuri. De exemplu, în celebrul cadru Express, Solicitare HTTP iar răspunsul nu sunt altceva decât fluxuri. Fluxurile pot fi doar pentru citire, doar pentru scriere sau ambele.
Fluxurile au unul caracteristică utilă: pot fi stivuite împreună într-un lanț numit țeavă. Astfel, putem combina mai multe fire între ele și să le gestionăm ca unul singur. Ieșirea unui flux se alimentează în următorul și așa mai departe până la sfârșit. După cum puteți ghici din traducerea cuvântului pipe, acesta este foarte asemănător cu o conductă.
Acest lucru vă permite să determinați fluxul de date dorit (din nou, complexitatea traducerii. Aici ne referim la flux, sau flux) chiar aici și acum, fără a aștepta ca datele să devină disponibile.
De exemplu, așa putem determina ceea ce vrem să dăm ca rezultat, iar motorul în sine este deja angajat în „cum” să dăm.
Const fs = require("fs"); const express = require("express"); var app = expres(); app.get("/", function (req, res) ( fs.createReadStream("myfile") .pipe(res); )); app.listen(3000);
Rețineți că handlerul de cereri se completează înainte ca fișierul să fie chiar deschis - motorul nodului se ocupă de restul.
Gulp este construit pe o abordare similară. Acesta este avantajul său, dar este și dezavantajul său. Un dezavantaj, cel puțin, poate fi numit din cauza confuziei rezultate, deoarece gulp folosește alte fluxuri similare, dar incompatibile. Gulp lucrează îndeaproape cu Sistemul de fișiere, motiv pentru care folosește fluxuri, care reprezintă nu atât un flux de date, cât individual fișiere virtuale, fiecare cu propriul său conținut.
Dacă ați auzit vreodată de vinil, aceasta este exact implementarea fluxurilor pe care le folosește gulp. Dacă luăm o sarcină standard pentru un gallp și ne uităm la ce este înăuntru, vom constata că pentru fiecare apel la evenimentul de date, ne vine un obiect fișier, care conține toate informațiile necesare: numele fișierului, calea fișierului, directorul de lucru și, desigur, conținutul acestuia.
Const gulp = require("gulp"); gulp.task(„implicit”, function() ( gulp.src(”./*.js”) .on(„date”, function(fisier) ( console.log(„callback de date”); console.log( file.inspect()); /* Rezultă: * callback de date *
Conținutul poate fi prezentat în două formate: ca un buffer deja citit sau ca un flux de nod nativ. Fiecare etapă a conductei Galpov ia astfel de fișiere ca intrare, face un fel de transformare și le transferă la ieșirea următorului lanț. Ultimul lanț de obicei le salvează pe disc.
Pipe(gulp.dest("dist/"));
Realizarea faptului că firele din gulp sunt diferite duce la iluminare și înțelegere, deoarece explică majoritatea problemelor și erorilor.
Considera exemplu real. Doriți să utilizați browserify pentru a îmbina fișierele dvs. JS. Mergeți și găsiți pluginul gulp-browserify. Dar vezi un postscript care spune că pluginul este depreciat, adică. Depreciat.
Ca programator bine educat, respingi această opțiune și mergi să cauți ce soluție nu este depășită. Găsiți rețetele oficiale gulp și vedeți că browserify funcționează direct cu gulp. Ei bine, la fel de direct, printr-un strat intermediar, care doar traduce fluxul de nod nativ într-un flux de vinil pe care gulp îl înțelege. Fără el, nimic nu ar funcționa, pentru că acestea sunt fire diferite.
Dacă doriți să vă scrieți propria transformare, puteți utiliza acest șablon.
După cum puteți vedea, totul este simplu aici: pentru fiecare fișier va fi apelat handlerul nostru, care va efectua modificările. Putem face tot ce vrem: schimbați conținutul fișierului, redenumiți fișierul, ștergeți fișierul sau adăugați încă câteva fișiere noi în flux.
După cum ne amintim, conținutul unui fișier dintr-un flux de vinil poate fi reprezentat ca un buffer sau ca un flux de date. Cu toate acestea, nu este necesar să le susțineți pe ambele. Puteți folosi oricând pachetul
Salutare tuturor! În acest articol, vom crea proiectul nostru, vom inițializa fișierul manifest și vom instala înghiţitură pe plan local.
Pentru început, trebuie spus că calea către folder (inclusiv numele de utilizator al computerului) trebuie să fie activată limba engleză, altfel s-ar putea să primești erori la utilizare înghiţitură. Am creat un folder Proiecte, în care îmi voi crea toate proiectele. De exemplu, voi denumi proiectul nostru primulProiect.
Deci, în ultimul articol pe care l-am stabilit înghiţitură la nivel global, acum trebuie să-l instalăm local. În primul rând, vom efectua inițializarea. Scrieți următoarea comandă în terminal:
cd calea_la_proiectul_dvs. (cd „utilizator/proiecte/primul proiect”)
npm init
Cu această comandă, vom crea un fișier manifest de bază pentru proiectul nostru. În principiu, totul este clar acolo, așa că nu voi explica. Dacă nu doriți să vă deranjați cu toate aceste setări, atunci apăsați tot timpul introduce, deoarece avem nevoie de acest fișier pentru altul, setările inițiale nu atât de important.
Dacă ați făcut totul corect, atunci ar trebui să apară un fișier în folderul proiectului pachet.json. Dacă îl deschideți, veți vedea că toate informațiile pe care le-ați introdus (sau nu le-ați introdus) în timpul inițializării sunt stocate acolo. În plus, fișierul stochează informații despre pachetele folosite și exact de asta avem nevoie. Dacă folosești constant, de exemplu, biblioteca jQuery, apoi îl puteți scrie în acest fișier și va fi descărcat automat la pornirea unui nou proiect.
Acum hai să instalăm înghiţitură local în folderul nostru.
npm i gulp --save-dev
Steag --save-dev necesare pentru a face pachetul înghiţitură iar versiunea sa sunt scrise automat în fișier pachet.json. Dacă deschideți acest fișier după instalarea cu succes a pachetului, veți vedea că acolo apare următoarele:
„Dependențe de dezvoltare” :(
„gulp”: „^3.9.1”
}
Cred că este clar că aici sunt scrise numele pachetului și versiunea lui. O săgeată în sus indică faptul că acest pachet poate fi actualizat. Avem și un folder module_noduri unde este acum stocat înghiţiturăși toate dependențele sale. Aici vor fi instalate module noi.
Deci, asta e tot pentru azi. Am luat în considerare cum se instalează gulp localîn folderul proiectului și de ce aveți nevoie de un manifest pachet.json.
Pentru a accelera procesul de dezvoltare front-end, automatizăm unele sarcini folosind robinetul Gulp.
Pentru a face acest lucru, avem nevoie de managerul de pachete NPM. Dar pentru a instala NPM, mai întâi trebuie să instalați Node.js.
Pasul 1 Instalați Node
Mergem pe site-ul oficial https://nodejs.org și descarcăm versiunea recomandată.
Rulați programul de instalare cu drepturi de administrator.
După instalare, vor apărea 2 pictograme: Node.js și Node.js coomand prompt. Nu ne vor fi de folos, deoarece nu folosim Node.js și există opțiuni mai convenabile pentru lansarea consolei:
1. Utilizați Consola de comandă TotalCommander (Comenzi - Deschideți consola de comandă).
2. Țineți apăsat Shift și faceți clic dreapta pentru a deschide meniul contextual. Acesta va afișa elementul „Deschide fereastra de comandă”.
Este mai bine să lansați linia de comandă din directorul proiectului de care aveți nevoie, consola va afișa imediat calea către directorul dorit, acest lucru va elimina nevoia de a introduce calea manual.
Pentru a verifica versiunile node și npm, tastați
nodul -v și apăsați Enter
apoi npm -v
Versiunile NPM sunt de obicei actualizate mai frecvent decât versiunile nod pentru a instala cea mai recentă versiune:
instalare npm [email protected]-g
comenzile npm de care avem nevoie :
lista npm- lista cu toate pachetele instalate
npm -g ls --adâncime=0- lista pachetelor instalate la nivel global
npm publicat verificați dacă pachetele sunt depășite
npm update gulp- actualizarea versiunilor de plugin
npm init- creați package.json
npm install package_name- instalați pachetul (nume_pachet - numele pachetului dorit)
npm install package_name --save-dev- instalați pachetul și faceți o intrare despre el în package.json în secțiunea devDependencies
dezinstalare npm numele pachetului- scoaterea pachetului
instalare npm- instalați toate pachetele listate în package.json
Înainte de a intra în producție npm shrinkwrap- reparați versiunile pachetului, acum npm install le va instala și veți fi sigur că totul va funcționa așa cum trebuie
Abrevieri
-v: --versiune
-g: --global
-S: --salvează
-D: --save-dev
-y: --da
-n: --da fals
Pasul 2 Instalarea gulp
Prima înghițitură trebuie instalată la nivel global.
Pornim consola de comandă.
Uneori, pe unele resurse există un semn de dolar în fața comenzii, de exemplu
$ npm install --global gulp-cli
Nu copiați semnul dolarului, lipiți doar comanda în sine
npm install --global gulp-cli
Cheie: pentru a lipi textul copiat în Linie de comanda, deschideți linia de comandă, apăsați ALT + SPAȚIU -> Valori implicite, bifați caseta Selectați cu mouse-ul. Acum puteți selecta textul cu mouse-ul, copiați, în com. faceți clic dreapta pe linie - textul va fi inserat automat.
Pasul 3. Lucrul cu gulp într-un anumit proiect
3.1
Mai întâi, să creăm un pachet de dependențe package.json
Fișierul package.json conține informații pe care le vom introduce în terminal și o listă cu toate pachetele pe care le folosim în proiect.
Când instalați un pachet cu cheia --save-dev, pachetul este adăugat automat la package.json. Pentru a nu instala manual toate pachetele în fiecare proiect nou, vom folosi pachetul gata făcut.json cu modulele și dependențele de care avem nevoie, plasându-l în rădăcina proiectului nostru.
package.json este generat folosind comanda npm init, care va imprima câteva întrebări pe consolă pentru a crea fișierul.
Elementul de nume afișează în mod implicit numele directorului de proiect.
Cheie:
Puteți genera acest fișier mai rapid și mai ușor folosind opțiunea --yes (răspunde automat da la toate întrebările):
npm init --da
Bine de stiut:
Puteți seta valori implicite care vor fi folosite de fiecare dată când rulați npm init, ceea ce vă va economisi timp. Odată instalate, acestea sunt stocate în fișiere .npmrc.
De exemplu:
set de configurare npm init.author.name „Valentina Vladova”
set de configurare npm init.author.email" [email protected]"
set de configurare npm init.author.url „http://simpalmarket.com/”
npm set init-license MIT
npm set init-version 0.0.0
Apoi rulați npm init, toate valorile specificate vor fi trase în variabilele corespunzătoare.
Când npm init solicită un git repo, scrieți pe scurt user/repo - npm este suficient de inteligent pentru a extinde linia la https://github.com/user/repo. npm va genera, de asemenea, depozitul, erorile și câmpurile paginii de pornire în formatul corect.
Deci, accesați folderul rădăcină al proiectului, apelați consola de comandă și tastați
npm init --da
Un fișier package.json va apărea la rădăcina proiectului cu ceva de genul acesta
3.2
Instalați gulp local
În folderul de proiect din consolă introduceți:
npm install --save-dev gulp
sau prescurtat
npm i gulp --save-dev
Lista va fi Avertizare - ignorare.
Pentru a verifica versiunea, utilizați comanda
gulp --versiune
Folderul node_modules a apărut în directorul rădăcină al proiectului. Toate modulele și dependențele pe care le vom instala în proiect vor fi încărcate automat în el. Pot exista o mulțime de foldere cu dependențe, chiar dacă nu sunt atât de multe pachete instalate. Acest lucru se datorează faptului că, pe lângă pachetele principale, sunt instalate programele necesare pentru funcționarea corectă a pachetului principal. Nu trebuie să curățați sau să ștergeți nimic din folderul node_modules.
O intrare va fi adăugată la fișierul package.json
„Dependențe de dezvoltare” :(
„gulp”: „^3.9.1”
}
Acum puteți instala diverse plugin-uri pentru gulp.
http://gulpjs.com/plugins/
În câmpul de căutare, introduceți numele pluginului care vă interesează.
Pluginurile pot fi instalate pe rând, de exemplu:
npm install --save-dev gulp-plumber
precum și o listă separată de un spațiu, de exemplu:
npm instalează gulp-sass gulp-plumber gulp-autoprefixer gulp-minify-css --save-dev
Pluginurile pentru instalare și pluginurile pentru asamblare sunt cel mai bine instalate cu comenzi separate
npm init
Vei avea nevoie:
- Specificați numele proiectului
- Versiunea proiectului
- Descrierea proiectului
- punct de intrare
- echipă
- Depozitul Git
- Cuvinte cheie
- Numele autorului
- Licență
npm i –g înghiţitură
- Numele sarcinii
test de înghițire
Sarcina funcționează.
servi înghițit
npm i gulp-sass --save-dev
- Compilarea sass la css
- Adăugarea de prefixe
- Salvarea unui fișier în src/css
Crearea unei sarcini în gulp
Concluzie.
https://gulpjs.com/plugins/
Deschideți terminalul și accesați folderul cu proiectul. Primul lucru pe care trebuie să-l facem este să inițializam npm pentru a face acest lucru, să rulăm comanda:
npm init
Vei avea nevoie:
- Specificați numele proiectului
- Versiunea proiectului
- Descrierea proiectului
- punct de intrare
- echipă
- Depozitul Git
- Cuvinte cheie
- Numele autorului
- Licență
Totul poate fi lăsat implicit (dacă nu doriți să încărcați proiectul în acces general)
Apoi confirmăm informațiile introduse.
Amenda. NPM inițializat. Acum fișierul packages.json a apărut în rădăcină - fișierul de configurare al managerului de pachete.
Acum putem instala gulp. Mai întâi trebuie să îl instalați la nivel global și apoi pentru proiect. Pentru a instala global, executați următoarea comandă:
npm i –g înghiţitură
Acum să instalăm gulp pentru proiect:
npm install --save-dev gulp
Toate gulp pentru proiect sunt instalate.
Sa verificam. Să creăm un fișier gulpfile.js și să creăm o sarcină de testare în el, care va afișa „Lucrez” în consolă.
var gulp = require("gulp"); gulp.task("test", function() ( console.log ("Lucrez"); ));
În primul rând, includem gulp, iar în al doilea rând, numim funcția de activitate a gulp, care ia doi parametri:
- Numele sarcinii
- functie anonima care descrie sarcina noastră
Acum, în consolă, rulați următoarea comandă
test de înghițire
Sarcina funcționează.
Acum să instalăm și să activăm pachete care ajută la aspect.
Browsersync, un pachet care vă permite să actualizați automat pagina când fișierele se modifică
Pentru a instala în consolă, executați următoarea comandă:
npm i browser-sync --save-dev
Acum să creăm o sarcină care va rula browser-sync și va urmări modificările fișierelor.
Gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/css/*.css")on("change ", browserSync.reload); gulp.watch("src/*.html").on("schimbare", browserSync.reload); ));
Sarcina se numește servire. Și browser-sync va actualiza pagina browserului automat dacă fișierele css (situate în folderul src/css) și fișierele html (situate în folderul src) s-au schimbat.
Pentru a începe această sarcină, executați comanda
servi înghițit
Folosesc sass pentru aspect. Prin urmare, pentru a compila de la sass la css, folosesc pachetul gulp-sass.
Instalarea și configurarea gulp-sass
Pentru a instala gulp-sass în consolă, executați comanda:
npm i gulp-sass --save-dev
Acum să creăm o sarcină sass care va compila sass în css. Și modificați sarcina de servire, astfel încât sincronizarea browserului nostru să asculte în loc de fișier css sass.
var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on(„schimbare”, browserSync.reload); )); gulp.task(„sass”, function() ( return gulp.src(„src/sass/*.sass”) .pipe(sass().on(„eroare”, sass.logError)) .pipe(gulp. dest("src/css")) .pipe(browserSync.stream()); ));
Acum, când rulați sarcina de servire, sarcina sass va rula.
Instalarea și configurarea gulp-autoprefixer
Pentru a instala gulp-autoprefixer, rulați comanda:
npm i gulp-autoprefixer --save-dev
Și adăugați un prefix la sarcina sass.
var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on(„schimbare”, browserSync.reload); )); gulp.task(„sass”, function() ( return gulp.src(„src/sass/*.sass”) .pipe(sass().on(„eroare”, sass.logError)) .pipe(autoprefixer( ( browsere: ["ultimele 2 versiuni"], cascadă: false ))) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); ));
Acum, când rulați sarcina sass, c va avea:
- Compilarea sass la css
- Adăugarea de prefixe
- Salvarea unui fișier în src/css
Următorul pachet combină toate fișierele CSS într-unul singur.
Instalarea și configurarea contactCss
Pentru a instala contactCss utilizați următoarea comandă:
npm i gulp-concat-css --save-dev
Și adăugați execuția acestui pachet la sarcina sass. (Vom combina toate fișierele CSS în style.css)
var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on(„schimbare”, browserSync.reload); )); gulp.task(„sass”, function() ( return gulp.src(„src/sass/*.sass”) .pipe(sass().on(„eroare”, sass.logError)) .pipe(autoprefixer( ( browsere: ["ultimele 2 versiuni"], cascadă: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( )); ));
Amenda. Acum să adăugăm un pachet care redenumește fișierele. (Vom avea nevoie de el, codul îl vom minimiza fișierele css și js)
Instalarea și configurarea gulp-rename
Pentru a instala gulp-rename, rulați următoarea comandă:
npm i gulp-rename --save-dev
Deocamdată, nu vom adăuga acest pachet la nicio sarcină.
Instalarea și configurarea unui pachet pentru a minimiza fișierele CSS - clean-css
Pentru a instala clean-css, rulați următoarea comandă:
npm i gulp-clean-css --save-dev
Acum să creăm o sarcină mincss care va adăuga sufixul „.min” la numele fișierului, să minimizăm fișierul css și să-l salveze în aplicație/css
var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on(„schimbare”, browserSync.reload); )); gulp.task(„sass”, function() ( return gulp.src(„src/sass/*.sass”) .pipe(sass().on(„eroare”, sass.logError)) .pipe(autoprefixer( ( browsere: ["ultimele 2 versiuni"], cascadă: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( )); )); gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((sufix: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); ))
Grozav, haideți să instalăm pachetul gulp, care va reduce fișierele js.
Instalarea și configurarea pachetului gulp pentru a minimiza fișierele js --gulp-uglify
Pentru a instala gulp-uglify, executați următoarea comandă:
npm i gulp-uglify --save-dev
Acum să creăm o sarcină care să adauge sufixul „.min” la fișier, să minimizăm fișierul js și să-l salveze în app/js
var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); var uglify = require("gulp-uglify"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on(„schimbare”, browserSync.reload); )); gulp.task(„sass”, function() ( return gulp.src(„src/sass/*.sass”) .pipe(sass().on(„eroare”, sass.logError)) .pipe(autoprefixer( ( browsere: ["ultimele 2 versiuni"], cascadă: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( )); )); gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((sufix: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); )) gulp.task("minjs", function() ( return gulp.src("src/js/*.js") .pipe(redenumiți((sufix) : ".min"))) .pipe(uglify()) .pipe(gulp.dest("app/js")); ))
Am creat sarcinile principale. Dar ultimele două trebuie efectuate la punerea în producție a proiectului. Și trebuie făcute împreună. Să creăm o sarcină care va executa sarcina mincss și apoi minjs
Crearea unei sarcini în gulp
Să creăm o sarcină min care va rula sarcinile mincss și minjs
var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); var autoprefixer = require("gulp-autoprefixer"); var concatCss = require("gulp-concat-css"); var cleanCSS = require("gulp-clean-css"); var rename = require("gulp-rename"); var uglify = require("gulp-uglify"); gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on(„schimbare”, browserSync.reload); )); gulp.task(„sass”, function() ( return gulp.src(„src/sass/*.sass”) .pipe(sass().on(„eroare”, sass.logError)) .pipe(autoprefixer( ( browsere: ["ultimele 2 versiuni"], cascadă: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( )); )); gulp.task("mincss", function() ( return gulp.src("src/css/*.css") .pipe(rename((sufix: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); )) gulp.task("minjs", function() ( return gulp.src("src/js/*.js") .pipe(redenumiți((sufix) : ".min"))) .pipe(uglify()) .pipe(gulp.dest("app/js")); )) gulp.task("min",["mincss", "minjs"]) ;
Tot. Să setăm și o sarcină implicită.
Setarea sarcinii implicite gulp
gulp.task("implicit", ["servire"]);Concluzie.
Ne-am gândit la ce este gulp, cum să-l instalăm. Instalat pachete suplimentare, care sunt necesare pentru configurarea și setarea sarcinilor.
Puteți găsi singur pachetele necesare la https://gulpjs.com/plugins/ și le puteți instala. Și apoi creați sarcini pentru a optimiza procesul de dezvoltare.
