Hiljuti Gulp. Suur populaarsuse omandamine ja see on selge, miks. See on kiirem, ilusam ja lihtsam kui Grunt.. Ma pidin temaga tihti töötama, kuid ma alati valmis lahendusi ja ei mõistnud täielikult, kuidas ta seda kõike tegi. Sel nädalavahetusel otsustasin ma selle väikese probleemi lahti võtta ja sulgeda. Võtke see ja rääkige täna.

Mis on Gulp?

Gulp on esikülje vahend. See võimaldab teil automatiseerida korduvaid ülesandeid (CSS-i ja JS-failide kokkupanek ja Minefication, käivitada testid, taaskäivitage brauser ja teised). Seega kiirendab Gulp ja optimeerib veebiarendusprotsessi.

Paigaldamine Gulp.

Gulp paigaldamine on piisavalt lihtne. Kui midagi ei tööta, kirjutage kommentaarides või kõrilõikaja oma probleemi. Nii et paigaldamiseks peate tegema 3 sammu:

• Paigaldage Gulp Global
• Paigaldage Gulp AS devDedepteers (sõltuvused arenguks)
• Looge Gulpfile.js faili

Esimene samm on Gulp'i paigaldamine kogu maailmas. Avage terminal ja kirjutage:

nPM Install --Global Gulp

Pärast seda peate oma projekti jaoks installima Gulp AS DeveDedendents. Veenduge, et teil on pakett.Jon-fail. Kui see ei ole, siis looge see kirjutades selle NPM init konsooli. Nüüd saate paigaldada Gulp AS devDedendents:

nPM Install --Save-Dev Gulp

Lõpuks peate looma Gulpfile.js oma projekti juur, mis sisaldab teie ülesandeid (ülesanded). Vahe-sammuna paigaldame Gulp-UTIL-plugina. Et näidata, kuidas pluginad on paigaldatud:

nPM Install --Save-dev Gulp-Util

Nüüd on aeg meie esimese ülesande kirjutamiseks tulnud. Avage äsja loodud Gulpfile.js faili ja kirjutage talle järgmiselt:

/ * File: Gulpfile.js * / // Koguge kõik meie pluginad Var Gulp \u003d nõuda ("Gulp"), Gutil \u003d nõuda ("Gulp-Util"); // luua ülesanne, mis täidetakse vaikimisi Gulp. Ülesanne ("Default", funktsioon () (tagasi Gutil. Logi ("Gulp töötab!"))));

Ja nüüd peame käivitama Gulp terminalis ja me näeme midagi sarnast:

\u003e Gulp [12:32:08] Kasutades GulpFile ~ / Projektid / Gulp-Scotch-Io / Gulpfile.js [12:32:08] Algus "vaikimisi" ... [12:32:08] Gulp töötab! [12:32:08] Lõpetanud "Default" pärast 1 ms

Ülevaade

Silp ise on võimalusi väga kaalud. Aga kõik, mida pead panna eraldi pluginad. Nad koos Gulpiga tekitavad imesid.

Gulp API on väga väike ja sisaldab ainult 4 kõrgema tellimuse funktsiooni:

• gulp.task.
• gulp.src.
• gulp.des
• gulp.watch

gulp.Task määratleb meie ülesanded. Argumente kutsutakse sõltuvus (massiiv) ja funktsioon (peamised meetmed). Sõltuvused ei pruugi olla:

gulp. Ülesanne ("Mytask", funktsioon () (// tehke midagi)); Gulp. Ülesanne ("Spetentstask", ["Mytask"], funktsiooni () ( // teha midagi pärast "Mytask" täidetakse });

gulp.SRC näitab faile, mida me tahame kasutada. See kasutab. Torude juurdepääsu failide kaudu pluginate kaudu.

gulp.Kasti punktid kausta, milles me soovime salvestada muudetud failid.

gulp.src ja Gulp.Destit kasutatakse failide lihtsa koopia jaoks:

gulp. Ülesanne ("copyhtml", funktsioon () () // Kopeeri kõik HTML-failid allikatest / avalikust / Gulp. SRC (allikas / *. HTML "). Toru (Gulp. DEST ("avalik")); ));

Gulpis on ehitatud faili vastuse vastuse süsteem (Gulp.watch). Selle ülesande saate kasutada teiste failide muutmisel vajalike ülesannete käivitamiseks.

Kas soovite Google'i lehe kiirus valida rohkem punkte? Ei tea, millist "esiotsa" koost? Siis sa siin huvitavad.

Mis on Node.js?

Node.js on tavapärane nimega "Põhja-JavaScript". See platvorm võimaldab teil kirjutada programme JavaScripti süntaksi abil.

Windowsi, Mac OS ja Linuxi jaoks on rakendused.

Kit sisaldab paketihaldurit Npm.Millega saate pakette paigaldada.

Mis on Gulp?

Gulp on kirjutatud pakett Node.js, mis aitab veebimeistritel ehitada projekte paigutuse paigutusel.

Gulp'i installimiseks peate kasutama käsurea.

NPM paigaldada Gulp.

Käesoleva artikli lõpus on fail, mis aitab koguda tüüpilist projekti.

Selles näites tehke Gulp, teeme järgmist:

• Automaatselt optimeerige veebi pilte;
• Koguge üks minimaalne stiil (Sass, SCS);
• Koguge üks minimaalne fail skriptidega.

Kuidas koguda esiotsa, kasutades Gulp?

Et mõista, kuidas kõik toimib, uurime kõik sammud.

Struktuuri saab vaadelda ekraanipildiga.

• Varade kaust - pildiallikate, stiilide ja skriptide jaoks;
• Avalik kaust - projekti assamblee tulemus asub selles;
• gulpfile.js - fail, mis kirjeldab tööloome töö loogikat;
• pakett.Jon on fail, mis sisaldab teavet Gulp'i õige toimimise jaoks kasutatavate programmide ja pluginate kohta.

pakett.json.

Faili sisu:

("Nimi": "Gulp_Project", "Versioon": "1.0.0", "Kirjeldus": "Näide", "Main": "Gulpfile.js", "Skriptid": "Echo \\" Viga: Testi pole määratud \\ "&& Exit 1"), "Autor": "Dmitriy Ilichev", "Litsents": "ISC", "DevDependents": ("Gulp": "^ 3.9.0" ":" ^ 1.0.0 "," Gulp-Concat ":" ^ 2.6.0 "," Gulp-uglify ":" ^ 1.2.0 "," Gulp-Imagemin ":" ^ 2.3.0 "," Gulp -Sass ":" ^ 2.1.1 "))

See fail on selge järgmiselt:

• Projekti nimi Gulp_Project, versioon ja kirjeldus;
• Peamine fail on Gulpfile.js;
• Projekti autor, litsents - kõik see ei ole nii oluline ja lihtsalt need väljad võivad olla tühjad;
• Huvitav punkt on devdependents. See kirjeldab sõltuvust.

Faili saab redigeerida tavalise tekstiredaktoris. Seda saab luua ka uue projekti jaoks NPM int-käsku.

Selle põhjal on Node.js aru, et me peame töötama:

• Gulp versioon 3.9.0 ja kõrgem kokkupaneku jaoks;
• Gulp-CSSO versioon 1.0.0 ja üle - plugin ministri stiile (CSS);
• Gulp-concat versioon 2.6.0 ja üle - plugin mitme faili liimimiseks ühele;
• Gulp-uglify versioon 1.2.0 ja üle - plugin javascripti minifitsiendi jaoks;
• Gulp-Imagemiin Versioon 2.3.0 ja eespool - Piltide optimeerimiseks plugin;
• Gulp-Sass Versioon 2.1.1 ja eespool - plugin, et saada CSS Sassi (SCSS).

Suurepärane! Pärast seda peate selle installima kõik. Seda tehakse käsurealt. Kuigi projekti kausta on vaja käivitada käsk:

NPM install

Kõik vajalikud andmed võetakse pakendist.Jer.

Lõppude lõpuks ilmub see maagia teenusekataloog Node_modules.

gulpfile.js.

Faili sisu:

/ * * * Määrata muutujad * * / VAR Gulp \u003d nõuda ("Gulp"), // teatatud Gulp JS Uglify \u003d nõuda ("Gulp-uglify"), // Minefication JS Concat \u003d nõuda ("Gulp-Concat") , // Faili liimimine ImageMin \u003d nõuda ("Gulp-ImanAmiin"), // CSO \u003d MineFification vaja pilte ("Gulp-CSSO"), // Minefication CSS Sass \u003d nõuda ("Gulp-Sass"); // Sass converting (SCSS) CSS / * * * Loo ülesandeid (maitse) * * /// Sass ülesanne. Käivitab Gulp Sass käsk Gulp.Task ("Sass", funktsioon () (Gulp.SRC ("./ Varade / stiil / Style.cS") // Fail, mis protsessid.Peerib (Sass ().) , Sass.logrerror)) // Teisenda Sass in CSS-i .Pipe (CSSO ()) // minifrikatuur CSS, mis saadakse eelmises etapis. Toru (Gulp.des ("avalik / CSS /")); // Tulemus Kirjutame määratud aadressile); // ülesanne "JS". Käivitab Gulp JS käsk Gulp.task ("JS", funktsioon () (Gulp.src (["./Ssuts/javaScripts/jquery-2.1.4.min.js", "./Setsets/javaScripts/bootstrap. Min .js "," ./Sadts/javaScripts/Script.js "]) // Failid, mis edasi liikuvad.Pipe (Concat (" min.js ")) // liimi kõik JS .PIPE (UGLIFIFY ()) // Saadud "Port" minifitsieni // probleem "Pildid". Käivitab Gulp.task "Gulp-pildid" ("Pildid", funktsioon () (Gulp.src (". Varad / pildid / ** / *") // Me võtame kausta faile ja selle alamkaustad. Toru ( Imagemiin ()) // Me optimeerime veebi pilte. Toru (Gulp.des ("avalik / pilte /")) // tulemus me kirjutame määratud aadressil)); // ülesanne "Watch". Alustab "Gulp Watch" käsk // See jälgib failide muutusi ja käivitab automaatselt teiste Gulp.Taski ülesandeid ("Watch", funktsioon () (// Stiilide ja alamkaustade muutmisel *. Käivitage Sass Gulp ülesanne. Vaata ("./ Varade / stiil / ** / *. SCSS", ["Sass"]); // * JavaScripts "ja alamkaustade muutmisel käivitavad JS Gulp. Jälgimisülesanne ("Varade / javascripts / ** / *. JS", ["JS"], ["JS"]); // Kui muudate faile "Piltide" kausta ja alamkaustade faile, käivitage pildid Gulp.Watch ülesande (" ./ Varad / pildid / ** / * ", [" pildid "]);));

Peamine kiip - ülesandel vaade. Pärast seda, kui käivitate üks kord, saate ohutult töötada allikatega ja projekt kogutakse automaatselt iga kord, kui salvestate redigeeritavaid faile.

Väljundil saame valmis avaldada malli internetis.

Ülesanded saab käivitada eraldi. Selle tulemusena arhiivis artikli lõpus leiate järgmist:

! Märge Selle arhiivi lahtipakkimiseks peate kõigepealt täitma NPM-i installimise käsu. See kaust sisaldab üsna palju faile ja iga kord, kui kopeerida / kleepida neid - aja raiskamine.

Vahi all

Seal on suur hulk muid kasulikke pluginad. Näiteks suurepärane Jade mall, mis on mõnikord kiirendada HTML-koodi, võib keegi vajada vähem ja nii edasi.

Esitatud näide on vaid platvorm ja mall, millest on võimalik alustada kõigi nende ilusate kiipide kasutamist ilma palju teadmata.

Task Rännerid ja montaažisüsteemid kiirendavad tööd, automatiseerimist koostamise, katsetamise ja muude tavapäraste ülesannete automatiseerimisel. Nagu mõnes muus piirkonnas, on selles turul tugev konkurents. Kuni 2014. aastani domineeris ülesanne Ranner Grunt domineeris nende hulgas, kuid hiljem eraldati väike meeskond projektist, mis otsustas teha alternatiivse tööriista, Gulp, orienteeritud projekti kokkupanekut.

Selleks, et aidata teil valida valiku üle, kaaluvad artikli raames peamised ülesande juhid:

• grunt.

samuti puudutage muid vahendeid ja ehitada meetodeid.

Vaadates veidi edasi, ütleme, et me kasutame Gulp'i laineaktiivsusest. Rakendus tööriist osutus väga lihtsaks: JetBrainide perekonnas (idee, webstoorm, resharper), mida oleme juba aastaid kasutanud, on suurepärased pluginaid töötama Gulp / Grunt ja NPM / Nodejs.

Task Manager vs. Projekti assamblee süsteem: mis vahe on?

Tööhaldur - tööriista ülesannete automatiseerimiseks. Rändurite konfiguratsioonis saate salvestada nende ülesannete nimesid; funktsioon, mis neid täidab; Pluginad standardite kiirendamiseks, kuid ülesanded ise võivad olla meelevaldsed. Näiteks:

• Kasutuselevõtu ülesanded (Zip Project, Project allalaadimine kaugserverisse ja TP-le)
• Projekti assamblee ülesanded (määramine, optimeerimine, kinnitamiskood kehtivuse ja TP)
• Andmete rände ülesanded jne.

Selliste tööriistade näited - Grunt ja Gulp.

Montaažisüsteem - See on vahend, mis lahendab ainult ühe tüüpilise ülesande projekti assamblee Java skripti, mis sisaldab:

• contactation,
• kehtivuse koodi kontrollimine,
• koodiminfikatsiooni ja TD.

Sarnased tööriistad hõlmavad veebipaketi, brokkoli, hiline, brauseri ja teised.

Kõiki sarnaseid frontendi ülesandeid saab automaatselt läbi viia muude vahendite abil: näiteks kasutades NPM-i käivitamist, mida me ka artiklis räägime.

Näide

Kaaluge projekti kokkupanemiseks Gulp-faili:

Const Gulp \u003d nõuda ("Gulp"); Const Coffee \u003d nõuda ("Gulp-kohvi"); Const concat \u003d nõuda ("Gulp-concat"); const uglify \u003d nõuda ("gulp-uglify"); const imagemin \u003d nõuda ("Gulp-Imagemin"); CONST SOURCEMAPS \u003d nõuda ("Gulp-Sourcemaps"); const del \u003d nõuda ('del'); )

Kuid assamblee on suur tüüpiline ülesanne. Gulp jaoks saate kirjutada teise konfigureerimise - ütleme, et kasutuselevõtt:

Var Gulp \u003d nõuda ("Gulp"); var zip \u003d nõuda ("Gulp-zip"); var del \u003d nõuda ("del"); Var paigaldada \u003d nõuda ("gulp-install"); var retusequent \u003d nõuda ("joosta-järjestus"); Var awslambda \u003d nõuda ("sõlme-aws-lambda"); Gulp.task ("puhas", funktsioon (CB) (del (["./ DIST", "./dist.zip"], CB);)); Gulp.task ("Copy", funktsioon () ("Index.js") .Pipe (Gulp.des ("DIST /"));)); Gulp.task ("Nood-Mods", funktsioon ("./ Package.jon") .Pipe (Gulp.des ("DIST /")) .Pipe (installimine (tootmine: tõsi)));)); // puhastage kõik AWS-SDK kataloogid Node_modules. Me Don "T // Vajame neid üles laadida, kuna Lambda eksemplar on juba // on saadaval kogu maailmas. / AWS-SDK "], tagasihelistamise);))); gulp.task (" zip ", funktsioon () (tagasi Gulp.src ([" DIST / ** / * ","! DIST / PACK.JSER "]) .Pipe (zip (Dist.ZIP ")) .Pipe (Gulp.Dest (" ./ "));))); .zip ", nõuda (" ./ lambda-config.js "), tagasihelistamise);))); gulp.task (" Deeploy ", funktsioon (tagasihelistamise) (tagastamise runnes) , ["NODE-MODS"], ["Clean-aws-SDK"], [zip "], [" üleslaadimine "], tagasihelistamise);));

A-d saab kirjeldada uute ülesannetega olemasolevate kombinatsioonina:

Gulp.Task ('' juuruta ", Gulp.series (" Clean "," Copy "," Node-Modics "," Clean-AWS-SDK ", 'zip", "üleslaadimine");

See on erinevus. Nüüd kaaluge põhivahendeid.

gulp vs. Grunt.

Niisiis, meie ees on kaks ülesannet Rannerit: Gulp ja Grunt. Mõlemad kasutavad Node.js ja NPM ja nad panid ülesanded JavaScripti abil.

Esmapilgul on nad sarnased, kuid Gulpil on midagi, mis muudab selle kokkupanekuks mugavamaks: oskus on paralleelne tööülesannete ja kompaktse konfigureerimisega, lakoonilise API-ga. Vaatame oma töö põhimõttele lähemale.

Keermeandmed

Meil on toetusfail, mis muudab CSS-assamblee ja töötlemise.

Seda saab näha iga protsessi käivitamisel:

avab faili;

käivitab protsessi;

säästab muutusi;

