Gulp de kirjeldus vene keeles. Gulpi installimine ja kasutamine

Gulpi installimine on üsna lihtne. Esmalt installige Gulpi pakett globaalselt:

npm install -g gulp

Seejärel installige see oma projekti:

npm install --save-dev gulp

Gulpi kasutamine

Loome ühe JavaScripti faili minimeerimiseks Gulpi ülesande. Looge fail nimega gulpfile.js. See määratleb teie ülesanded, mida käivitatakse käsuga gulp.

Lisage failile gulpfile.js järgmised käsud:

Var gulp = nõudma("gulp"), uglify = nõudma("gulp-uglify"); gulp.task("minify", function () ( gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build")) ));

Installige gulp-uglify npm-i kaudu, käivitades npm install --save-dev gulp-uglify ja seejärel käivitage ülesanne gulp minify kaudu. Oletame, et teil on js-i kaustas fail nimega app.js. Järgukaustas luuakse uus app.js, mis sisaldab faili js/app.js tihendatud versiooni.

Mis siin tegelikult toimub?

Teeme failis gulpfile.js mõned asjad. Esiteks laadime gulp ja gulp-uglify moodulid:

Var gulp = nõudma("gulp"), uglify = nõudma("gulp-uglify");

Seejärel määratleme ülesande nimega minimeerimine, mis käivitamisel kutsub välja teise argumendina antud funktsiooni:

Gulp.task("vähenda", funktsioon () ( ));

Lõpuks, ja see on kõige raskem osa, määratleme, mida meie ülesanne peaks tegema:

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

Kui te pole lõimedega kursis ja enamik esiotsa arendajaid pole, siis ülaltoodud kood ei ütle teile midagi.

ojad

Vood võimaldavad teatud andmetel läbida rea tavaliselt väikeseid funktsioone, mis muudavad andmeid ja edastavad need seejärel järgmisele funktsioonile.

Ülaltoodud näites võtab funktsioon gulp.src() stringi, mis vastab failile või failide komplektile, ja loob neid faile esindavate objektide voo. Seejärel lähevad need (või voolavad) funktsiooni uglify(), mis võtab failiobjektid ja tagastab uued failiobjektid, mis on allikast minimeeritud. See tulemus liigub seejärel funktsiooni gulp.dest(), mis salvestab muudetud failid.

Diagrammi kujul juhtub järgmine:

Kui on ainult üks ülesanne, ei tee funktsioon midagi. Siiski kaaluge järgmist koodi:

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

Selle ise käivitamiseks installige gulp, gulp-jshint, gulp-uglify ja gulp-concat.

See ülesanne võtab kõik failid, mis vastavad js/*.js-ile (teisisõnu kõik JavaScripti failid js kaustast), käivitab neil JSHint, väljastab aruande, minimeerib iga faili ja seejärel ühendab need, salvestades need kausta build/app.js. Diagrammi kujul:

Kui olete Gruntiga tuttav, märkate, et see on üsna erinev sellest, kuidas Grunt töötab. Grunt ei kasuta niite. Selle asemel võtab see faile, käivitab ühe ülesande faili kohta ja salvestab uutesse failidesse, korrates iga ülesande puhul kogu protsessi. Paljude failisüsteemide juurdepääsu tõttu on Grunt aeglasem kui Gulp.

Voogude paremaks mõistmiseks lugege voo käsiraamatut.

gulp.src()

Funktsioon gulp.src() võtab ühe või mitu faili või massiivi ja tagastab voo, mida saab pistikprogrammidele edasi anda.

Ülejäänud kaks pistikprogrammi on selgemad: funktsioon uglify() minimeerib koodi ja funktsioon concat("app.js") ühendab kõik failid ühte nimega app.js.

gulp-load-plugin

Minu arvates üsna kasulikku moodulit nimetatakse gulp-load-plugins, mis laadib failist package.json automaatselt kõik Gulpi pistikprogrammid ja lisab need objektile. Peamine rakendus on järgmine:

Var gulpLoadPlugins = nõuda("gulp-load-plugins"), pluginad = gulpLoadPlugins();

Saate kirjutada kõik ühele reale ( var plugins = nõuda("gulp-load-plugins")();), kuid ma ei ole eriline ühe rea nõudmise fänn.

Pärast selle koodi käivitamist sisaldab pluginate objekt teie pluginaid CamelCase-stiilis nimedega (näiteks gulp-ruby-sass laaditakse kui plugins.rubySass ). Saate neid tavapärasel viisil kasutada. Näiteks meie js-i ülesannet lühendataks järgmiselt:

Var gulp = nõuda("gulp"), gulpLoadPlugins = nõuda("gulp-load-plugins"), pluginad = gulpLoadPlugins(); gulp.task("js", funktsioon () ( return gulp.src("js/*.js") .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter("default")) .pipe (plugins.uglify()) .pipe(plugins.concat("app.js")) .pipe(gulp.dest("build")); ));

Manustatud on fail package.json, mis sisaldab midagi sarnast:

( "devDependencies": ( "gulp-concat": "~2.2.0", "gulp-uglify": "~0.2.1", "gulp-jshint": "~1.5.1", "gulp": " ~3,5,6" ) )

See näide pole tegelikult palju lühem. Suurte ja keerukate Gulp-failide puhul vähendab see aga failide üleslaadimise ploki ühe või kahe rea peale.

Märtsi alguses välja antud gulp-load-pluginate versioon 0.4.0 lisas pistikprogrammi laisa laadimise, mis parandab jõudlust. Pluginaid ei laadita enne, kui neid kutsutakse, mis tähendab, et te ei pea muretsema faili package.json kasutamata pistikprogrammide jõudluse mõju pärast (kuigi tõenäoliselt tuleks need ikkagi eemaldada). Teisisõnu, kui käivitate ülesande, mis nõuab ainult kahte pistikprogrammi, ei laadi see kõiki pistikprogramme, mida muud toimingud nõuavad.

Failide jälgimine

Gulpil on võimalus vaadata faile muudatuste tuvastamiseks ja muudatuste tuvastamisel täita ülesannet või ülesandeid. See funktsioon on hämmastavalt kasulik (minu jaoks ilmselt üks kõige kasulikumaid Gulpis). Saate salvestada faili Less ja Gulp muudab selle CSS-iks ja värskendab brauserit ilma teiepoolsete tegevusteta.

Faili või failide vaatamiseks kasutage funktsiooni gulp.watch(), mis võtab failide mustri või nende massiivi (nt gulp.src() ) või ülesannete massiivi nende käitamiseks või tagasihelistamiseks funktsiooni.

Oletame, et meil on koostamisülesanne, mis muudab meie mallifailid HTML-iks, ja me tahame määratleda jälgimisülesande, mis jälgib malli muudatusi ja käivitab ülesande, mis teisendab need HTML-iks. Saame kasutada kella funktsiooni järgmiselt:

Gulp.task("watch", function () ( gulp.watch("templates/*.tmpl.html", ["ehitamine"]); ));

Nüüd, kui mallifaili muudetakse, käivitatakse ehitusülesanne, mis genereerib HTML-i.

Ülesannete hulga asemel võite anda ka kella tagasihelistamise. Sel juhul võtab funktsioon vastu sündmuseobjekti, mis sisaldab teavet funktsiooni kutsunud sündmuse kohta:

Gulp.watch("templates/*.tmpl.html", funktsioon (event) ( console.log("Sündmuse tüüp: " + event.type); // lisatud, muudetud või eemaldatud console.log("Sündmuse tee: " + event.path); // faili tee ));

Teine eristav omadus gulp.watch() on see, et see tagastab jälgija . Kasutage seda täiendavate sündmuste kuulamiseks või vaatamiseks failide lisamiseks. Näiteks ülesannete loendi käitamiseks ja funktsiooni samaaegseks väljakutsumiseks saate jälgija naasmisel lisada muudatuse sündmusele kuulaja:

Var watcher = gulp.watch("templates/*.tmpl.html", ["ehitamine"]); watcher.on("muuda", funktsioon (sündmus) ( console.log("Sündmuse tüüp: " + event.type); // lisatud, muudetud või eemaldatud console.log("Sündmuse tee: " + event.path) ; // faili tee ));

Lisaks muudatussündmusele saate kuulata mitmeid muid sündmusi:

lõpp
Käivitub, kui jälgija lõpeb (see tähendab, et failide muutumisel ülesandeid ja tagasihelistusi enam ei kutsuta).
viga
Süttib tõrke ilmnemisel.
valmis
Käivitub, kui failid on leitud ja jälgimiseks valmis.
nomatch
Käivitatakse, kui ükski fail ei vasta päringule.

Vaatlejaobjekt sisaldab ka mõningaid meetodeid, mida saab nimetada:

watcher.end()
Peatab jälgija (rohkem ülesandeid ega tagasihelistusi ei kutsuta).
watcher.files()
Tagastab jälgija vaadatud failide loendi.
watcher.add(glob)
Lisab jälgijasse failid, mis vastavad määratud globaalmustrile (aksepteerib ka valikulise tagasihelistamise funktsiooni teise argumendina).
watcher.remove(failitee)
Eemaldab määratud faili jälgijast.

Tere. Kui olete JS-iga kuidagi seotud, olete ilmselt kuulnud sellisest rakendusest nagu gulp . Ja võib-olla isegi kasutatud. Omast kogemusest võin öelda, et temaga töötamise “sissepääsemine” võib olla keeruline, kuigi mõistmise võti peitub pinnal. Seetõttu avaldan selle materjali, lootes, et sellest saab kasu.

Samuti tehti selle materjali põhjal video, et saaksite ise valida, millisel kujul tarbida.

Kui võrrelda ahmimist teiste populaarsete ehitussüsteemidega, siis võrreldakse valmis kvadrokopterit tüüpi "ostsin ja lendasid" ja komplekti ise kokkupanek droon. Jah, tõusete õhku alles järgmisel päeval, kuid teie kätes on rohkem paindlikkust ja kontrolli, eriti kui teil on ebastandardne ülesanne.

Tegelikult ei tundu õgimine pärast sisenemiskünnise ületamist nii keeruline ja kohati isegi arusaadav ja loogiline. Kuid ilma korraliku ettevalmistuseta võib sellisesse seisundisse jõudmine olla keeruline. Sukeldume sellesse ja vaatame, millistele põhimõtetele gulp on üles ehitatud.

Lähme kaugelt. Nodejs'i ökosüsteemis on selline asi nagu ojad või ojad. Tõlke keerukuse tõttu nimetatakse lõime ka mitme lõimega programmi lõimedeks või lõimedeks. Meie puhul on voog objekt, mis esindab voogesituse andmeid, ja see on täiesti erinev mõiste.

Nii et need ojad pakuvad kasutajasõbralik liides andmetega asünkroonseks tööks. Kogu lugemise/kirjutamise protsessiga tegeleb sõlmemootor ja meil on vastavad tagasihelistamised ainult siis, kui ilmus uus andmeosa, kui ilmnes tõrge, millal voog lõppes jne. Sel viisil saavutatakse I/O efektiivsus programmeerija minimaalse pingutusega.

Const fs = nõuda("fs"); const input = fs.createReadStream("minu fail"); input.on("andmed", (tükk) => ( console.log(chunk); )); input.on("end", () => ( console.log("fail loetakse"); ));
Nodejs'i vood võivad olla peaaegu kõik, alates failidest või stringidest kuni pistikupesadeni. Näiteks kuulsas Expressi raamistikus HTTP päring ja vastuseks pole muud kui ojad. Vood võivad olla kirjutuskaitstud, kirjutatavad või mõlemad.

Streamidel on üks kasulik funktsioon: neid saab virnastada kokku ketti, mida nimetatakse toruks. Seega saame mitu lõime omavahel ühendada ja neid ühena hallata. Ühe voo väljund siseneb järgmisesse ja nii edasi kuni lõpuni. Nagu sõna toru tõlke põhjal võib arvata, on see väga sarnane torujuhtmega.

See võimaldab teil määrata soovitud andmevoo (jällegi tõlke keerukus. Siin peame silmas voogu või voogu) just siin ja praegu, ootamata andmete kättesaadavaks saamist.

Näiteks nii saame kindlaks teha, mida me selle tulemusel anda tahame, ja mootor ise tegeleb juba sellega, “kuidas” anda.

Const fs = nõuda("fs"); const express = nõuda("ekspress"); var app = express(); app.get("/", funktsioon (req, res) ( fs.createReadStream("minufail") .pipe(res; )); app.listen(3000);
Pange tähele, et päringutöötleja lõpetab enne faili avamist – sõlmemootor hoolitseb ülejäänu eest.

Gulp on üles ehitatud sarnasele lähenemisele. See on selle eelis, kuid see on ka puudus. Tekkinud segaduse tõttu võib nimetada vähemalt puudust, kuna gulp kasutab muid sarnaseid, kuid ühildumatuid vooge. Gulp teeb tihedat koostööd failisüsteem, mistõttu kasutab see vooge, mis ei kujuta endast niivõrd andmevoogu, kuivõrd üksikisikut virtuaalsed failid, millest igaühel on oma sisu.

Kui olete kunagi kuulnud vinüülist, siis see on just see voogude teostus, mida gulp kasutab. Kui võtta gallp jaoks standardülesanne ja vaadata, mis seal sees on, siis leiame, et iga andmesündmuse kõne puhul tuleb meieni failiobjekt, mis sisaldab kogu vajalikku infot: faili nimi, failitee, töökataloog. ja loomulikult selle sisu.

Const gulp = nõuda("gulp"); gulp.task("default", function() ( gulp.src("./*.js") .on("data", function(file) ( console.log("data callback"); console.log( file.inspect()); /* See väljastab: * andmete tagasihelistamine * > * andmete tagasihelistamine * > */ )) .pipe(gulp.dest("dist/")); ));
Sisu saab esitada kahes vormingus: juba loetud puhvrina või natiivse sõlmevoona. Galpovi toru iga etapp võtab sellised failid sisendiks, teeb mingisuguse teisenduse ja edastab selle järgmise ahela väljundisse. Viimane ahel salvestab need tavaliselt kettale.

