Darba sākšana ar Gulp.js

Gulp ir Javascript balstīts rīks, kas ļauj automatizēt darbplūsmas bitus. Automatizācija var burtiski ietaupīt stundas dienā. Neatkarīgi no tā, vai esat attīstītājs vai dizainers, kurš tagad izveido HTML wireframes, tad es aicinu jūs ielokt.

Šajā rakstā mēs apskatīsim Gulp lietošanas pamatus - no instalācijas līdz pamata sintaksei un pāris piemēriem. Līdz raksta beigām jums vajadzētu būt iespējai atrodiet, instalējiet un izmantojiet paketes, ko citi ir izveidojuši Gulp lai apkopotu SASS, optimizētu attēlus, izveidotu sprites, sasaistītu failus un daudz ko citu!

Gulp instalēšana

Neuztraucieties, uzstādīšana ir ļoti vienkārša. Mums būs jāizmanto terminālis OSX un Linux, vai Windows komandrindas. Turpmāk es atsaucos uz to kā termināli.

Atveriet to uz augšu un ierakstiet npm -v un nospiediet enter. Ja redzat redzamo versijas numuru, jums jau ir uzstādīts mezgls - šī ir atkarība no Gulp.

Ja jums ir “komanda nav atrasta” (vai līdzīga kļūda), dodieties uz leju līdz Node.js lejupielādes lapai un izvēlieties atbilstošo paketi savai sistēmai. Pēc instalēšanas terminālā būs pieejama komanda npm.

Gulp instalēšana ir tikpat vienkārša. Ielīmējiet šādu komandu terminālī, tas ir:

npm uzstādīšana - glibāls

Tas instalēs Gulp komandu, kas būs pieejama jūsu sistēmā visā pasaulē.

Gulp To A pievienošana projektam

Gulp tagad ir instalēts, bet mums tas būs jāpievieno katram projektam, kuram tas ir nepieciešams, atsevišķi. Tagad izveidojiet tukšu mapi un navigējiet to savā terminālī. Kamēr atrodaties projekta mapē, izmantojiet šādu komandu:

npm instalēšana --save-dev gulp

Tam vajadzētu izveidot mapes node_modules un faila npm-debug.log failu savā mapē. Gulp to izmanto, lai to darītu jūsu projektā, un šajā posmā jums par tiem nav jādomā.

Iemesls, kāpēc mums jāpievieno Gulp katram konkrētam projektam, ir tas, ka katram projektam ir atšķirīgas prasības. Var pieprasīt SASS, citu - mazāk. Var izmantot Coffeescript, otru nevar, un tā tālāk.

Gulpfile

Gulpfile ir vieta, kur notiek maģija, tas ir, kur jūs definējat vajadzīgās automatizācijas un kad vēlaties, lai tie notiktu. Izveidosim tukšu noklusējuma uzdevumu, izveidojot nosaukumu gulpfile.js un ielīmējiet šādu kodu.

