Gulp instalēšana ir diezgan vienkārša. Vispirms instalējiet Gulp pakotni globāli:

npm instalēt -g gulp

Pēc tam instalējiet to savā projektā:

npm install --save-dev gulp

Izmantojot Gulp

Izveidosim Gulp uzdevumu, lai samazinātu kādu no mūsu JavaScript failiem. Izveidojiet failu ar nosaukumu gulpfile.js. Tas definēs jūsu uzdevumus, kas tiek izpildīti ar komandu gulp.

Pievienojiet failam gulpfile.js šādas komandas:

Var gulp = prasīt("gulp"), uglify = prasīt("gulp-uglify"); gulp.task("samazināt", funkcija () ( gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("build")) ));

Instalējiet gulp-uglify, izmantojot npm, palaižot npm install --save-dev gulp-uglify un pēc tam palaidiet uzdevumu, izmantojot gulp minify . Pieņemsim, ka jums mapē js ir fails app.js. Būvmapē tiks izveidots jauns app.js, kurā būs saspiesta js/app.js versija.

Kas te īsti notiek?

Mēs veicam dažas darbības savā gulpfile.js failā. Pirmkārt, mēs ielādējam gulp un gulp-uglify moduļus:

Var gulp = prasīt("gulp"), uglify = prasīt("gulp-uglify");

Pēc tam mēs definējam uzdevumu ar nosaukumu minimizēšana, kas, palaižot, izsauc funkciju, kas norādīta kā otrais arguments:

Gulp.task("samazināt", funkcija () ( ));

Visbeidzot, un šī ir visgrūtākā daļa, mēs definējam, kas jādara mūsu uzdevumam:

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

Ja neesat pazīstams ar pavedieniem un vairums priekšgala izstrādātāju to nepārzina, iepriekš minētais kods jums neko nepateiks.

straumes

Straumes ļauj dažiem datiem iziet cauri virknei parasti mazu funkciju, kas modificē datus un pēc tam nodod tos nākamajai funkcijai.

Iepriekš minētajā piemērā funkcija gulp.src() ņem virkni, kas atbilst failam vai failu kopai, un izveido objektu straumi, kas pārstāv šos failus. Pēc tam tie nonāk (vai ieplūst) funkcijā uglify(), kas ņem faila objektus un atgriež jaunus faila objektus ar samazinātu avotu. Šis rezultāts pēc tam ieplūst funkcijā gulp.dest(), kas saglabā modificētos failus.

Lūk, kas notiek diagrammas formā:

Ja ir tikai viens uzdevums, funkcija nedara neko. Tomēr ņemiet vērā šādu kodu:

Gulp.task("js", funkcija () ( return gulp.src("js/*.js") .pipe(jshint()) .pipe(jshint.reporter("noklusējums")) .pipe(uglify() ) .pipe(concat("app.js")) .pipe(gulp.dest("build")); ));

Lai to palaistu pats, instalējiet gulp, gulp-jshint, gulp-uglify un gulp-concat.