Pipe(gulp.dest("dist/"));
Arusaamine, et niidid on erinevad, viib valgustumiseni ja mõistmiseni, kuna see selgitab enamikku probleeme ja vigu.

Kaaluge tõeline näide. Soovite JS-failide liitmiseks kasutada brauseri funktsiooni. Lähete ja leiate pistikprogrammi gulp-browserify. Aga näed järelsõna, mis ütleb, et plugin on aegunud, st. Aegunud.

Hea haridusega programmeerijana jätate selle võimaluse kõrvale ja lähete otsima, milline lahendus pole aegunud. Otsige üles ametlikud närimisretseptid ja veenduge, et brauseri kasutamine töötab otse söömisega. Noh, nagu otse, vahekihi kaudu, mis lihtsalt tõlgib natiivse sõlmevoo vinüülvooks, mida gurpp mõistab. Ilma selleta ei töötaks miski, sest need on erinevad lõimed.

Kui soovite kirjutada oma teisenduse, võite kasutada seda malli.
Nagu näete, on siin kõik lihtne: iga faili puhul kutsutakse välja meie töötleja, kes teeb muudatused. Saame teha mida iganes: muuta faili sisu, nimetada faili ümber, kustutada või lisada voogu veel paar uut faili.

Nagu mäletame, võib vinüülvoos oleva faili sisu esitada puhvrina või andmevoona. Siiski pole vaja mõlemat toetada. Pakendit saab alati kasutada