sulgeb töödeldud faili, et vältida järgmist protsessi;

salvestab faili lõppkausta.

See tähendab, et ahel hõlmab mitme ajalise kausta loomist ja salvestada vahefailid:

Pluginad kirjutavad erinevaid autoreid. Iga plugina saab töötada failidega, failid tuleb esitada objektidena. Gulpis seda ülesannet teostab virtuaalse failisüsteemi Vynyl-FS. Ja Gulp saadab kohe faili järgmisele protsessile ilma ajutiste failide loomata ja ilma kettale salvestamata.

Sama konfiguratsioon Gulp on juba kompaktsem:

Selle üldine töömehhanism - streaming faile ilma kirjutamata kettale:

Ülesande täitmise järjestus

On veel üks erinevus: Gulp vaikimisi asünkroonselt täidab asju. Selles ja miinused on eeliseid. Samas konfiguratsioonifailis anname käsu lugeda failid Dev / * SCSS-i kataloogist ja saatke need Sassile.

Voolud saadavad V.Pipe'i tulemuse. Meetod. Toru võimaldab koguda tulemuse puhvrisse osades ja kui see on täis, saadab kohe informatsiooni oja lugemiseks, ilma kataloogi sisu saamiseta viimistluseta.

Järjestikune ülesande täitmine teeb Gulp kiire ja võimas, kuid aeg-ajalt vajadust täita endiselt ülesandeid sünkroonselt nagu gruntis. Probleemi saab lahendada tagasihelistamise, voolu või lubaduse tagastamise kaudu. Habré ülesanne on detailsemalt demonteerida. On alternatiiv kohapeal npm.js

Kui kasutate GRUT-i, aga teid meelitatakse streaming andmetega - sama vynyl-FS mooduli saab kasutada selle rakendamiseks GRUNT.

Gulp-lakoonilisel API-l on ainult 5 meetodit:

Ülesanne (nimi, fn). Registreerib nimega funktsioon. Saate määrata sõltuvus teistest ülesannetest, kui teil on vaja neid kõigepealt täita.

Käivita (ülesanded ...). Täidab ülesandeid.

Vaata (Glob, Fn). Teostab funktsiooni, kui fail on maailma kohapeal.

SRC (glob). Parameetrina võtab faili mask ja tagastab nende failide esindava niidi. Siis voolu saab kanda sissepääsu plugin.

DESS (FOLDER). Salvestab faile määratud kausta.

Eriti tahaksin märkida, kas "Native" Projekti API-s "Native", sest failide pidevate muutuste jälgimine on assamblee kõige olulisem komponent. Lühike API võimaldab keskenduda oma peamine ülesanne kokkupanek projektide.

Alternatiivid Gulp ja Grunt

Vaatamata populaarsusele Gulp (rohkem kui 130 allalaadimist päevas) ja gruntis (rohkem kui 86 allalaadimist päevas vastavalt NPMJS.com), arendajad näevad nendes süsteemides ja nende puuduste: näiteks sõltuvus plug-ins, mittetäielik Dokumentatsioon, ebamugav silumine. Teise võimalusena saate kaaluda projekti montaažisüsteeme (näiteks brokkoli ja veebipaketi) või npm skripte.

Projekti assamblee süsteemid

Mõtle mitmeid alternatiivseid lahendusi Node.js platvormil. Projekti kokkupanemiseks võivad nad asendada Gulp ja Grunt.

See süsteem, nagu Gulp, tekkis konkurentide ülesandeks-varajane grunt, kuid arendajad algselt kujundasid seda just assistentina ehitada kõik eelised ja puudusi. Ta ei mõistata ilma seadeteta, et * .js on skriptide fail, * .coffee on kohviku; Selle konfiguratsioon on kompaktsem. Kuid kõik meelevaldsed tegevused assamblee etapis ei saa ta teha.

Siin on fig faili hiline. See on kirjutatud kohvikus (saate ka kirjutada JS-le):

Eksport : Pärast: ["Müüja / stiilid / abilised.css"] Mallid: Sigand: "JavaScripts / app.js"

Siin ma tahan pöörata tähelepanu kaartide ja tellimuste operaatoritele. Brunch Config tasemel tundub, et teil on vaja faile soovitud järjekorras. Selle tulemusena võtab config 20-30 rida.

Brokkoli.

Indi-tööriist, mis on arengu all. Tema arendajad soovisid luua konkurentsi juba Gulp.

Võrreldes Gulpiga kasutab brokkoli tööriist muid põhimõtteid:

Kiirendusseade. Iga plugin rakendab montaažitulemuste vahepealset vahemälu, mitte ainult vajalike failide osalise mässamise asemel.

Puude asemel faile. Gulp on parim faili muutmine üheks lõplikuks. Vaikimisi broccolli kasutab ainult puudeid, mitte faile ja need muudavad need teistesse puudesse (degenereerub ühest tipudest).

Praegu töötab tööriist aktiivselt, ilmuvad uued pluginad, kuid tõsiste projektide puhul on liiga vara: pluginad ei piisa.

Veebipakk on paindlik modulaarne koostisüsteem. Sellel on ebatavaline süntaks, kuid ise võtab vastu kõik mooduli süntakse.

Mõistmine, et sa peaksid konkureerima selliste hiiglastega nagu Gulp, otsustasid loojad leevendada oma elu suurte projektide arendamisel. Ja lisatud kasulikule:

Võime automaatselt ehitada puitu sõltuvusi ja ressursse.

Mugavad tööriistad dünaamilise laadimise rakendamiseks.

Ühilduvus praktiliselt mis tahes moodulitega (AMD, UMD, ES 2015, ühised JS, kolmandate osapoolte moodulid).

Ühilduvus preprocessoritega (Sass, Babel, kohviskript, tüüp skript jne).

Live Reload (asünkroonne alglaadimistehnoloogia, kus brauseri värskendused ei ole kogu leheküljed, vaid eraldi rakendused).

Võime jagada koodi ja luua palju kimp-faile, vältides ühe raske bundle.js loomist.

Võime koodi optimeerida.