Šis uzdevums aizņem visus failus, kas atbilst js/*.js (citiem vārdiem sakot, visi JavaScript faili no mapes js), palaiž tajos JSHint, izvada atskaiti, samazina katru failu un pēc tam tos savieno, saglabājot failā build/app.js. Diagrammas formā:

Ja esat pazīstams ar Grunt, pamanīsit, ka tas ievērojami atšķiras no tā, kā Grunt darbojas. Grunts neizmanto pavedienus. Tā vietā tas aizņem failus, palaiž vienu uzdevumu katram failam un saglabā jaunos failos, atkārtojot visu procesu katram uzdevumam. Daudzu failu sistēmu piekļuves rezultātā Grunt darbojas lēnāk nekā Gulp.

Lai labāk izprastu straumes, izlasiet Straumes rokasgrāmatu.

gulp.src()

Funkcija gulp.src() aizņem vienu vai vairākus failus vai masīvu un atgriež straumi, ko var nodot spraudņiem.

Pārējie divi spraudņi ir skaidrāki: funkcija uglify () samazina kodu, un funkcija concat ("app.js") apvieno visus failus vienā app.js.

gulp-load-plugin

Modulis, kas man šķiet diezgan noderīgs, tiek saukts par gulp-load-plugins, kas automātiski ielādē visus Gulp spraudņus no faila package.json un pievieno tos objektam. Galvenais pielietojums ir šāds:

Var gulpLoadPlugins = prasīt("gulp-load-plugins"), spraudņi = gulpLoadPlugins();

Jūs varat rakstīt visu vienā rindā ( var spraudņi = prasīt("gulp-load-plugins")();), bet es neesmu liels vienas līnijas cienītājs.

Pēc šī koda palaišanas spraudņu objekts saturēs jūsu spraudņus ar CamelCase stila nosaukumiem (piemēram, gulp-ruby-sass tiks ielādēts kā plugins.rubySass ). Jūs varat tos izmantot parastajā veidā. Piemēram, mūsu js uzdevums tiks saīsināts šādi:

Var gulp = prasīt("gulp"), gulpLoadPlugins = prasīt("gulp-load-plugins"), spraudņi = gulpLoadPlugins(); gulp.task("js", funkcija () ( return gulp.src("js/*.js") .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter("noklusējums")) .pipe (plugins.uglify()) .pipe(plugins.concat("app.js")) .pipe(gulp.dest("build")); ));

Pievienots fails package.json, kas satur kaut ko līdzīgu:

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

Šis piemērs patiesībā nav daudz īsāks. Tomēr lieliem un sarežģītiem Gulp failiem tas samazinās failu augšupielādes bloku līdz vienai vai divām rindām.

Marta sākumā izdotā gulp-load-plugin versija 0.4.0 pievienoja spraudņa slinku ielādi, kas uzlabo veiktspēju. Spraudņi netiek ielādēti, kamēr tie netiek izsaukti, kas nozīmē, ka jums nav jāuztraucas par to, ka failā package.json neizmantotie spraudņi ietekmē veiktspēju (lai gan, iespējams, tie tomēr ir jānoņem). Citiem vārdiem sakot, ja izpildāt uzdevumu, kuram nepieciešami tikai divi spraudņi, tas neielādēs visus spraudņus, kas nepieciešami citiem uzdevumiem.

Failu izsekošana

Gulp ir iespēja skatīt izmaiņas failos un izpildīt uzdevumu vai uzdevumus, kad tiek konstatētas izmaiņas. Šī funkcija ir pārsteidzoši noderīga (iespējams, viena no Gulp noderīgākajām man). Varat saglabāt Less failu, un Gulp to pārvērtīs par CSS un atjauninās pārlūkprogrammu, neveicot nekādas darbības no jūsu puses.

Lai skatītu failu vai failus, izmantojiet funkciju gulp.watch(), kas izmanto failu modeli vai to masīvu (piemēram, gulp.src() ), vai uzdevumu masīvu, lai tos palaistu vai veiktu atzvanīšanu. funkcija.

Pieņemsim, ka mums ir izveides uzdevums, kas pārvērš mūsu veidņu failus HTML formātā, un mēs vēlamies definēt skatīšanās uzdevumu, kas novēro veidņu izmaiņas un izpilda uzdevumu, lai tās pārveidotu par HTML. Mēs varam izmantot pulksteņa funkciju šādi:

Gulp.task("skatīties", funkcija () ( gulp.watch("veidnes/*.tmpl.html", ["būvēt"]); ));

Tagad, kad tiek mainīts veidnes fails, tiks palaists veidošanas uzdevums, kas ģenerēs HTML.

Varat arī dot pulksteņa atzvanīšanu, nevis uzdevumu masīvu. Šajā gadījumā funkcija saņem notikuma objektu, kurā ir informācija par notikumu, kas izsauca funkciju:

Gulp.watch("templates/*.tmpl.html", funkcija (event) ( console.log("Notikuma veids: " + event.type); // pievienots, mainīts vai noņemts console.log("Notikuma ceļš: " + event.path); // faila ceļš ));

Cits atšķirīga iezīme gulp.watch() ir tas, ka tas atgriež novērotāju . Izmantojiet to, lai klausītos papildu notikumus vai pievienotu failus, ko skatīties. Piemēram, lai vienlaikus palaistu uzdevumu sarakstu un izsauktu funkciju, varat pievienot uztvērēju izmaiņu notikumam, kad novērotājs atgriežas:

Var watcher = gulp.watch("veidnes/*.tmpl.html", ["būvēt"]); watcher.on("mainīt", funkcija (notikums) ( console.log("Notikuma veids: " + event.type); // pievienots, mainīts vai noņemts console.log("Notikuma ceļš: " + event.path) ; // ceļš uz failu ));

Papildus izmaiņu notikumam varat klausīties vairākus citus notikumus:

• beigas
  Aktivizējas, kad beidzas novērotājs (tas nozīmē, ka uzdevumi un atzvani vairs netiks izsaukti, mainoties failiem).
• kļūda
  Aizdegas, kad rodas kļūda.
• gatavs
  Aktivizējas, kad faili ir atrasti un ir gatavi izsekošanai.
• nav sakritības
  Aktivizējas, ja neviens fails neatbilst pieprasījumam.

Vērotāja objektā ir arī dažas metodes, kuras var izsaukt:

• watcher.end()
  Aptur novērotāju (vairs netiks izsaukts neviens uzdevums vai atzvanīšana).
• watcher.files()
  Atgriež skatītāja skatīto failu sarakstu.
• watcher.add(glob)
  Vērotājam pievieno failus, kas atbilst norādītajam globusa modelim (kā otro argumentu pieņem arī izvēles atzvanīšanas funkciju).
• watcher.remove(faila ceļš)
  Noņem norādīto failu no skatītāja.

Sveiki visiem. Ja esat kaut kādā veidā saistīts ar JS, droši vien esat dzirdējuši par tādu lietojumprogrammu kā gulp . Un varbūt pat lietots. No savas pieredzes varu teikt, ka var būt grūti “iedziļināties”, kā ar viņu strādāt, lai gan izpratnes atslēga slēpjas virspusē. Tāpēc publicēju šo materiālu, cerot, ka tas noderēs.

Tāpat, pamatojoties uz šo materiālu, tika uzņemts video, lai jūs varētu izvēlēties, kādā formā patērēt.

Ja salīdzina rīstīšanu ar citām populārām konstrukcijas sistēmām, tas ir kā salīdzināt gatavu kvadrokopteru “pērc un lido” tipa un komplektu pašmontāža drons. Jā, tu pacelsies tikai nākamajā dienā, bet tev ir lielāka elastība un kontrole tavās rokās, it īpaši, ja tev ir nestandarta uzdevums.

Patiesībā pēc iebraukšanas sliekšņa pārvarēšanas rīstīšanās neizskatās nemaz tik sarežģīta un brīžiem pat saprotama un loģiska. Bet bez pienācīgas sagatavošanās var būt grūti nonākt šādā stāvoklī. Iedziļināsimies tajā un redzēsim, uz kādiem principiem gulp ir veidots.

Ejam no tālienes. Nodejs ekosistēmā ir tāda lieta kā straumes vai straume. Tulkošanas sarežģītības dēļ pavedienus sauc arī par daudzpavedienu programmas pavedieniem. Mūsu gadījumā straume ir objekts, kas attēlo straumēšanas datus, un tas ir pilnīgi atšķirīgs jēdziens.

Tātad šīs straumes piedāvā lietotājam draudzīgs interfeiss asinhronam darbam ar datiem. Visu lasīšanas/rakstīšanas procesu apstrādā mezgla dzinējs, un mums ir tikai attiecīgie atzvani, kad parādījās jauns datu fragments, kad radās kļūda, kad straume beidzās utt. Tādā veidā I/O efektivitāte tiek panākta ar minimālu programmētāja piepūli.

Const fs = prasīt("fs"); const ievade = fs.createReadStream("mans fails"); input.on("dati", (gabals) => ( konsole.log(gabals); )); input.on("beigas", () => ( console.log("fails tiek lasīts"); ));
Nodejs straumes var būt gandrīz jebkas, sākot no failiem vai virknēm līdz ligzdām. Piemēram, slavenajā Express sistēmā HTTP pieprasījums un atbilde ir nekas cits kā plūsmas. Straumes var būt tikai lasāmas, rakstāmas vai abas.

Straumēm ir viena noderīga funkcija: tos var sakraut kopā ķēdē, ko sauc par cauruli. Tādējādi mēs varam apvienot vairākus pavedienus savā starpā un pārvaldīt tos kā vienu. Vienas straumes izvade tiek ievadīta nākamajā un tā tālāk līdz beigām. Kā jūs varat uzminēt pēc vārda caurules tulkojuma, tas ir ļoti līdzīgs cauruļvadam.

Tas ļauj noteikt vēlamo datu plūsmu (atkal tulkojuma sarežģītību. Šeit mēs domājam plūsmu vai plūsmu) tieši šeit un tagad, negaidot, kamēr dati kļūs pieejami.

Piemēram, šādi mēs varam noteikt, ko rezultātā vēlamies dot, un pats dzinējs jau nodarbojas ar “kā” dot.

Const fs = prasīt("fs"); const izteikt = prasīt ("izteikt"); var app = express(); app.get("/", funkcija (req, res) ( fs.createReadStream("mans fails") .pipe(res; )); app.listen(3000);
Ņemiet vērā, ka pieprasījumu apstrādātājs pabeidz pirms faila atvēršanas — mezgla dzinējs parūpējas par pārējo.

Gulp ir veidota pēc līdzīgas pieejas. Tā ir tā priekšrocība, bet arī trūkums. Par trūkumu var saukt vismaz radušos apjukumu, jo gulp izmanto citas līdzīgas, bet nesaderīgas straumes. Gulp cieši sadarbojas ar failu sistēma, tāpēc tas izmanto straumes, kas atspoguļo ne tik daudz datu straumi, cik individuālus datus virtuālie faili, katrs ar savu saturu.

Ja esat kādreiz dzirdējis par vinilu, tad gulp izmanto tieši šo straumju ieviešanu. Ja paņemam gallp standarta uzdevumu un paskatāmies, kas ir iekšā, mēs atklāsim, ka katram datu notikuma izsaukumam pie mums nonāk faila objekts, kurā ir visa nepieciešamā informācija: faila nosaukums, ceļš uz failu, darba direktoriju un, protams, tā saturu.

Const gulp = prasīt("gulp"); gulp.task("noklusējums", funkcija() ( gulp.src("./*.js") .on("data", funkcija(fails) ( console.log("datu atzvanīšana"); console.log( file.inspect()); /* Tas izvada: * datu atzvanīšanu * > * datu atzvanīšana * > */ )) .pipe(gulp.dest("dist/")); ));
Saturu var parādīt divos formātos: kā jau nolasītu buferi vai kā vietējā mezgla straumi. Katrs Galpova caurules posms ņem šādus failus kā ievadi, veic sava veida transformācijas un pārsūta to uz nākamo ķēdi izejā. Pēdējā ķēde parasti tos vienkārši saglabā diskā.