Tere! Selles artiklis loome oma projekti, initsialiseerime manifesti faili ja installime ahmima kohapeal.

Alustuseks olgu öeldud, et kausta tee (kaasa arvatud arvuti kasutajanimi) peab olema sisse lülitatud inglise keel, vastasel juhul võite kasutamisel ilmneda tõrkeid ahmima. Tegin kausta Projektid, milles loon kõik oma projektid. Näiteks panen meie projektile nime esimene Projekt.

Niisiis, viimases artiklis me seadsime ahmima globaalselt, nüüd peame selle kohalikult installima. Kõigepealt teostame lähtestamise. Kirjutage terminali järgmine käsk:

cd tee_teie_projektini (cd "kasutaja/projektid/esimene projekt")
npm init

Selle käsuga loome oma projekti jaoks põhilise manifesti faili. Põhimõtteliselt on seal kõik selge, nii et ma ei hakka seletama. Kui te ei soovi kõigi nende seadistustega jännata, siis vajutage lihtsalt kogu aeg sisenema, sest me vajame seda faili teise jaoks, algseaded mitte nii oluline.

Kui tegite kõik õigesti, peaks teie projekti kausta ilmuma fail package.json. Kui avate selle, näete, et kogu teave, mille initsialiseerimisel sisestasite (või ei sisestanud), on seal salvestatud. Lisaks salvestab fail teavet kasutatud pakettide kohta ja just seda me vajame. Kui kasutad pidevalt näiteks raamatukogu jQuery, siis saate selle sellesse faili kirjutada ja see laaditakse uue projekti alustamisel automaatselt alla.