Eraldi võite märkida paindliku lähenemisviisi sõltuvustele. Moodul võib olla JS, CSS ja HTML-fail ja isegi JPEG PNG-ga. Võite kasutada nõuete (Myjsfile.js ") ja nõuda (" Mycssfile.css "), jagada ja kasutada osa artefakti uuesti.

Loe lähemalt võimaluste, tööriistade konfiguratsioone, pluginad GitHubis, esitluse esiplaanil: sügav sukeldumine veebipakendis.

nPM skriptid

Pakkumisülesandeid saab lahendada NPM-skriptide abil. Paljud hirmutavad seda ideed: mõned võimalused, skriptid ei ole piisavalt kiired, võrreldes Gulp või Webpackiga. Sellegipoolest on need puudused liialdatud.

NPM-i skripti võimeid

NPM skriptid lahendavad üsna palju ülesandeid. Näiteks saate rakendada lõksu skripte:

("Nimi": "NPM-skriptide näide", "Versioon": "1.0.0", "Kirjeldus": "NPM skriptide näide", "skriptid": ("Prebuild": "Echo ma joosta enne Script" , "Build": "Cross-env Node_env \u003d tootmise veebipakett" "Postbuild": "Echo ma joosta pärast build skripti"))

Skriptid laaditakse vastavalt prefikside järgi: prebuild, näiteks algab enne ehitamist, sest sellel on eesliide pre. Seega laaditakse postbuild viimased. NPM-i käivitamise meeskond käivitab need soovitud järjekorras.

Teil on võimalik helistada ühele skripti teisele lagunemiseks keerulised ülesanded. Näiteks helistab siin preburipti ülesanne puhtale ülesandele.

("Nimi": "NPM-skriptide näide", "Versioon": "1.0.0", "Kirjeldus": "NPM skriptide näide", "skriptid": ("puhas": "Rimraf ./dist && Mkdir Dist "," Prebuild ":" NPM Run Clean "," Build ":" Cross-env Node_env \u003d tootmise veebipakett ")

Kui ülesanne muutub liiga keeruliseks, saate alati helistada eraldi failile:

("Nimi": "NPM-skriptide näide", "Versioon": "1.0.0", "Kirjeldus": "NPM skriptide näide", "skriptid": ("Build": "sõlme build.js")

Tänu Gulp Streaming montaažitööde jaoks on see muutunud palju mugavamaks kui gruntis. Kuid seda saab rakendada npm kaudu. Windowsis ja UNIXis tehakse voogesitus vaikimisi, ilma vahefailide salvestamata.

Näiteks UNIXis saate teha GREP-faili sisu ja saata see uuele failile:

Grep 'Minu nimi' bigfile.txt\u003e linestethatravemyname.txt

Redirect (\u003e) saadab soovitud stringid sihtfaili. Ülesanne tehakse ilma vahefailide salvestamata.

Aga seal on ebamugavusi: Sa ei saa kommenteerida pakett.json. Väljapääs võib olla lühikese skriptide loomine arusaadavate nimedega, mis on suunatud mõnele väikesele ülesandele. Üksikasjalikumalt küsimus asendades ülesande renlers NPM skriptid on hästi valgustatud inglise keelt kõneleva artikli, miks ma lahkusin Gulp ja Grunt NPM skriptid.

Tulemus

Turul on suurepärased võistlusvahendid rutiinsete ülesannete automatiseerimiseks (näiteks Gulp ja Grunt), samuti tööriistad projekti kokkupaneku automatiseerimiseks (veebipaketi, brokkoli, medusa, brauseri jne).

Kui te vaatate ülesannete rekordereid, siis Gulp võrreldes GRUNTiga on lihtsam, arusaadav ja toota: võidab kettatoimingute kokkuhoiu tõttu. Aga gruntil on rohkem pluginad (näiteks on katseplugina). Sellepärast ta jääb palju fänne.

Kui me räägime ainult assamblee, siis Gulpil on kõik eelised üle Greunt:

Vooluarhitektuuri faile üleandmise üle ahela Vynyl-FS mooduli.

Vaikimisi - asünkroonne ülesande täitmine.

Lakooniline API on ainult 5 funktsiooni.

Samal ajal on veebipaketi ehitamine võrdselt huvitav vahend. See pakub live uuesti laadimise tehnoloogiat, mis kiirendab brauseri uuendamist. See on suur pluss: tehnoloogia säästab aega, et vajutada värskendusnuppu, mida arendajad peavad pidevalt vajutama. Gulpil on ka elav laadimise, kuid veebipaketi on raske võrrelda Gulp või GrUntiga, sest see on "teritatud" ainult ehitamise all ja ei tea meelevaldseid ülesandeid lahendada.

Kõik need otsused integreerivad suurepäraselt JetBrainide toodete perekonnaga, kuid me Waveacess eelistasid eelistatult nii jalgratameede jaoks piisavalt võimalusi kui ka freelide spetsialistide jaoks.

Kui teil on küsimusi ja peate arendama veebiprojekti, kirjutage meile [E-posti kaitstud]

• Esiots
• Grunt.
• Gulp.
• Ülesande jooksjad.

Selles artiklis analüüsime üksikasjalikult projekti projekti projekti kokkupaneku protsessi, mis tuli minu igapäevases töös ja rutiini väga lihtsam.
Artiklis ei nõuta viimasel juhul tõde, sest täna on kogu assambleele suur hulk erinevaid kokkupanekuid ja lähenemisviise ning igaüks otsustab maitse järgi. Ma jagan ainult minu mõtteid selle teema kohta ja näidata oma töövoogu.

Me kasutame Gulp'i kogujat. Seega sõlme JS peab olema paigaldatud süsteemi. Sõlme paigaldamine konkreetse platvormi jaoks Me ei pea, sest See itogles paar minutit.
Ja kõigepealt vastata küsimusele - miks Gulp?
Vähem või vähem lammutamisvõimalusi on meil Greunt ja hiline.
Kui ma just alustasin kollektsiooni - seal oli juba Grunt ja Gulp turul. Esimene ilmus varem ja sellel on suurem kogukond ja mitmesugused pluginad. NPM sõnul:
GRUNT - 11171 pakett
Gulp - 4371 pakett

Aga Grunt tundus mulle läbi Chur subal. Ja pärast lugemist mitmeid artikleid võrreldes - ma eelistasin Gulp selle lihtsuse ja nähtavuse jaoks.
Brunch on suhteliselt noor projekt, kõik selle plusse ja miinused eelised. Ma vaatan teda huviga, aga ma pole seda veel kasutanud.

Jätkame:

Loo meie projekti kaust, näiteks "HABR". Avage see konsoolis ja käivitage käsk

Npm init

Võite lihtsalt vajutada ENTER kõik paigaldaja küsimused, sest Nüüd ei ole see põhimõtteliselt.
Selle tulemusena tekitame projekti kausta projekti kausta failipakett.jon, umbes sellise sisu.

("Nimi": "Habr", "Versioon": "1.0.0", "Kirjeldus": "", "Main": "Index.js", "skriptid": "ECHO" Viga: Katse ei ole määratud "&& Exit 1"), "Autor": "", litsents ":" ISC ")

Mõned selle muudatused meie vajadustele:

("Nimi": "Habr", "Versioon": "1.0.0", "Kirjeldus": "", "Autor": "", "litsents": "ISC", "devDependents": ("Gulp": " "^ 3.8.1"))

dEVDEPENDERSIVE plokis näitasime, et me vajame Gulp ja kohe kirjutame kõik meie pluginad.

Pluginad:

Stiile, ma teen sama nagu JS, kuid ainult selle asemel raggeri "a - ma kasutan sisseehitatud SCSS import.
Meie main.scs näeb välja selline:

/ * * Kolmanda osapoole * / @Import "CSS: ../../ Berwer_Componendid / normaliseerivad.css / normaliseerivad.css"; / * * Kohandatud * / @Import "osalised / app";

Sel viisil selgub, et stiilide ühendamise järjekorda on lihtne juhtida.
Kontrollige meie ülesannet, töötab

Gulp stiil: Ehita

Me kogume pilte

Piltide ülesanne näeb välja selline:

Gulp.Task ("Pilt: Build", funktsioon () (Gulp.src) // Valige meie pildid. Toru (((// laulmine neile progressiivne: tõsi, Svgoplugins: [(Removeviewbox: False )], Kasutage:, Interlaced: Tõsi)))))

Ma kasutan vaikimisi Imagemiini seadeid, välja arvatud Interlaced. Loe lähemalt selle plugina API kohta saate lugeda.
Nüüd, kui me paneme SRC / IMG-s pildi ja käivitame käsu

Gulp Pilt: Ehita

seega näeme meie optimeeritud pilti ehitamisel. Samuti kirjutab Gulp konsoolile, kui palju ruumi ta saidi kasutajatele salvestasid :)

Fonte

Fontide puhul ei pea ma tavaliselt manipulatsioone läbi viima, kuid mida iganes sa paradigma ", töötame SRC-s / ja kogume ehitades / ja kogume build /" - ma lihtsalt kopeerida faile SRC / FONTS-i ja sisestage build / fondid. Siin ülesanne

Gulp.Task ("Fondid: Build", funktsioon () (Gulp.src (Path.src.fonte) .Pipe (Gulp.des (Path.Build.fonts))));

Nüüd määratleme Taq nimega "Build", mis käivitab kõik, mis siin oleme arvestanud

Gulp.task ("Build", ["HTML: Build", "JS: Build", "Stiil: Build", "Fondid: Build", "Pilt: Build"]);

Faili muudatused

Selleks, et mitte ronida kogu aeg konsoolis, küsime Gulpilt iga kord, kui muudate mõne faili soovitud ülesande käivitamiseks. Selleks kirjutage selline ülesanne:

Gulp.task (Watch ", funktsioon () (Watch (funktsioon (sündmus, CB) (Gulp.start (" HTML: Build));))); Watch (, funktsioon (sündmus, CB) (Gulp.start ("Stiil) : Build ");)); Watch (funktsioon (sündmus, CB) (Gulp.start (" JS: Build ");))) ");)); Watch (funktsioon (sündmus, CB) (Gulp.start (" Fondid: Build ");));));

Me mõistame, et seal ei tohiks olla probleeme. Me lihtsalt läheme läbi meie teemuutujades määratletud teed ja funktsiooni funktsiooni, mida nimetatakse faili muutmisel - alustage vajalikku ülesannet.
Proovige töötada konsoolis

Gulp Watch.

ja muuta erinevaid faile.
Noh, mitte lahe?)

Veebiserver.

Nacle Livelaadi nautimiseks - peame looma kohaliku veebiserveri. Selleks kirjutage järgmine ülesanne:

Gulp.Task ("WebErever", funktsioon () (Connect.server ((peremees: server.Host, sadam: server.port, Liveeload: true));));

On isegi midagi kommenteerida. Me lihtsalt käivitame serverit elatist vastuvõtva ja sadamasse, mida oleme serveriobjektis määratlenud.

Puhastus

Kui lisate mõnda pilti, käivitage pilt: ehitage ülesanne ja seejärel eemaldage pilt - see jääb ehitamise kausta. Seega oleks mugav - seda perioodiliselt puhastada. Loo selle lihtsa ülesande loomiseks