Caurule(gulp.dest("dist/"));
Apzinoties, ka pavedieni ir atšķirīgi, rodas apgaismība un izpratne, jo tas izskaidro lielāko daļu problēmu un kļūdu.

Apsveriet reāls piemērs. Jūs vēlaties izmantot pārlūkprogrammu, lai savienotu savus JS failus. Jūs ejat un atrodat spraudni gulp-browserify. Bet jūs redzat postscript, kurā teikts, ka spraudnis ir novecojis, t.i. Novecojis.

Kā labi audzināts programmētājs jūs noraidāt šo iespēju un meklējat, kurš risinājums nav novecojis. Atrodiet oficiālās gurķu receptes un pārbaudiet, vai pārlūkprogramma darbojas tieši ar rāvienu. Nu, kā tieši, caur starpslāni, kas tikai pārvērš vietējo mezglu straumi vinila straumē, ko gulp saprot. Bez tā nekas nedarbotos, jo tie ir dažādi pavedieni.

Ja vēlaties uzrakstīt savu transformāciju, varat izmantot šo veidni.
Kā redzat, šeit viss ir vienkārši: katram failam tiks izsaukts mūsu apstrādātājs, kurš veiks modifikācijas. Mēs varam darīt visu, ko vēlamies: mainīt faila saturu, pārdēvēt failu, dzēst failu vai pievienot straumei vēl pāris jaunus failus.