Nüüd installime ahmima kohapeal meie kausta.

npm i gulp --save-dev

Lipp --save-dev vaja paki jaoks ahmima ja selle versioon kirjutatakse automaatselt faili package.json. Kui avate selle faili pärast paketi edukat installimist, näete, et seal kuvatakse järgmine teave:

"Dependentsid" :(
"gulp": "^3.9.1"
}

Minu meelest on selge, et siia on kirjas paketi nimi ja selle versioon. Ülesnool näitab, et see pakett on uuendatav. Meil on ka kaust sõlme_moodulid kus praegu hoitakse ahmima ja kõik selle sõltuvused. Siin paigaldatakse uued moodulid.

Nii et tänaseks on kõik. Oleme kaalunud kuidas gulpi kohapeal paigaldada projekti kausta ja miks teil manifesti vaja on package.json.

Esiotsa arendusprotsessi kiirendamiseks automatiseerime mõned toimingud Gulpi segisti abil.
Selleks vajame NPM-i paketihaldurit. Kuid NPM-i installimiseks peate esmalt installima Node.js.

1. samm Installige sõlm
Me läheme ametlikule saidile https://nodejs.org ja laadime alla soovitatud versiooni.

Käivitage installiprogramm administraatori õigustega.
Pärast installimist kuvatakse 2 ikooni: Node.js ja Node.js coomand prompt. Need pole meile kasulikud, kuna me ei kasuta Node.js-i ja konsooli käivitamiseks on mugavamad võimalused:
1. Kasutage käsukonsooli TotalCommander (käsud – ava käsukonsool).
2. Hoidke all tõstuklahvi ja tehke avamiseks paremklõps kontekstimenüü. See kuvab üksuse "Ava käsuaken".
Parem on käivitada käsurida vajaliku projekti kataloogist, konsool kuvab kohe soovitud kataloogi tee, see välistab vajaduse tee käsitsi sisestada.