Gulp.task ("puhas", funktsioon (CB) (Rimraf (Path.clean, CB);));

Nüüd käivitamisel käsu

Puhastage Gulp.

lihtsalt kustutasite ehitamise kausta.

Ja lõpuks, väike halastav

See ülesanne ei kanna kriitilist funktsionaalsust, aga ma tõesti meeldib see :)

Gulp.task ("Openbrowser", funktsioon () (OPN ("http: //" + server.Host + ":" + server.port + "/ build");));)

Kui me peame, käivitame selle - ja meie brauseris avab meie projektiga automaatselt vahekaardi.
Cool :)

Lõplik

Viimane asi - me määratleme vaikimisi ülesande, mis käivitab kogu kokkupaneku.

Gulp.Task ("Default", ["Build", "WebErever", "Watch", "Openbrowser"];

Lõpuks näeb teie Gulpfile.js midagi sellist.
Nüüd toimige konsoolis

Ja voila :) Teie projekti toorik on teie jaoks valmis ja ootab.

Paar sõna

See artikkel mõelmus on viis värskendada mälu peatüksuse ehitada frontend projektide ja leevendada üleandmise selle kogemuse uute arendajate. Te ei pea seda teostust kasutama teie projektidesse. On Yeoman.Io, kus leiate generaatorid peaaegu igasuguste vajaduste jaoks.
Kirjutasin selle koguja 2. mail põhjustel.
- Mulle meeldib kasutada minu riggeri hTML-kood
- Peaaegu kõigis ehitab, mida ma kohtasin - kasutatakse ajutist kausta (tavaliselt.TMP /), et salvestada assamblee vahepealsed tulemused. Mulle ei meeldi see lähenemine ja ma tahtsin vabaneda ajutistest kaustadest.
- Ja ma tahtsin kõike mulle kastist :)

Minu kollektori tööversioon, mida saate alla laadida minu GitHubis.

Loodan, et artikkel osutus teile kasulik :)

P.S. Kõik vead, puudusi ja shoals - palun kirjutage isiklikult

Härrasmehe esiotsa arendaja

See pole saladus, et kaasaegne esiosa arendaja peab olema oma käes üks projekti assamblee vahenditest, näiteks Gulp. või Grunt.. Kuni mõnda aega Grunt okupeeris selles küsimuses monopoli, kuid arendaja grupp eraldati Grauntist, et luua oma kerge ja kiire tööjõu-juht Gulp.

Käesolevas artiklis koostame lähtepaketi selle kasutamiseks tulevastes projektides.

Mida me kasutame tehnoloogiat

• Tarkvaraplatvorm: Node.js.
• CSS-i protsessor: Stylus.
• Task Manager: Gulp.

Miks Front Manager Task Manager

Kuni viimase ajani mõtlesin ma ise, miks ma pean veetma aega tegumihalduri konfigureerimiseks, kui ma toime tulla paigutuse paigutusega nii hästi, kuni ma alustasin CSS-i eelprotsessorite kasutamist.

CSS-i protsessorid - tõesti mugav ja kiirendada kirjutamisstiilid, kuid koostamise kood on kirjutatud eelnevalt protsessorit regulaarse CSS, mitte üsna triviaalne ülesanne, mis on lahendatud ühe nupuga. Siin oleme päästmiseks ja ülesande haldur saabub. Koodide konversioon ei toimu, et vajutades nuppu, kõik juhtub võrgus ilma teie osalemiseta (muidugi, kui seadistate kõik õigesti).

Muidugi ülesanded Task Manager kaugele kaugemale protsesside ümberkujundamise koodi muundamise puhtad CSS. Projekti kollektor tegeleb ka ministeeriumi, konkadenatsiooni, vigade koodi kontrollimisega, pildi kokkupanekule sprites, piltide optimeerimine veebis jne. Sa lihtsalt luua oma projekti palju loogiline eraldatud faile, mis on siis mugavalt kogutud ühe kataloogi juba töödeldud ja valmis tööle brauseris. Aga see on veidi hiljem ja alustame nüüd ettevalmistust.

Paigaldus Node.js.

Kui sa tead, kuidas installida Node.js oma süsteemi ja kasutada seda, saate turvaliselt minna järgmisele päisele.

Tahaksin kohe hoiatada, et kõik kirjeldatud meetmed on asjakohased Mac OS X.kuid üldiselt kohaldatav teiste jaoks Unix Süsteemid. Arendamine töökorraldaja ja käsurea kaudu Aknad Mõnevõrra raskem ja siin seda ei kirjeldata. Kui aga kasutate ikka veel Windowsi ja ei ole valmis sellest keeldumiseks valmis, pakun paigaldatud virtuaalse masina kasutamise versiooni Ubuntu.Ma kasutan seda võimalust oma kodusüsteemis, mis on üldiselt üsna mugav.

Niisiis, esimene asi, mida me peame alla laadima ja installima Node.js paketi oma süsteemi tööle koos konsooli kaudu sõlmega. Mine ametlikule saidi node.js ja alla laadida värske stabiilse versiooni oma süsteemi. Pärast paigaldamist peaks sõlme käsk olema teie käsureale kättesaadav. Et kontrollida oma sõlme toimib, sisestage käsu käsu käsu

vastuseks on paigaldatud Node.js versioon. Kui kõik on hästi, jätkake.

Projekti kataloogide struktuur

Meie projektides kasutame struktuuri ühtset versiooni:

Arenema - juurenduse kataloog └─Start. - Projekti kataloog ├─Build - Bild kogutud Task Manager ├─Resource. - kõik allikafailid arendamiseks (.PSD jne) ├─SRC. - arengukataloog │├─CSS. - stiili arengukataloog ││├─Mages. - kõik staatilised pildid ││├─SPRITES. - Sprite kogutud pilt ││├─partial - kohandatud failid stiile │││├─mixins.Styl - Kohandatud segud │││└─STYLES.STYL. - kohandatud stiilid ││├─Vendor - teised välised failid stiile ││└─STYLES.STYL. - peamine stiili fail │├─FONTS. - Fontide kataloog │├─img. - Kataloog dünaamilised pildid │├─js. - JavaScripti arendamise kataloog ││ ├ _ *. JS - külgfailid js ││├─_main.js. - peamised kohandatud js ││└─main.js. - Main JS-fail │├─.Htaccess. - Serveri konfiguratsioon │├─ * .html. - lehekülje märgistuse failid │├─Pages.html. - Fail koos kõigi lehekülje malliga │├─index.html. - indeksi faili märgistuse fail │└─include - Plug-in märgistuste kataloog │ └─ * .html - Plug-in märgistusfailid (päises.html jne) ├─packAge.json - NPM partiihalduri konfiguratsioon ├─Gulpfile.js. - Config Gulp. ├─STYLUS.TEMPLATE.Mustache. - Spriidi lugemise mask ├─Todo. - Todo leht └─.GITIGNOREORE. - Giti konfiguratsioon

Paigaldus

Konsoolis CD-käsku abil avage arendusjuure kataloogi, looge meie MKDIRi käivitamise projekti kataloog ja liikuge sellele.

Me kehtestame projekti projekti konsooli kaudu:

mKDIR BUILD ROLUBS SRC SRC / CSS SRC / CSS / Pildid SRC / CSS / SRC / CSS / osaline SRC / CSS / müüja SRC / JS SRC / Mall SRC / Mall / Lisage SRC / IMG SRC / FONTS

Looge projekti struktuuris esialgsed failid:

touch Gulpfile.js Stylus.Template.Mustache .gitignore SRC / .htaccess SRC / CSS / stiile.STYL SRC / CSS / osalised / stiile.STYL SRC / CSS / osalised / segamid.STYL SRC / JS / Main.js Src / js / _main.js src / malli / lehekülg

Loo pakett.jon

kõik hüpikakende küsimused saab kasutada läbi sisestamise, sõlme seab need vaikeväärtused või täitke väljapakutud väljad.

.gitignore.

Rääkides gita, mis kataloogid ignoreerida ja mitte täita hoidla:

/ Node_modules / / Build / / Resource /

NODE_MODULES Directory ilmub hiljem pärast plug-installide paigaldamist ja sisaldab kõiki projekti sõlme pluginaid.

sRC / .htaccess.

Täiendava Gzip kompressiooni ja serveri vahemällu paigaldamine:

ADDOUTPUTFILTERBYTYPE Deflate Tekst / HTML Tekst / lihttekst / XML Tekst / CSS Tekst / JavaScript rakendus / JavaScript # Serveeri Gzip kokkusurutud CSS-failid, kui need on olemas # ja klient aktsepteerib gzip. Ümberkirjutatud "% (http: aktsepteerimine-kodeering)" Gzip "ümberkirjutatud"% (päring_filename) \\. GZ "-S RewriterUle" ^ (. *) \\. CSS "" $ 1 \\ .css \\ tKasutage Gzip kokkusurutud JS-failid, kui need on olemas # ja klient aktsepteerib gzip. Ümberkirjutatud "%% (http: aktsepteerimise kodeerimine)" Gzip "ümberkirjutatud"% (päring_filename) \\. GZ "-S RewriterUle" ^ (. *) Tüübid ja vältida mod_deflate topelt gzip. RewriterUle "\\ tcss \\ t .gz $" "-" RewriterUle "\\ ...] # Serveeri õige kodeerimisliik. Päis Lisa sisu-kodeerimine Gzip # Force voltimisvahendid vahemällu GZIPPED & # Mitte-gzipped CSS / JS-failid eraldi. Header lisa erineda aktsepteerimise kodeering Aegumise aegumine ASPIVEVEBYTYPE Application / JavaScript "Access Plus 1 kuud" ExpresbyType Image / JPG "Access Plus 1 kuu" ExpresbyType Image / JPEG "Access Plus 1 kuu" ExpresbyType Image / GIF "Access Plus 1 kuu" AcciresbyType Image / PNG "Access Plus 1 kuu" Kuu "ExpeantsbyType Text / CSS" juurdepääs pluss 1 kuu "

sRC / CSS / stiile.Stdyl

Ühendage kasutajastiili failid peamisse stiili failiga:

@Import "osalised / stiile"

Pange tähele, et ühendamiseks.STYL-failide ühendamiseks ei ole pikendus pliiatsi eeltöötleja koodi semantika järgi täpsustatud. Ühendada stiilide teise pikendamise, näiteks.CSS, märge viimane on vajalik.

TEGEMA.

See lehekülg sisaldab ToDo arengulehte. Lisateavet selle failiga töötamise kohta leiate selle failisega töötamise kohta Plainsks Plainsks plugina lehekülg üleval teksti jaoks.

See struktuuri seadmine on lõpetatud.

Pluginate installimine NPM partiihalduri kaudu

Node.js vaikimisi hulka kuuluvad NPM partiihaldur, kelle hoidlates on kogutud palju pluginaid, millega me peame töötama.

Gulp-plugina seadistamine

Kõigepealt peate meie süsteemis paigaldama Gulp-i globaalselt (-G-klahviga)

nPM installige Gulp -G

Tehke seda üks kordedasi Ülemaailmne paigaldamine pole nõutud.

Nüüd peate paigaldama Gulp kohapeal projekti kataloogis

nPM installige Gulp --Save-dev

Võtme -Save-Dev näitab, et plugina kohta (hoidla nimi ja selle versioon nimi) lisatakse pakendi konfiguratsioonile ja mäleta seda selle projekti jaoks. Kuna me ei salvesta raskekaalu kausta Node_modules pluginad, salvestatud konfigureeritud informatsiooni installitud pluginad võimaldab ainult ühel npm i käsk kasutada kõik vajalikud pluginad projekti.

Iga meeskonna jaoks on lühendid, nii et ülaltoodud käsk saame kirjutada lühema vormi

Tulevikus kasutame ka meeskondade lühendatud vormi.

Stylus plugin jaoks Gulp

Meie projektides kasutame stiili eelprotsessi, mis töötab hästi ja koostatakse sõlme.

Paigaldage:

nPM i Gulp-Stylus -D

CSS töötlemise pluginad

Avtoprefikser - Automaatselt asendab eesliiteid -Ms ----- Moz - WebKit - soovitud omadustes:

nPM i Gulp-AutoPrefixer -D

CSS-i määramine - plugin vähendab väljund CSS-faili, mis kõrvaldab selle tarbetute lüngade ja vahekaartide eest:

nPM i Gulp-Minefy-CSS -D

Pildi töötlemise pluginad

Piltide ühendus sprites - Te ei pea enam kulutama väärtuslikke aega, et kombineerida kõik sprites pildid ja seejärel arvutada nende koordinaadid, kõik see muudab selle plugina teile automaatselt:

npm i gulp.spletesmith -d

Lisage eelnevalt loodud ploostrile.Template.muustache mask sprites asendite arvutamiseks:

((#ITEMS)) $ ((nimi)) \u003d ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.eight)) ((px.total_width)) ((px.total_ehe)) "((((Escaped_image)))"; (/ Esemed))

Lisage spetsiaalsed segud Mixins.Styl:

Spritewidth ($ sprite) laius $ spriteeight ($ sprite) kõrgus $ spriteposition ($ sprite) taustapositsioon $ sprite $ spriteimage ($ sprite) taustapildi URL ($ sprite) sprite ($ sprite), kui! Match ("Hover" , Valija ()) &&! Match ("Active" valija ()) SpriteMage ($ sprite) spritepositsioon ($ sprite) spritewidth ($ sprite) spriteeight ($ sprite)

Ühendage segune ja genereeritud faili koordinaatidega peamistesse SRC / CSS / STYES.STYL SISELE failile:

@Import "Osaline / Sprite" @Import "osalised / segatid"

Pange tähele, et sprites peavad ühendama kasutajastiilidega @Import "osalised / stiile"

Pildi optimeerimine Web - plugin vähendab automaatselt teie piltide tarbetut teavet ja Soim neid optimaalse suurusega, mis võimaldab mõnel juhul vähendada piltide ulatust kuni 90%:

nPM i Gulp-ImageMin -D

JavaScripti töötlemise pluginad

Minefification JS. - plugin määrab teie JS-koodi vähendades selle allalaadimise aega:

nPM i Gulp-uglify -d

JS jälgimine - plugin kontrollib teie JS-koodi, et tuvastada kõik vastuolud ja toob need konsooli:

nPM I Jshint Gulp-Jshint -D

HTML töötlemise pluginad

Ühendatud failid - plugin võimaldab teil salvestada saidi staatilisi osi, nagu päis, jalus, kõrvale jne, eraldi failides ja ühendada need mõne osa teise faili. Päise väikeste muutuste puhul ei ole enam piisavalt, muuta kümneid või isegi sadu malli HTML-lehekülgi:

nPM i Gulp-Rigger -D -D

Plugin on samuti ühilduv JS-ga.

Ühendage kasutaja JS peamine JS SRC / JS / Main.js tarkvara ehitus:

// \u003d _main.js.

Ühenda index.html failide header.html ja jalus.html

// \u003d Kaasa / Header.html // \u003d Lisage / jalus.html

Muud pluginad

LiveLeload. - pluginal eemaldab iga kord brauseris lehekülje taaskäivitamise iga kord, et muuta muudatusi, nüüd juhtub see automaatselt salvestades muutunud faili salvestamisel:

nPM i Gulp-Connect -d

Kaitske lõhelt lahkumist - Mõnikord juhtub, et Gulp saab kriitiliste vigade korral vaatlusrežiimist välja lennata (peamiselt JS tõttu). See plugin, kui võimalik, püüab lahkuda Gulp-protsessidest toimivalt:

nPM i Gulp-torumees -D

Failide ümbernimetamine - Kõige tavalisem töö failinimedega. Plugin võimaldab teil faile täielikult ümber nimetada, muuta pikendust, näiteks eesliiteid ja postfixi lisada näiteks stiili stiili stiili stiili .min.csss:

nPM i Gulp-Rename -d -D

Nööbar - Mõnikord on vaja täiendada ehitamise kataloogi kataloogi, päästeplugina: päästmiseks on plugin:

Sourtseemap - Selleks, et pärast sihitit, jäid failid brauseri silumise kaudu loetavad, peate lisama haprikaadi minifiltrifailidele:

nPM i Gulp-Sourcemaps -D -D

Laiendatud kellafunktsioonid. - Plugin muudab käekellase, nüüd ei kirjuta kogu faile kogu faili, kui muudate kogu faili, on konkreetne modifitseeritud fail üle kirjutatud, mis säästab aega ja ressursse:

nPM i Gulp-Watch -D

Kontrollige paketti.json

Pealegi paigaldatud pluginadKontrollige meie paketti.jon. Tal peab olema umbes järgmine tüüp:

("Nimi": "Start", "Versioon": "1.0.0": "Kirjeldus": "Alusta pakk esipoole arendamiseks", "Autor": "Ivan Ivanov", "litsents": "MIT", " "Sõltuvused": (), "devDedendents": ("Gulp": "Latest", "Gulp-Autoprefixer": "Latest", "Gulp-Connect": "Latest", "Gulp-Imagemin": "Latest", "Jshint": "Latest", "Jshint-stiilne": "Latest", "Gulp-Jshint": "Latest", "Gulp-Minifify-CSS": "Latest", "Latest": "Latest", "Gulp-ümbernimetamine": "Latest", "Gulp-Rigner": "Latest", "Gulp-Sourcemaps": "Latest", "Gulp-Stylus": "Latest", "Gulp-uglify": "Latest", "Gulp-Watch": "Latest", "Gulp.sPritemith": "Viimane", "Rimraf": "Latest"))

Selle asemel, et viimane, teie puhul konkreetsed versioonid paigaldatud pluginad kirjutatakse. Sest Me moodustame meie alguspaketi, mida kasutatakse mitmesugustes projektides, samuti soovitatakse asendada versioonide väärtused hiljemalt alati koostada plug-i praegused versioonid.

Projekti kausta, Nood_modules Directory peab samuti ilmuma, kus kõik sõlme plug-in faile salvestatakse. Kõik soovitud pluginad on paigaldatud, saate minna Gulp-konfigureerimisele.

Gulpfile.js seadistamine.

gulpfile.js. - See on meie ülesannetehalduri peamine konfiguratsioonifail, see on selles, et me salvestame kõik seaded ja käsud.

Kõik Gulp töö tuleb alla ülesandeks ( inglise ülesanne). Ülesanne on eraldi sõltumatu funktsioon nimega. Iga ülesanne võib olla põhjustatud eraldi.

Tasuta režiim kaasaegsete standarditega

Esiteks faili, ühendage ühilduvusrežiim ainult kaasaegsete standarditega:

"Kasutage ranget";

Loe lähemalt käesoleva direktiivi kohta.

Initsialiseerida plugin

Pluginad käivitatakse järgmise disainiga:

var initplugin \u003d vaja ("plugin-nimi");

Vastavalt sellele disainile te alustate kõik meie pluginad:

VAR Gulp \u003d nõuda ("Gulp"), // Põhiline Plug Gulp Stylus \u003d nõuda ("Gulp-Stylus"), // Preprocessor Stylus prefiksiner \u003d nõuda ("Gulp-Autoprofiksis"), // SSSMIN-i sissepääs \u003d nõuda (" Gulp-Minifify-CSS "), // Minefiftion CSS UGLIFIFY \u003d nõuda (" Gulp-uglify "), // Minefication JS Jshint \u003d nõuda (" Gulp-Jshint "), // jälgimise vead JS Rigner \u003d nõuda (" Gulp -Rigger "), // tööga kaasamisega HTML-i ja JS Imagemin \u003d Nõuda (" Gulp-Imagemin "), // Piltide minimeerimine Spritesmith \u003d nõuda (" Gulp.spletesmith "), // "Rimraf"), // Puhastamise Sourcemaps \u003d nõuda ("Gulp-Sourcemaps"), // Sourcemaps Rename \u003d nõuda ("Gulp-ümbernimetamine"), // ümber nimetugi \u003d nõuda faile ("Gulp-torumees"), / / Kaitse peatamise peatamiseks Galp Watch \u003d vaja ("Gulp-Watch"), // Watch Connecti võimaluste laiendamine \u003d nõuda ("Gulp-Connect"); // Liveeload.

Radade konstandid

Mugavuse huvides määratleme kohe kõik viisid ja maskid:

VAR Path \u003d (Build: (// siin me viidame, kust valmistada valmis pärast kokkupanekufaile HTML: "Build /", JS: "Build / JS /", CSS: "Build / CSS /", IMG: "Build / CSS / Pilte / ", FONTS:" Ehita / fondid / ", Htaccess:" Build / ", Contentimg:" Build / IMG / ", Sprites:" SRC / CSS / pildid / ", Spridecss:" SRC / CSS / osaline / osaline / "), SRC: (// kuidas võtta allikas HTML:" SRC / Mall / *. HTML ", // Syntax SRC / Mall / *. HTML ütleb Gulp Mida me tahame võtta kõik failid laiendamisega.html JS: "SRC / JS / [^ _] *. JS", // Styles ja skriptid Me vajame ainult peamisi faile Jshint: "SRC / JS / *. JS", CSS: "SRC / CSS / stiile.Styl", CSVENDOR: "SRC / CSS / müüja\u003e *", // Kui me tahame raamatukogu faile eraldi salvestada, et rassenger img: "SRC / CSS / Pildid / ** / ***", // Syntax IMG / ** / 2 *. tähendab - võtke kõik kausta kõikide laienduste failid ja fonte sisestatud kataloogidest: "SRC / FONTS / paigaldatud", Contentimg: "SRC / IMG / ** / 2 *", SPRITES: "SRC / CSS / Sprites / *. PNG ", Htaccess:" SRC / .htaccess "), Watch: (// Me rõhutame, et KA muutmine KiH-failid Me tahame vaadata HTML-i: "SRC / Mall / ** / *. HTML", JS: "SRC / JS / ** / *. JS", CSS: "SRC / CSS / ** / 2 **" , IMG: "SRC / CSS / Pildid / ** / 7/27, Contentimg:" SRC / IMG / ** / *, FONTS: "SRC / FONTS / ** / 2 *", Htaccess: "SRC / .htaccess "

Pange tähele, et saame kasutada nimi maskid:

• * .js. - kõik js laiendiga failid
• [^ _] *. JS - kõik failid laiendamisega js, välja arvatud need, mis algavad madalamast allajoonist
• *.* - kõik praeguse kõneleja laiendiga failid
• / ** / * .html. - kõik failid laiendamisega.html praeguses kataloogis ja kõik tütarettevõtete kataloogid

Ülesanne (ülesanded)

Nüüd, kui kõik konstandid on kirjutatud välja, saate alustada Taskovi kirjutamist. Kõik ülesanded on järgmine disain:

Gulp.Task ("Taskme", funktsioon () (// mõned funktsioonid));

Mini-server ja Liveeload

Esiteks me konfigureerime kohaliku serveri ja Livelaadi toimimise:

// Kohalik server Gulp.taski arendamiseks ("Connect", funktsioon () (CONNECT.SERVER ((/ / Segage juurserveri konfiguratsioonide segamine:, // Pordi juurkataloog: 9999 Server, // Mis port kasutab LOTELOAD: TRUE // initsialiseerida töö LOVEELOAD));));

Tõenäoliselt peate tihti töötama korraga mitmetes projektides. Server võimaldab teil üheaegselt käivitada mitu serverit, piisavalt erinevaid projekte registreerida oma sadama.

Bild HTML.

// ülesanne hoone HTML Gulp.Task ("HTML: Build", funktsioon () (Gulp.src (Path.src.html) // Valige failid soovitud teele. Toru (rigger ()) // heliseb riggeri kaudu . Toru (Gulp.Dad) // mahalaadige need ehitamiseks .Pipe kausta (Connect.Reload ()) // ja taaskäivitage meie server uuenduste juurde));

Ehita JS.

// Kontrollige js vigade ja pin neid Gulp.Taski konsooli ("Jshint: Build", funktsioon () (tagasi Gulp.src (Path.src.jshint) // Valige failid soovitud teele. Toru (Jshint ( )) // jookseb Jshint'i kaudu .Pipe (Jshint.reportija ("Jshint-stiilne"))); // stiilis konsooli vigade väljund)); // Bilding YavaScript Gulp.Task ("JS: Build", funktsioon () (Gulp.SRC (Path.src.src.js) // Leia meie peamine fail.Pipe (rigger ()) // Helistav riggeri kaudu .init ()) // SourceMap initsialiseerimine .Pipe (uglify ()) // laulmine meie JS .Pipe (Sourcemaps.writ.write ()) // Pakkumiskaardid. Toru (Rename (Sufiks: ".min"))) / Lisa sufiks.min väljundfail.Pipe (Gulp.des (Path.Build.js)) // mahalaadimiseks valmis fail ehitades .Pipe (Connect.Reload ()) // ja taaskäivitage server));

Ehita spriit

Kõik pildid ühendamiseks sprites lisada kuni SRC / CSS / Sprites Directory ja pärast käivitamist Gulpist saada ühe surve pildi. Sprites'is ei tohiks te lisada logosid ja plaate ilma selgete suurusteta.

// Bilda sprites Gulp.Task ("Sprites: Build", funktsioon () (Var Spriteta \u003d Gulp.src (Path.src.sprites) // Valige kust pilte ühendada sprites (spriteesmith (((Imgname: ") Sprite.png ", // Spray Image'i nimi CSSNAME:" Sprite.Styl ", // Style nimi, kus Salvesta pildipositsioonid Imppathis:" Pildid / Sprite.png ", // Way Wheels Sprite CSSFormat:" Stylus "// formaat, milles ma töötan CSSstem-plaadi positsiooni:" Stylus.template.Mustache ", // faili mask cssvarmap: funktsioon (sprite.name \u003d" s- "+ sprite.name // iga sprite nimi koosneb Faili nimi ja disain "s-" nime alguses)))))); spreoretata.img.pipe (Gulp.des (Path.build.sphites)); // tee, kus me salvestame pildi spritata. CSS.Pipe (Gulp.des (tee .build.spritecss)); // tee, kus me salvestame stiile));

Sprite väljundi jaoks piisab segu kasutamiseks. Näiteks LOREM.PNG-faili jaoks näeb spriitilt proov välja näeb:

Loremi Sprite ($ S-Lorem)

Nüüd objekti klassi.Plom võtab suuruse pildi ja pildi ise taustal.

Bild staatilised pildid

Staatilised pildid on paigutuse mallis kasutatavad pildid.

// Buildim Staatilised pildid Gulp.Task ("Pilt: Build", funktsioon () (Gulp.src) // Valige meie pildid. Toru ((// / laulab neid progressiivsena): Tõsi, // Compression.jpg svgoplugins: [(REMOVEVIEWBOX: FALSE)], // SVG Interlaced: TRUE, //SVG.GIF OptimeerimineLevel: 3 // kompressioonisuhe 0 kuni 7))) .Pipe (Gulp.des (tee. Ehita.) img)) // mahalaadimine ehitamisel .Pipe (connect.Reload ()) // reboot server));

Bild dünaamilised pildid

Dünaamilised pildid on sisu pildid, mis muudavad saidil ja malli tasemel on ühendatud ainult demonstratsiooniga. Näiteks võib see olla uudiste jaoks pildid jne.

// Buildim Dynamic Pildid Gulp.Task ("imagescontent: Build", funktsioon () (Gulp.src (Path.src.SRC.CONENTIMG) .Pipe ((// laulab neid progresseeruvaks: TRUE, //page.jpg svgoplugins: [(REMOVEVIEWBOX: FALSE)], // SVG Interlaced: TRUE, //SPOTION.GIF optimeerimineLevel: 3 // compression suhe 0 kuni 7)))) .Pipe (Gulp.des (Path.Build.concentimg)) // Mahalaadimine ehitamisel .Pipe (Connect.Reload ()) // Taaskäivitage server));

Bildim CSS

// Building Custom CSS Gulp.Task ("CSSOWN: Build", funktsioon () (Gulp.SRC (Path.src.css) // Valige meie peamine stiili fail. Toru (Sourcemaps.init ()) // initsialiseerida Soucemap. Toru (pliiats (tihendus: TRUE "kuuluvad CSS": TRUE))))) // Stiillus .Pipe (eelinimestaja (brauser: ["viimane 3 versioon", "\u003e 1%", "st 8" "])))) // Lisa müüja prefikside.Pipe (CSSMIN ()) // surminem.Pipe (Sourcemaps.WRITE ()) // Propyash SourceEmap .Pipe (ümbernimetamine (sufiks:" .min "))) / / Lisa sufiks.Min väljundfaili nimi.Pipe (Gulp.des (Path.build.css)) // joogi ehitamisel .Pipe (connect.Reload ()) // reboot server));

Eraldi ülesanne väliste stiilide jaoks:

// Building Vendon CSS Gulp.task ("Cssvendor: Build", funktsioon () (Gulp.SRC (Path.src.cssvendor) // Võtame müüja kausta Toru (CSSMIN ()) // Surrem.Pipe (SOURCEEMAPS.WRITE ()) // Propyash SourCemap .Pipe (Gulp.des // reboot server);

Lisage ka Bild General CSS ülesanne:

// Bildim CSS terved Gulp.Task ("CSS: Build", ["CSSOWN: Build", // "Cssvendor: Build"];

Kui soovite käsitleda väliseid stiile kodust eraldi ja laadida neid üksikute failidega, peate riseerima rida "Cssvendor: Ehita"

Ehita fonte

// Bildim Gulp.Taski fondid ("Fondid: Build", funktsioon () (Gulp.src (Path.src.Fonte) .Pipe (Gulp.des))

Build.Htaccess.

// Bildim Htaccess Gulp.Task ("Htaccess: Build", funktsioon () (Gulp.src (Path.src.htcess) .Pipe (Gulp.des (Path.build.htaccess)) // mahalaadimine));

Ühishoone

Selleks, et me ostaksite iga osa eraldi, prophaatide ülesanne üldise ehitamise jaoks:

// Bildim kõik Gulp.Task ("Build", ["HTML: Ehita", "Jshint: Build", "JS: Build", "Sprites: Build", "CSS: Build", "Fondid: Build", " Htaccess: Build, "Pilt: Build", "imagesContent: Build"];

Bilda puhastamine

Mõnikord on vaja ehitamise kataloogi täielikult tühjendada. Siin saab järgmine ülesanne päästa:

// puhastage Bild kausta Gulp.task ("puhas", funktsioon (CB) (Rimraf (Path.clean, CB);));

Vaadata või jälgida reaalajas muutusi

Üks tähtsamaid ja kasulikud funktsioonid Gulp on kellafunktsioon, mis võimaldab teil reaalajas jälgida kõiki muudatusi toodetud failidega ja sõltuvalt sellest, täidavad konkreetseid samme:

// Watch Gulp.Task ("Watch", funktsioon () (// Bildim HTML-i muutuva kella korral (funktsioon (sündmus, CB) (Gulp.start ("HTML: Build");)); // Buctim Sprites juhul muutuva kella (, funktsiooni (sündmus, CB) (Gulp.start ("Sprites: Build");)))); // Buildim kontekstuaalne proovivõtu valimi puhul (, funktsioon (sündmus, CB) (Gulp. Alusta ("imagescontent: build");))); // Bildimi CSS-i vahetamise korral (, funktsioon (sündmus, CB) (Gulp.start (CSS: Build ");))) muutuva kellade puhul (, ["Jshint"); // Bildim JS muutuva kella korral (, funktsioon (sündmus, CB) (Gulp.start ("JS: Build");))); // Bildimi staatilised pildid Käekella muutmise korral (funktsioon ("Pilt: Build");))); // Bildimi fondid Kui muudate kella (, funktsioon (sündmus, CB) (Gulp.start ("FONTS: Ehitamine");))); / / Bildim HTCCESS korral kellade (, funktsiooni (sündmus, CB) (Gulp.start ("Htaccess: Build");)));));

Vaikimisi toimingud

Vaiketoimingud - millised ülesanded täidavad ülesande halduri konsooli Gulp-käsu sisestamisel:

// vaikimisi toimingud Gulp.Task ("Default", ["Build", "Watch", "Connect"]);

Meie juhtumi puhul toob me meie projektile kaasa meie projektile, lülitame kellarežiimi ja käivitame serveri.

Käsurea käsud

Kõik Galpa käsud käsureale koosnevad kahest osast. See on otseselt käsk ja tabeli nimi. Siin on meie config'i käskude loend:

• gulp - põhiline käsk, käivitab ülesande vaikimisi
• gulp Build - Bildim kõik
• gulp Watch - Alusta Watch
• gulp Clean - ehitamise kataloogi puhastamine
• gulp Connect - Start Server
• gulp HTML: Build - HTML Bild
• gulp Jshint: Build - kontrollige JS vigade jaoks
• gulp JS: Build - Build JS
• gulp Sprites: Build - Ehita Sprite
• gulp Image: Build - Bild staatilised pildid
• gulp ImageContent: Build - Bild dünaamilised pildid
• gulp CSSOWN: Build - CSS Custom Bild
• gulp Cssvendor: Build - Bild välised CSS
• gulp CSS: Build - ühine CSS Bild
• gulp Fonte: Build - Bild Fonte
• gulp Htaccess: Build - Build.Htaccess

Selles etapis on Gulpfile.js lõpule viidud.

Kopeerige projekti lähtepakett

Alustamiseks minna läbi konsooli kausta, kus me arendame, näiteks CD arendada / näide ja kopeerida kõike alates lähtepaketi kataloog meie projekti CP -A ~ / Arene / Start /. ~ / Arendage / näide /

See koopia meetod on kõige mugavam, sest See kopeeritakse täpselt kõik, sealhulgas peidetud failid .gitignore jne.

Järeldus

Kasutades käesolev juhend Oleme koostanud lähtepaketi, et kasutada oma projektides Gulfi esiotsa arendamiseks.

Ka see pakett on saadaval GitHubis

Postiteenistuja

See artikkel ei ole lõplik ja seda ajakohastatakse sõltuvalt muudatustest ja parandustest.