Kā mēs atceramies, faila saturu vinila straumē var attēlot kā buferi vai kā datu straumi. Tomēr nav nepieciešams atbalstīt abus. Jūs vienmēr varat izmantot iepakojumu

Sveiki visiem! Šajā rakstā mēs izveidosim savu projektu, inicializēsim manifesta failu un instalēsim rāviens lokāli.

Vispirms jāsaka, ka ceļam uz mapi (ieskaitot datora lietotājvārdu) ir jābūt ieslēgtam angļu valoda, pretējā gadījumā, lietojot, var rasties kļūdas rāviens. Es izveidoju mapi Projekti, kurā veidošu visus savus projektus. Piemēram, es nosaukšu mūsu projektu pirmais Projekts.

Tātad, pēdējā rakstā mēs iestatījām rāviens globāli, tagad mums tas ir jāinstalē lokāli. Pirmkārt, mēs veiksim inicializāciju. Terminālī ierakstiet šādu komandu:

cd ceļš uz_jūsu_projektu (cd "lietotājs/projekti/pirmais projekts")
npm init

Ar šo komandu mēs izveidosim sava projekta pamata manifesta failu. Principā tur viss ir skaidrs, tāpēc nepaskaidrošu. Ja nevēlaties apgrūtināt visus šos iestatījumus, vienkārši nospiediet visu laiku ievadiet, jo mums vajag šo failu citam, sākotnējie iestatījumi nav tik svarīgi.

Ja visu izdarījāt pareizi, projekta mapē vajadzētu parādīties failam pack.json. Atverot to, redzēsit, ka tur tiek saglabāta visa informācija, ko ievadījāt (vai neievadījāt) inicializācijas laikā. Turklāt failā tiek glabāta informācija par izmantotajām pakotnēm, un tieši tas mums ir nepieciešams. Ja pastāvīgi izmantojat, piemēram, bibliotēku jQuery, tad varat to ierakstīt šajā failā, un tas tiks automātiski lejupielādēts, uzsākot jaunu projektu.

Tagad instalēsim rāviens lokāli mūsu mapē.

npm i gulp --save-dev

Karogs --save-dev nepieciešams iepakojumam rāviens un tā versija tiek automātiski ierakstīta failā pack.json. Ja atvērsit šo failu pēc veiksmīgas pakotnes instalēšanas, redzēsit, ka tajā parādās:

"Dependencies" :(
"gulp": "^3.9.1"
}