Node ja npm versioonide kontrollimiseks tippige
node -v ja vajutage sisestusklahvi
siis npm -v

NPM-i versioone värskendatakse tavaliselt uusima versiooni installimiseks sagedamini kui sõlmeversioone.
npm installimine [e-postiga kaitstud]-g

npm käsud, mida vajame :
npm loend- kõigi nimekiri installitud paketid
npm -g ls --depth=0- globaalselt installitud pakettide loend
npm avaldatud kontrollige, kas pakendid on aegunud
npm update gulp- pistikprogrammide versioonide värskendamine
npm init- luua package.json
npm installi paketi_nimi- installige pakett (paketi_nimi - vajaliku paketi nimi)
npm install paketi_nimi --save-dev- installige pakett ja tehke selle kohta kanne failis package.json jaotises devDependencies
npm desinstallimine paketi_nimi- pakendi eemaldamine
npm installimine- installige kõik failis package.json loetletud paketid
Enne tootmisse minekut npm kokkutõmbav kile- parandage paketi versioonid, nüüd installib npm install need ja olete kindel, et kõik töötab nii nagu peab

Lühendid
-v: --versioon
-g: --globaalne
-S: -- salvestada
-D: --save-dev
-y: --jah
-n: --jah vale

2. samm Gulpi paigaldamine
Esimene sõõm tuleb paigaldada globaalselt.

Käivitame käsukonsooli.
Mõnikord on mõnel ressursil käsu ees näiteks dollarimärk
$ npm install --global gulp-cli

Ärge kopeerige dollarimärki, kleepige ainult käsk ise
npm install --global gulp-cli