var gulp = pieprasīt (“gulp”); gulp.task ('noklusējuma' funkcija, funkcija () // Tas neko nedara, drīz mēs pievienosim funkcionalitāti);

Kad šis fails ir saglabāts, varat atgriezties savā terminālī un palaist gulp komandu. Gulp nosaka, kurā projektā tas atrodas, un vada noklusējuma uzdevumu - to, ko mēs tikko izveidojām. Jums vajadzētu redzēt kaut ko līdzīgu:

Nekas šeit nenotiek, jo uzdevums ir tukšs, bet tas darbojas labi. Tagad, ejam ar dažiem pareiziem piemēriem!

Faila kopēšana

Tas ir garlaicīgs, es atzīšu tik daudz, bet tas palīdzēs jums saprast, kas notiek viegli.

Projekta mapē izveidojiet nosaukumu to_copy.txt , un mapi ar nosaukumu dev. Ejam uz mūsu Gulpfile un izveidojiet jaunu uzdevumu kopiju.

gulp.task ('copy', funkcija () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

Pirmajā rindā definēts uzdevums, kas tiek nosaukts par kopiju. Šajā ietvaros mēs izmantojam gulp.src, lai norādītu, kuri faili, kuru mērķauditorijas atlase ir paredzēta šim uzdevumam, šajā gadījumā ir viens fails, kas nosaukts to_copy.txt.

Pēc tam mēs šos failus pārnesam uz funkciju gulp.dest, kas nosaka, kur mēs vēlamies ievietot šos failus - es esmu izmantojis dev direktoriju.

Dodieties atpakaļ uz savu terminālu un veidu gulp kopiju lai izpildītu šo uzdevumu, tam ir jāpārkopē norādītais fails norādītajā direktorijā, kas ir šāds:

Cauruļu komanda ir Gulp centrā. Tas ir efektīvs veids, kā pārvietot datus starp komandām. Komanda src norāda failus, kas tiek izvadīti uz dest komandu. Sarežģītākos scenārijos pirms galamērķa norādīšanas mēs caurskatām savus failus uz citām komandām.

Jums arī jāapzinās, ka avotu var sniegt kā vienu failu vai vairākus failus. Ja mums ir mape ar nosaukumu ražošanu un mēs vēlamies pārvietot visus failus no mūsu attīstību mēs varam izmantot šādu komandu:

gulp.task ('copy', funkcija () return gulp.src ('development / *') .pipe (gulp.dest ('production')););

Zvaigžņu rakstzīme atbilst kaut kādam direktorijā. Jūs varētu arī atbilst visiem failiem visās apakšdirektorijās, un veikt visu veidu citas iedomātā atbilstības. Apskatiet node-glob dokumentāciju, lai iegūtu vairāk informācijas.

SASS apkopošana

Stilu lapu apkopošana no SASS failiem ir kopīgs izstrādātāju uzdevums. To var izdarīt ar Gulp diezgan viegli, mums būs nepieciešams veikt kādu sagatavošanu. Neatkarīgi no pamata komandām, piemēram, src, dest un vairākiem citiem, visas funkcionalitātes tiek pievienotas, izmantojot trešo personu pievienojumus. Lūk, kā es to lietoju.

Es ierakstu SASS Gulp Google, pirmais rezultāts parasti ir tas, kas man nepieciešams, jums vajadzētu atrast SASS paketes lapu. Tas parāda, kā to instalēt (npm instalēt gulp-sass). Iespējams, jums būs jāizmanto sudo, lai to instalētu kā administratoru, tāpēc tas, iespējams, būs (sudo npm instalēt gulp-sass) .

Kad tas izdarīts, varat izmantot sintaksi, ko pakotne diktē, lai apkopotu jūsu kodu. Lai to izdarītu, izveidojiet failu ar styles.scss ar šādu saturu:

$ primārais: # ff9900; ķermenis fons: $ primārais; 

Tagad izveidojiet šādu Gulp uzdevumu Gulpfile.

gulp.task ('sass', funkcija () gulp.src ('*. scss) .pipe (sass ()) .pipe (gulp.dest (' ./ css ')););

Pirms komandas palaišanas neaizmirstiet “pieprasīt” Gulpfile augšdaļā esošo paketi:

var sass = nepieciešams (“gulp-sass”);

Kad jūs palaidīsiet gulp sass, visi faili ar scss paplašinājumu tiks izvadīti uz sass funkciju, kas tos pārvērš par css. Pēc tam tos nosūta uz mērķa funkciju, kas tos ievieto mapē css.

Failu un mapju skatīšana

Līdz šim tas viss ir ērts, bet mums joprojām ir jāievada komanda katru reizi mēs vēlamies palaist uzdevumu, kas nav ļoti efektīvs, īpaši, ja runa ir par stilu izmaiņām. Gulp ļauj jums skatīt failus izmaiņām un palaist komandas automātiski.

Gulpfailā izveidojiet komandu automatizēt kas izmantos skatīšanās komandu, lai skatītu failu kopumu izmaiņām, un palaižot konkrētu komandu, kad tiek mainīts fails.

gulp.task ('automatizēt', funkcija () gulp.watch ('*. scss', ['sass']););

Ja ierakstāt automatizēt terminālī, tas sāks un beigs uzdevumu, bet tas neatgriežas uz uzvedni, jo tas uzrauga izmaiņas. Mēs esam norādījuši, ka mēs vēlamies skatīties visus scss failus saknes direktorijā un, ja tie mainās, mēs vēlamies palaist sass komandu, kuru mēs esam izveidojuši iepriekš.

Ja jūs tagad mainīsiet savu style.scss failu, tas automātiski jāapkopo css failā css direktorijā.

Vairāku uzdevumu izpilde

Ir daudzas situācijas, kurās jūs varētu vēlēties palaist vairākus uzdevumus. Skatoties jūsu javascript mapi, iespējams, vēlēsities apkopot divus failus un pēc tam turpināt tos rediģēt. To var izdarīt divos veidos.

Ja uzdevumi ir saistīti, man patīk ķēdes. Labs piemērs varētu būt javascript failu sajaukšana un rediģēšana. Vispirms mēs caurlaidām savus failus uz concat darbību, pēc tam tos pārnesam uz gulp-uglify, tad izmantojiet galamērķa funkciju, lai tos izvadītu.

Ja uzdevumi nav saistīti, jūs varētu izsaukt vairākus uzdevumus. Piemērs varētu būt uzdevums, kurā mēs vēlamies sajaukt un rediģēt mūsu skriptus un arī apkopot mūsu SASS. Šeit viņš ir pilns Gulpfile par to, kā tas izskatās.

var gulp = pieprasīt (“gulp”); var uglify = pieprasīt (“gulp-uglify”); var concat = nepieciešams (“gulp-concat”); var sass = nepieciešams (“gulp-sass”); gulp.task ('skripti', funkcija () gulp.src ('js / ** / *. js) .pipe (concat (' scripts.js ')) .pipe (gulp.dest ('. ') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('stili', funkcija () gulp.src ('/ *. scss) .pipe (sass ()) .pipe (gulp.dest (' ./ css '));); gulp.task ('automatizēt', funkcija () gulp.watch (['*. scss', 'js / ** / *. js'], ['skripti', 'stili'));); gulp.task ('noklusējuma', ['skripti', 'stili'));

Ja ierakstāt gulp skripti terminālī visi js direktorijā esošie javascript faili tiks savienoti, izvadīti galvenajā direktorijā, pēc tam tiek izdzēsti un saglabāti galvenajā direktorijā..

Ja ierakstāt gulp sass, visi jūsu scss faili tiks apkopoti un saglabāti css direktorijā.

Ja ierakstāt gulp (noklusējuma uzdevums), jūsu skriptus uzdevums tiks izpildīts, kam sekos jūsu stili uzdevums.

The automatizēt uzdevums skatās vairākas mapes, lai mainītu mūsu scss un js failus, un veiks abus mūsu definētos uzdevumus, ja tiks konstatēta izmaiņa.

Pārskats

Gulp lietošana nav sarežģīta, jo daudzi cilvēki dod priekšroku Gruntam, jo ​​tas ir vienkāršāks. Atcerieties soļus, kas jāveic, veidojot jaunu automatizāciju:

• Meklēt spraudni
• Instalējiet spraudni
• Gulpfile pieprasiet spraudni
• Izmantojiet sintaksi dokumentācijā

Piecas komandas, kas pieejamas Gulp (uzdevums, palaist, skatīties, src, dest), ir vienīgās, kas jums jāzina, visiem trešo pušu addoniem ir lieliska dokumentācija. Šeit ir saraksts ar dažām lietām, kuras es varu sākt, lai sāktu darbu tagad:

• Attēlu optimizēšana ar gulp-image-optimization
• Attēla sprites radīšana ar gulp-sprite
• Failu saspiešana ar gulp-concat
• Failu rediģēšana ar gulp-uglify
• Failu dzēšana ar gulp-del
• Javascript uzklāšana ar gulp-jslint
• JSON uzklāšana ar gulp-jsonlint
• Autoprefiksējiet CSS ar gulp-autoprefixer
• Meklējiet un nomainiet, izmantojot gulp-frep
• Samaziniet CSS ar gulp-minify-css