Es domāju, ka ir skaidrs, ka šeit ir rakstīts pakotnes nosaukums un tā versija. Uz augšu vērsta bultiņa norāda, ka šī pakotne ir jaunināma. Mums ir arī mape node_modules kur tagad glabājas rāviens un visas tās atkarības. Šeit tiks uzstādīti jauni moduļi.

Tātad šodienai tas arī viss. Mēs esam apsvēruši kā lokāli instalēt gulp uz projekta mapi un kāpēc jums ir nepieciešams manifests pack.json.

Lai paātrinātu priekšgala izstrādes procesu, mēs automatizējam dažus uzdevumus, izmantojot Gulp jaucējkrānu.
Lai to izdarītu, mums ir nepieciešams NPM pakotņu pārvaldnieks. Bet, lai instalētu NPM, vispirms ir jāinstalē Node.js.

1. darbība Instalējiet mezglu
Mēs ejam uz oficiālo vietni https://nodejs.org un lejupielādējam ieteicamo versiju.

Palaidiet instalētāju ar administratora tiesībām.
Pēc instalēšanas parādīsies 2 ikonas: Node.js un Node.js coomand uzvedne. Tie mums nebūs noderīgi, jo mēs neizmantojam Node.js, un konsoles palaišanai ir ērtākas iespējas:
1. Izmantojiet komandu konsoli TotalCommander (Komandas — atvērt komandu konsoli).
2. Turiet nospiestu taustiņu Shift un ar peles labo pogu noklikšķiniet, lai atvērtu konteksta izvēlne. Tas parādīs vienumu "Atvērt komandu logu".
Labāk ir palaist komandrindu no vajadzīgā projekta direktorija, konsole nekavējoties parādīs ceļu uz vēlamo direktoriju, tas novērsīs nepieciešamību manuāli ievadīt ceļu.

Lai pārbaudītu mezglu un npm versijas, ierakstiet
node -v un nospiediet taustiņu Enter
tad npm -v

Lai instalētu jaunāko versiju, NPM versijas parasti tiek atjauninātas biežāk nekā mezglu versijas.
npm instalēšana [aizsargāts ar e-pastu]-g

npm komandas, kas mums ir vajadzīgas :
npm saraksts- visu saraksts instalētās pakotnes
npm -g ls --dziļums=0- globāli instalēto pakotņu saraksts
npm publicēts pārbaudiet, vai iepakojumi nav novecojuši
npm update gulp- spraudņu versiju atjaunināšana
npm init- izveidot pakotni.json
npm instalējiet pakotnes_nosaukums- instalējiet pakotni (package_name - vēlamās pakotnes nosaukums)
npm instalēt pakotnes_nosaukums --save-dev- instalējiet pakotni un ierakstiet par to paketes.json sadaļā devDependencies
npm atinstalēšana pakotnes_nosaukums- iepakojuma izņemšana
npm instalēšana- instalējiet visas pakotnes, kas norādītas failā package.json
Pirms nonākšanas ražošanā npm saraušanās plēve- izlabojiet pakotņu versijas, tagad npm install tās instalēs un būsiet pārliecināts, ka viss darbosies kā nākas

Saīsinājumi
-v: --versija
-g: --globāls
-S: --saglabāt
-D: --save-dev
-y: - jā
-n: --jā, nepatiesi

2. solis Gulp uzstādīšana
Pirmais malks ir jāinstalē globāli.

Mēs sākam komandu konsoli.
Dažreiz, piemēram, uz dažiem resursiem komandas priekšā ir dolāra zīme
$ npm instalēt --global gulp-cli

Nekopējiet dolāra zīmi, ielīmējiet tikai pašu komandu
npm install --global gulp-cli

Padoms: lai ielīmētu nokopēto tekstu komandrinda, atveriet komandrindu, nospiediet ALT + SPACE -> Noklusējuma vērtības, atzīmējiet izvēles rūtiņu Atlasīt ar peli. Tagad jūs varat atlasīt tekstu ar peli, kopēt, com. ar peles labo pogu noklikšķiniet uz līnijas - teksts tiks ievietots automātiski.

3. solis. Darbs ar gulp konkrētā projektā

3.1 Vispirms izveidosim atkarības pakotni package.json
Failā package.json ir informācija, ko ievadīsim terminālī, un visu projektā izmantojamo pakotņu saraksts.

Instalējot pakotni ar atslēgu --save-dev, pakotne tiek automātiski pievienota failam package.json. Lai neinstalētu visas pakotnes manuāli katrā jaunajā projektā, mēs izmantosim gatavo pack.json ar mums nepieciešamajiem moduļiem un atkarībām, ievietojot to mūsu projekta saknē.

Package.json tiek ģenerēts, izmantojot komandu npm init, kas izdrukās dažus jautājumus konsolei, lai izveidotu failu.
Nosaukuma vienums pēc noklusējuma parāda jūsu projekta direktorijas nosaukumu.