Vihje: kopeeritud teksti kleepimiseks käsurida, avage käsurida, vajutage ALT + TÜHIK -> Vaikeväärtused, märkige ruut Vali hiirega. Nüüd saate teksti hiirega valida, kopeerida, saidil com. paremklõpsake real - tekst sisestatakse automaatselt.

3. samm. Söögiga töötamine konkreetses projektis

3.1 Kõigepealt loome sõltuvuspaketi package.json
Fail package.json sisaldab teavet, mille sisestame terminali, ja kõigi projektis kasutatavate pakettide loendit.

Kui installite paketi võtmega --save-dev, lisatakse pakett automaatselt faili package.json. Et mitte kõiki pakette igas uues projektis käsitsi installida, kasutame valmis paketti.json koos vajalike moodulite ja sõltuvustega, asetades selle oma projekti juure.

pack.json genereeritakse käsuga npm init, mis prindib faili loomiseks konsoolile mõned küsimused.
Nimeüksus kuvab vaikimisi teie projektikataloogi nime.

Vihje:
Saate selle faili kiiremini ja lihtsamalt genereerida, kasutades valikut --jah (vastake automaatselt jah kõigile küsimustele):
npm init -- jah

Hea teada:
Saate määrata vaikeväärtused, mida kasutatakse iga kord, kui käivitate npm initi, mis säästab teie aega. Pärast installimist salvestatakse need .npmrc-failidesse.
Näiteks:
npm konfiguratsioonikomplekt init.author.name "Valentina Vladova"
npm konfiguratsiooniseade init.author.email" [e-postiga kaitstud]"
npm konfiguratsioonikomplekt init.author.url "http://simpalmarket.com/"
npm seatud init-license MIT
npm seatud init-versioon 0.0.0
Seejärel käivitage npm init, kõik määratud väärtused tõmmatakse vastavatesse muutujatesse.

Kui npm init küsib git repot, kirjutage lühidalt user/repo – npm on piisavalt nutikas, et laiendada rida aadressil https://github.com/user/repo. npm genereerib ka hoidla, vead ja kodulehe väljad õiges vormingus.

Niisiis, minge projekti juurkausta, helistage käsukonsooli ja tippige
npm init -- jah

Projekti juurtes kuvatakse fail package.json koos millegi sellisega

3.2 Paigaldage gulp kohapeal
Sisestage konsooli projekti kausta:
npm install --save-dev gulp

või lühendatult
npm i gulp --save-dev

Nimekiri on Hoiatus – ignoreeri.

Versiooni kontrollimiseks kasutage käsku
ahmima -- versioon

Kaust node_modules ilmus projekti juurkataloogi. Kõik moodulid ja sõltuvused, mida projekti installime, laaditakse sellesse automaatselt. Sõltuvustega kaustu võib olla palju, isegi kui pakette pole installitud nii palju. See on tingitud asjaolust, et lisaks põhipakettidele on installitud ka põhipaketi korrektseks tööks vajalikud programmid. Te ei pea kaustas node_modules midagi puhastama ega kustutama.

Faili package.json lisatakse kirje
"Dependentsid" :(
"gulp": "^3.9.1"
}

Nüüd saate õgimiseks installida erinevaid pluginaid.
http://gulpjs.com/plugins/
Sisestage otsinguväljale teid huvitava pistikprogrammi nimi.

Pluginaid saab installida ükshaaval, näiteks:
npm install --save-dev gulp-plumber
samuti tühikuga eraldatud loend, näiteks:
npm install gulp-sass gulp-plumber gulp-autoprefixer gulp-minify-css --save-dev
Paigaldamiseks mõeldud pluginad ja montaažipluginad on kõige parem installida eraldi käskudega

npm init

Sa vajad:

Määrake projekti nimi
Projekti versioon
Projekti kirjeldus
sisenemispunkt
meeskond
Giti hoidla
Märksõnad
Autori nimi
Litsents

npm i –g gulp

Ülesande nimi

kõhuproov

Ülesanne töötab.

suupiste serveerida

npm i gulp-sass --save-dev

Sassi kompileerimine css-iks
Eesliidete lisamine
Faili salvestamine src/css-i

Ülesande loomine suupistega

Järeldus.

https://gulpjs.com/plugins/

Avage terminal ja minge projektiga kausta. Esimene asi, mida peame tegema, on npm lähtestamine, käivitage käsk:

npm init

Sa vajad:

Määrake projekti nimi
Projekti versioon
Projekti kirjeldus
sisenemispunkt
meeskond
Giti hoidla
Märksõnad
Autori nimi
Litsents

Kõik saab vaikimisi jätta (kui te ei soovi projekti üles laadida üldine juurdepääs)

Seejärel kinnitame sisestatud teabe.

Hästi. NPM initsialiseeritud. Nüüd on fail packages.json ilmunud juurfaili – paketihalduri konfiguratsioonifaili.

Nüüd saame gulpi paigaldada. Kõigepealt peate selle installima globaalselt ja seejärel projekti jaoks. Globaalseks installimiseks käivitage järgmine käsk:

npm i –g gulp

Nüüd installime projekti jaoks gulpi:

npm install --save-dev gulp

Paigaldatud on kogu projekti jaoks vajalik suutäis.

Kontrollime. Loome faili gulpfile.js ja loome sellesse ühe testülesande, mis kuvab konsoolis "Ma töötan".

var gulp = nõuda("gulp"); gulp.task("test", function() ( console.log("Ma töötan"); ));

Esiteks lisame gulpi ja teiseks kutsume välja gulpi ülesande funktsiooni, millel on kaks parameetrit:

Ülesande nimi
anonüümne funktsioon mis kirjeldab meie ülesannet

Nüüd käivitage konsoolis järgmine käsk

kõhuproov

Ülesanne töötab.

Nüüd installime ja lubame pakette, mis aitavad paigutust.

Browsersync, pakett, mis võimaldab failide muutumisel lehte automaatselt värskendada

Konsooli installimiseks käivitage järgmine käsk:

npm i browser-sync --save-dev

Nüüd loome ülesande, mis käivitab brauseri sünkroonimise ja jälgib failimuudatusi.