Padoms:
Varat ģenerēt šo failu ātrāk un vienkāršāk, izmantojot opciju --yes (automātiski atbildiet jā uz visiem jautājumiem):
npm init — jā

Labi zināt:
Varat iestatīt noklusējuma vērtības, kas tiks izmantotas katru reizi, kad palaižat npm init, tādējādi ietaupot laiku. Pēc instalēšanas tie tiek saglabāti .npmrc failos.
Piemēram:
npm konfigurācijas komplekts init.author.name "Valentīna Vladova"
npm konfigurācijas iestatījums init.author.email" [aizsargāts ar e-pastu]"
npm konfigurācijas komplekts init.author.url "http://simpalmarket.com/"
npm set init-license MIT
npm iestatīta init versija 0.0.0
Pēc tam palaidiet npm init, visas norādītās vērtības tiks ievilktas atbilstošajos mainīgajos.

Kad npm init pieprasa git repo, īsi ierakstiet user/repo — npm ir pietiekami gudrs, lai paplašinātu rindu vietnē https://github.com/user/repo. npm arī ģenerēs repozitoriju, kļūdas un mājaslapas laukus pareizajā formātā.

Tātad, dodieties uz projekta saknes mapi, izsauciet komandu konsoli un ierakstiet
npm init — jā

Projekta saknē tiks parādīts fails package.json ar kaut ko līdzīgu šim

3.2 Instalējiet gulp lokāli
Konsoles projekta mapē ievadiet:
npm install --save-dev gulp

vai saīsināti
npm i gulp --save-dev

Saraksts būs Brīdināt - ignorēt.

Lai pārbaudītu versiju, izmantojiet komandu
gulp -- versija

Mape node_modules parādījās projekta saknes direktorijā. Visi moduļi un atkarības, ko mēs instalēsim projektā, tiks automātiski ielādēti tajā. Var būt daudz mapju ar atkarībām, pat ja nav instalēts tik daudz pakotņu. Tas ir saistīts ar faktu, ka papildus galvenajām pakotnēm tiek instalētas programmas, kas nepieciešamas galvenās pakotnes pareizai darbībai. Jums nekas nav jātīra vai jāizdzēš no mapes node_modules.

Failam package.json tiks pievienots ieraksts
"Dependencies" :(
"gulp": "^3.9.1"
}

Tagad jūs varat instalēt dažādus spraudņus, lai rītu.
http://gulpjs.com/plugins/
Meklēšanas laukā ievadiet jūs interesējošā spraudņa nosaukumu.

Spraudņus var instalēt pa vienam, piemēram:
npm install --save-dev gulp-santehniķis
kā arī sarakstu, kas atdalīts ar atstarpi, piemēram:
npm instalēt gulp-sass gulp-plumber gulp-autoprefixer gulp-minify-css --save-dev
Instalēšanas spraudņus un montāžas spraudņus vislabāk instalēt ar atsevišķām komandām

npm init

Jums būs nepieciešams:

• Norādiet projekta nosaukumu
• Projekta versija
• Projekta apraksts
• Ieejas punkts
• komanda
• Git repozitorijs
• Atslēgvārdi
• Autora vārds
• Licence

npm i –g gulp

• Uzdevuma nosaukums

rīšanas tests

Uzdevums darbojas.

malks kalpot

npm i gulp-sass --save-dev

1. Sass kompilēšana uz css
2. Prefiksu pievienošana
3. Faila saglabāšana mapē src/css

Uzdevuma izveide ar rāvienu

Secinājums.

https://gulpjs.com/plugins/

Atveriet termināli un dodieties uz mapi ar projektu. Pirmā lieta, kas mums jādara, ir inicializēt npm, lai to izdarītu, palaidiet komandu:

npm init

Jums būs nepieciešams:

• Norādiet projekta nosaukumu
• Projekta versija
• Projekta apraksts
• Ieejas punkts
• komanda
• Git repozitorijs
• Atslēgvārdi
• Autora vārds
• Licence

Visu var atstāt pēc noklusējuma (ja nevēlaties augšupielādēt projektu uz vispārēja piekļuve)

Pēc tam mēs apstiprinām ievadīto informāciju.

Labi. NPM inicializēts. Tagad fails packages.json ir parādījies saknē - pakotņu pārvaldnieka konfigurācijas failā.

Tagad mēs varam instalēt gulp. Vispirms tas jāinstalē globāli un pēc tam projektam. Lai instalētu globāli, palaidiet šādu komandu:

npm i –g gulp

Tagad instalēsim gulp projektam:

npm install --save-dev gulp

Ir uzstādīts viss projektam paredzēts.

Pārbaudīsim. Izveidosim gulpfile.js failu un tajā izveidosim vienu testa uzdevumu, kas konsolē parādīs "Es strādāju".

var gulp = prasīt("gulp"); gulp.task("pārbaude", funkcija() ( console.log("Es strādāju"); ));

Pirmkārt, mēs iekļaujam gulp, un, otrkārt, mēs izsaucam gulp's uzdevuma funkciju, kurai ir divi parametri:

• Uzdevuma nosaukums
• anonīma funkcija kas apraksta mūsu uzdevumu

Tagad konsolē palaidiet šādu komandu

rīšanas tests

Uzdevums darbojas.

Tagad instalēsim un iespējosim pakotnes, kas palīdz izkārtojumā.

Browsersync — pakotne, kas ļauj automātiski atjaunināt lapu, kad faili mainās

Lai instalētu konsolē, palaidiet šādu komandu:

npm i browser-sync --save-dev

Tagad izveidosim uzdevumu, kas palaist pārlūkprogrammas sinhronizāciju un uzraudzīs failu izmaiņas.

Gulp.task("serve", ["sass"], function() ( browserSync.init(( serveris: "src/" )); gulp.watch("src/css/*.css")on("mainīt ", browserSync.reload); gulp.watch("src/*.html").on("mainīt", browserSync.reload); ));

Uzdevumu sauc par kalpošanu. Un pārlūkprogrammas sinhronizācija automātiski atjauninās pārlūkprogrammas lapu, ja ir mainījušies css faili (atrodas mapē src/css) un html faili (atrodas src mapē).

Lai sāktu šo uzdevumu, palaidiet komandu

malks kalpot

Izkārtojumam izmantoju sass. Tāpēc, lai kompilētu no sass uz css, es izmantoju paketi gulp-sass.

Gulp-sass instalēšana un konfigurēšana

Lai instalētu gulp-sass konsolē, palaidiet komandu:

npm i gulp-sass --save-dev

Tagad izveidosim sass uzdevumu, kas kompilēs sass uz css. Un mainiet apkalpošanas uzdevumu, lai mūsu pārlūkprogrammas sinhronizācija klausītos css fails sass.

var gulp = prasīt("gulp"); var browserSync = prasīt("browser-sync").create(); var sass = prasīt("gulp-sass"); gulp.task("serve", ["sass"], function() ( browserSync.init(( serveris: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("mainīt", browserSync.reload); )); gulp.task("sass", funkcija() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("kļūda", sass.logError)) .pipe(gulp. dest("src/css")) .pipe(browserSync.stream()); ));

Tagad, kad palaižat apkalpošanas uzdevumu, tiks izpildīts sass uzdevums.

Gulp-autoprefixer instalēšana un konfigurēšana

Lai instalētu gulp-autoprefixer, palaidiet komandu:

npm i gulp-autoprefixer --save-dev

Un pievienojiet prefiksu sas uzdevumam.

var gulp = prasīt("gulp"); var browserSync = prasīt("browser-sync").create(); var sass = prasīt("gulp-sass"); var autoprefixer = prasīt ("gulp-autoprefixer"); gulp.task("serve", ["sass"], function() ( browserSync.init(( serveris: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("mainīt", browserSync.reload); )); gulp.task("sass", funkcija() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("kļūda", sass.logError)) .pipe(autoprefixer( ( pārlūkprogrammas: ["pēdējās 2 versijas"], kaskāde: false ))) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); ));

Tagad, palaižot sass uzdevumu, c būs:

1. Sass kompilēšana uz css
2. Prefiksu pievienošana
3. Faila saglabāšana mapē src/css

Šī pakotne apvieno visus css failus vienā.

ContactCss instalēšana un konfigurēšana

Lai instalētu contactCss, izmantojiet šo komandu:

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

Un pievienojiet šīs pakotnes izpildi sass uzdevumam. (Mēs apvienosim visus css failus style.css)

var gulp = prasīt("gulp"); var browserSync = prasīt("browser-sync").create(); var sass = prasīt("gulp-sass"); var autoprefixer = prasīt ("gulp-autoprefixer"); var concatCss = prasīt ("gulp-concat-css"); gulp.task("serve", ["sass"], function() ( browserSync.init(( serveris: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("mainīt", browserSync.reload); )); gulp.task("sass", funkcija() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("kļūda", sass.logError)) .pipe(autoprefixer( ( pārlūkprogrammas: ["pēdējās 2 versijas"], kaskāde: false ))) .pipe(concatCss("style.css")) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream( )); ));

Labi. Tagad pievienosim pakotni, kas pārdēvē failus. (Mums tas būs nepieciešams, kodu mēs samazinām css un js failus)

Gulp-rename instalēšana un konfigurēšana

Lai instalētu gulp-rename, palaidiet šādu komandu:

npm i gulp-pārdēvēt --save-dev