Gulp.task("server", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/css/*.css")on("change ", browserSync.reload); gulp.watch("src/*.html").on("muuda", browserSync.reload); ));

Ülesannet nimetatakse teenindamiseks. Ja brauseri sünkroonimine värskendab brauseri lehte automaatselt, kui css-failid (asuvad src/css-kaustas) ja html-failid (asuvad src-kaustas) on muutunud.

Selle ülesande käivitamiseks käivitage käsk

suupiste serveerida

Paigutamisel kasutan sassi. Seetõttu kasutan sassist css-iks kompileerimiseks paketti gulp-sass.

Gulp-sassi paigaldamine ja konfigureerimine

Gulp-sassi installimiseks konsooli käivitage käsk:

npm i gulp-sass --save-dev

Nüüd loome sassi ülesande, mis kompileerib sassi css-iks. Ja muutke serveerimisülesannet nii, et meie brauseri sünkroonimine kuulaks selle asemel css-fail sass.

var gulp = nõuda("gulp"); var browserSync = nõuda("browser-sync").create(); var sass = nõuda("gulp-sass"); gulp.task("server", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("muuda", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("viga", sass.logError)) .pipe(gulp. dest("src/css")) .pipe(browserSync.stream()); ));

Nüüd, kui käivitate serveerimisülesande, käivitub ka sas-ülesanne.

Gulp-autoprefixeri installimine ja konfigureerimine

Gulp-autoprefixeri installimiseks käivitage käsk:

npm i gulp-autoprefixer --save-dev

Ja lisage sassi ülesandele eesliide.

var gulp = nõuda("gulp"); var browserSync = nõuda("browser-sync").create(); var sass = nõuda("gulp-sass"); var autoprefixer = nõuda("gulp-autoprefixer"); gulp.task("server", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("muuda", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("viga", sass.logError)) .pipe(autoprefixer( ( brauserid: ["viimased 2 versiooni"], kaskaad: false ))) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); ));

Nüüd, kui käivitate sass-ülesande, on c-l:

Sassi kompileerimine css-iks
Eesliidete lisamine
Faili salvestamine src/css-i

Järgmine pakett ühendab kõik css-failid üheks.

ContactCss installimine ja konfigureerimine

ContactCssi installimiseks kasutage järgmist käsku:

npm i gulp-concat-css --save-dev

Ja lisage selle paketi täitmine sassi ülesandele. (Ühendame kõik css-failid stiilis.css-is)

var gulp = nõuda("gulp"); var browserSync = nõuda("browser-sync").create(); var sass = nõuda("gulp-sass"); var autoprefixer = nõuda("gulp-autoprefixer"); var concatCss = nõuda("gulp-concat-css"); gulp.task("server", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("muuda", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("viga", sass.logError)) .pipe(autoprefixer( ( brauserid: ["viimased 2 versiooni"], kaskaad: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( )); ));

Hästi. Nüüd lisame paketi, mis nimetab faile ümber. (Me vajame seda, koodi minimeerime css- ja js-failid)

Gulp-rename installimine ja konfigureerimine

Gulp-rename installimiseks käivitage järgmine käsk:

npm i gulp-rename --save-dev

Praegu me seda paketti ühelegi ülesandele ei lisa.

CSS-failide minimeerimiseks paketi installimine ja konfigureerimine - clean-css

Clean-css-i installimiseks käivitage järgmine käsk:

npm i gulp-clean-css --save-dev

Nüüd loome mincss-i ülesande, mis lisab failinimele järelliite ".min", minimeerib css-faili ja salvestab selle rakendusse/css-i

var gulp = nõuda("gulp"); var browserSync = nõuda("browser-sync").create(); var sass = nõuda("gulp-sass"); var autoprefixer = nõuda("gulp-autoprefixer"); var concatCss = nõuda("gulp-concat-css"); var cleanCSS = nõuda("gulp-clean-css"); var rename = nõuda("gulp-rename"); gulp.task("server", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("muuda", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("viga", sass.logError)) .pipe(autoprefixer( ( brauserid: ["viimased 2 versiooni"], kaskaad: 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((liide: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); ))

Suurepärane, installime paketi gulp, mis vähendab js-faile.

Paketi gulp installimine ja konfigureerimine js-failide minimeerimiseks --gulp-uglify

Gulp-uglify installimiseks käivitage järgmine käsk:

npm i gulp-uglify --save-dev

Nüüd loome ülesande, mis lisab failile järelliite ".min", minimeerib js-faili ja salvestab selle rakendusse app/js

var gulp = nõuda("gulp"); var browserSync = nõuda("browser-sync").create(); var sass = nõuda("gulp-sass"); var autoprefixer = nõuda("gulp-autoprefixer"); var concatCss = nõuda("gulp-concat-css"); var cleanCSS = nõuda("gulp-clean-css"); var rename = nõuda("gulp-rename"); var uglify = nõudma("gulp-uglify"); gulp.task("server", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("muuda", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("viga", sass.logError)) .pipe(autoprefixer( ( brauserid: ["viimased 2 versiooni"], kaskaad: 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((liide: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); )) gulp.task("minjs", function() ( return gulp.src("src/js/*.js") .pipe(rename((liide : ".min"))) .pipe(uglify()) .pipe(gulp.dest("app/js")); ))

Oleme koostanud peamised ülesanded. Kuid kaks viimast tuleb teostada projekti tootmisse panemisel. Ja neid tuleb teha koos. Loome ülesande, mis käivitab ülesande mincss ja seejärel minjs

Ülesande loomine suupistega

Loome min-ülesande, mis käivitab mincss- ja minjs-ülesanded

var gulp = nõuda("gulp"); var browserSync = nõuda("browser-sync").create(); var sass = nõuda("gulp-sass"); var autoprefixer = nõuda("gulp-autoprefixer"); var concatCss = nõuda("gulp-concat-css"); var cleanCSS = nõuda("gulp-clean-css"); var rename = nõuda("gulp-rename"); var uglify = nõudma("gulp-uglify"); gulp.task("server", ["sass"], function() ( browserSync.init(( server: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("muuda", browserSync.reload); )); gulp.task("sass", function() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("viga", sass.logError)) .pipe(autoprefixer( ( brauserid: ["viimased 2 versiooni"], kaskaad: 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((liide: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); )) gulp.task("minjs", function() ( return gulp.src("src/js/*.js") .pipe(rename((liide : ".min"))) .pipe(uglify()) .pipe(gulp.dest("app/js")); )) gulp.task("min",["mincss", "minjs"]) ;

Kõik. Määrame ka vaikeülesande.