Pagaidām mēs nepievienosim šo paketi nevienam uzdevumam.

Pakotnes instalēšana un konfigurēšana CSS failu samazināšanai - clean-css

Lai instalētu clean-css, palaidiet šādu komandu:

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

Tagad izveidosim mincss uzdevumu, kas faila nosaukumam pievienos sufiksu ".min", samazina css failu un saglabā to lietotnē/css

var gulp = prasīt("gulp"); var browserSync = prasīt("browser-sync").create(); var sass = prasīt("gulp-sass"); var autoprefixer = prasīt ("gulp-autoprefixer"); var concatCss = prasīt ("gulp-concat-css"); var cleanCSS = prasīt ("gulp-clean-css"); var pārdēvēt = prasīt ("gulp-pārdēvēt"); gulp.task("serve", ["sass"], function() ( browserSync.init(( serveris: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("mainīt", browserSync.reload); )); gulp.task("sass", funkcija() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("kļūda", sass.logError)) .pipe(autoprefixer( ( pārlūkprogrammas: ["pēdējās 2 versijas"], kaskāde: 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((sufikss: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); ))

Lieliski, instalēsim gulp pakotni, kas samazina js failus.

Gulp pakotnes instalēšana un konfigurēšana, lai samazinātu js failus --gulp-uglify

Lai instalētu gulp-uglify, palaidiet šādu komandu:

npm i gulp-uglify --save-dev

Tagad izveidosim uzdevumu, kas failam pievienos sufiksu ".min", samazina js failu un saglabās to app/js

var gulp = prasīt("gulp"); var browserSync = prasīt("browser-sync").create(); var sass = prasīt("gulp-sass"); var autoprefixer = prasīt ("gulp-autoprefixer"); var concatCss = prasīt ("gulp-concat-css"); var cleanCSS = prasīt ("gulp-clean-css"); var pārdēvēt = prasīt ("gulp-pārdēvēt"); var uglify = prasīt("gulp-uglify"); gulp.task("serve", ["sass"], function() ( browserSync.init(( serveris: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("mainīt", browserSync.reload); )); gulp.task("sass", funkcija() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("kļūda", sass.logError)) .pipe(autoprefixer( ( pārlūkprogrammas: ["pēdējās 2 versijas"], kaskāde: 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((sufikss: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); )) gulp.task("minjs", function() ( return gulp.src("src/js/*.js") .pipe(rename((sufikss) : ".min"))) .pipe(uglify()) .pipe(gulp.dest("app/js")); ))

Mēs esam izveidojuši galvenos uzdevumus. Bet pēdējie divi ir jāveic, nododot projektu ražošanā. Un tie ir jādara kopā. Izveidosim uzdevumu, kas izpildīs mincss uzdevumu un pēc tam minjs

Uzdevuma izveide ar rāvienu

Izveidosim min uzdevumu, kas izpildīs mincss un minjs uzdevumus

var gulp = prasīt("gulp"); var browserSync = prasīt("browser-sync").create(); var sass = prasīt("gulp-sass"); var autoprefixer = prasīt ("gulp-autoprefixer"); var concatCss = prasīt ("gulp-concat-css"); var cleanCSS = prasīt ("gulp-clean-css"); var pārdēvēt = prasīt ("gulp-pārdēvēt"); var uglify = prasīt("gulp-uglify"); gulp.task("serve", ["sass"], function() ( browserSync.init(( serveris: "src/" )); gulp.watch("src/sass/*.sass", ["sass" ]); gulp.watch("src/*.html").on("mainīt", browserSync.reload); )); gulp.task("sass", funkcija() ( return gulp.src("src/sass/*.sass") .pipe(sass().on("kļūda", sass.logError)) .pipe(autoprefixer( ( pārlūkprogrammas: ["pēdējās 2 versijas"], kaskāde: 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((sufikss: ".min"))) .pipe(cleanCSS()) . pipe(gulp.dest("app/css")); )) gulp.task("minjs", function() ( return gulp.src("src/js/*.js") .pipe(rename((sufikss) : ".min"))) .pipe(uglify()) .pipe(gulp.dest("app/js")); )) gulp.task("min",["mincss", "minjs"]) ;

Viss. Iestatīsim arī noklusējuma uzdevumu.

Notiek gulp noklusējuma uzdevuma iestatīšana

gulp.task("noklusējums", ["kalpo"]);

Secinājums.

Mēs esam apsvēruši, kam gulp ir paredzēts, kā to uzstādīt. Uzstādīts papildu paketes, kas nepieciešami izkārtojumam un izvirzītajiem uzdevumiem.

Jūs pats varat atrast nepieciešamās pakotnes vietnē https://gulpjs.com/plugins/ un tās instalēt. Un pēc tam izveidojiet uzdevumus, lai optimizētu izstrādes procesu.