Dezvoltatorul front-end al domnului. Construiți front-end pe degetele dvs. folosind Gulp Pleasant Frontend Project Build

24 septembrie. , 2016

Întrebările vor fi luate în considerare: Lucrul cu stilurile SASS utilizând SOSSMAPS, lipire și comprimare a fișierelor JS, asamblarea cerințelor utilizând RJS, preprocesare HTML, curățare și copiere a fișierelor, optimizarea imaginilor, ridicarea serverului web local și a modului de observare - Watch-Tasch. Bine ați venit la articol, vor fi multe interesante!
P.S. Materialul material, prin urmare, articolul va fi împărțit în 3 părți: Bazele de asamblare și organizarea proiectelor, scrierea aplicațiilor de testare pe coloana vertebrală + necesită și de fapt, adunarea cu Gulp.

De ce aveți nevoie de o adunare a unui frontend.

Unul dintre cele mai importante principii în dezvoltare este modularitatea. Fracționarea codului proiectului în multe bucăți mici, în mod ideal, cuplate. Aceasta se referă nu numai la codul JavaScript. Acest lucru se aplică și stilurilor și șabloanelor HTML, la diverse biblioteci.

Acest lucru poate arăta ca structura unei aplicații simple scrise pe coloana vertebrală + necesită.

Și acesta este un mic proiect de testare, în anexă reală Fișierele pot fi sute și mii. Faceți un browser de utilizator să facă sute de cereri HTTP cel puțin inuman. Trebuie să furnizăm maxim Încărcare rapidă Serviciu scris. Prin urmare, una dintre cele mai importante sarcini ale instrumentului de asamblare este o minister, o scădere a numărului de dosare utilizate pe proiect, lipindu-le în bande. La ieșire, trebuie să avem o structură mai scurtă, de exemplu, aceasta este:

Diferența este bine vizibilă: În loc de zeci de fișiere, avem un singur text.html, un fișier CSS, imagini optimizate și comprimate într-un dosar separat, deși nu este vizibil în captura de ecran :-)

Și, de asemenea, cel mai interesant lucru: în dosarul JS am primit doar 3 fișiere comprimate.
P.S. De ce trei, și nu unul, voi spune mai târziu.
Rețineți că aceasta este structura reală a aplicației de testare pe care o vom scrie în curând.

Am descris doar un singur motiv pentru utilizarea instrumentelor de asamblare, dar este deja suficient să începeți să utilizați Gulp, Grunt, Webpack sau ceva similar în proiectele dvs. Și nu contează dacă scriem un serviciu imens, un mic spa (ca în articolul nostru) sau pagina de aterizare. Principiile adunării sunt aceleași pentru toate proiectele și diferă numai într-o varietate de sarcini și abordări pentru a le rezolva. În exemplul nostru, vom crea o structură care se poate extinde în viitor, dar ieșirea va avea întotdeauna o stivă de fișiere, gata pentru producția dvs. - un site de luptă.

Cum se organizează corect proiectul.

Principiul acestui lucru: Există o secțiune cu fișierele dezvoltatorilor, sunt colectate și orice altceva pe care acest bun servește. Creați 2 dosare în rădăcina proiectului: SRC și construiți. În SRC și numai în SRC vom lucra, vom crea fișiere noi, le vom edita și se distrează în general. În captura de ecran de mai sus, în cazul în care o pereche de duzini de fișiere, vedeți conținutul dosarului SRC al proiectului nostru de testare. Și chiar sub niște fișiere NEAT din dosarul de construcție. Se formează numai în mod automat, instrumentele de asamblare, nimic de regulă acolo. Oricum, cu fiecare ansamblu, conținutul său este menținut de fișiere noi (și în modul de dezvoltare a dosarelor de construcție deloc - este îndepărtat pentru a nu corpul ochilor)

În plus față de SRC și construi, folderul pachet.json, gulpfile.js, dosarul NODE_MODALES și opțional, .GiGnits (dacă lucrați cu Gitz) va fi înrădăcinată. Încă trebuie să observ dosarul jurnale - aceasta este o generație a lui Apache și un obicei de lungă durată de a păstra jurnalele proiectului în dosarul propriu, desigur, eliminând-o din depozitul Gita :-)

Acesta este modul în care arată structura proiectului:

Potrivit conținutului de construcție, cred că nu există întrebări, voi explica mai mult pe SRC:

1. HTML - index.html, rădăcină fișier index. Proiect. De ce nu imediat la rădăcina SRC? Deoarece va preia și crea un gulp. Cum, învățați puțin mai târziu, când aproape de ansamblu.
2. img - imagini, nu comprimate, obișnuite
3. JS - toate proiectele, modelele și prezentările JavaScript Dogging
4. Lib - biblioteci terțe, cum ar fi fundal.js, solicită.js, lodash.js și alții
5. Script-uri - Scripturile JS care sunt necesare pe un loc de luptă, dar nu sunt necesare în modul de dezvoltare. Semnificație Coduri pentru analiză, diverse experimente și alte piese de marketing.
6. Stiluri - fișiere SAS cu stiluri. Fișierul CSS colectat va fi pliat în același folder (numai pentru modul de dezvoltare)
7. TPL - șabloane HTML. Vizionările coloanei vertebrale utilizate utilizând pluginul de text necesită.js

Aspectul aplicației de testare este destul de neclintit. Puteți spune că o astfel de prostii este făcută de o pereche hTML rânduri și codul CSS fără un singur fișier JS.
Dar urmăm obiectivul de a nu trage o imagine frumoasă și de a crea o structură de proiect fiabilă și să considerăm cât mai multe aspecte cât mai multe aspecte. Când proiectul sparge până la sute de fișiere, vom fi pregătiți pentru acest atac și vom gestiona cu ușurință cu volume crescute. Prin urmare, în ciuda misiunii sărace și a misiunii externe a cererii de testare, vom învăța principiile de întrunire pentru proiecte mari și complexe.

La ce sarcini de asamblare rezolvăm.

Permiteți-mi să vă reamintesc că am fost de acord cu două moduri de asamblare: dezvoltare și producție. Vom scrie toate sarcinile noastre, amintindu-ne aceste două moduri. Nu avem nevoie de toate operațiunile în timpul procesului de dezvoltare și nu toți în Adunarea pentru producție.

Iată o listă a ceea ce vom face după ce am scris o cerere de testare:

1. Ștergerea fișierelor și a dosarelor din rezultatele ansamblului anterior
2. Asamblarea CSS din fișierele SASS, cu compresie și fără
3. Conectarea SourceMaps în stiluri, în același timp vă voi arăta pe exemplu, de ce este necesar
4. Asamblarea JS-Bandl cu cerințele
5. Legătura și comprimarea fișierelor individuale JS (analiști)
6. Preprocesarea HTML.
7. Optimizarea și compresia imaginii
8. Ridicați un server web local
9. Obiective Obiective de observare atunci când lucrați în modul de dezvoltare - Watch-Tasch
10. Colecția unele sarcini Într-o grămadă - gusturi finale pentru asamblarea producției și lucrările de dezvoltare

Deci, ne-am întrebat de ce este necesar, în general, fronzătorul, hotărât cu privire la structura proiectului, au dezmembrat în detaliu că ne-ar plăcea de la Adunare și am vorbit despre aplicația de testare. În următoarea parte a articolului, vom scrie o aplicație simplă pentru coloana vertebrală împreună cu cerințele. Dacă nu sunteți familiarizat cu coloana vertebrală și / sau solicitați.js, nu este nimic teribil. De fapt, backbone-ulsocod în aplicație nu este suficient. Puteți utiliza cu ușurință biblioteca dvs. preferată în schimb sau doar scrieți codul pe JavaScript / Jquery și săriți secțiunea Setări cerințe.

În acele zile, când siturile erau mici, nu a fost nevoie de o adunare separată a frontenței. Cu toate acestea, volumul și complexitatea CSS și JS a crescut, iar punctul de vedere în care este convenabil să se dezvolte, a început să difere mult din viziunea în care este necesar să se prezinte rezultatul utilizatorului. Au existat astfel de sarcini ca concatenare (lipire) a fișierelor, minimizarea codului și chiar pre-compilarea. Rezultatul a fost sistemul specializat pentru asamblarea frondentului, pe care o vom spune.

Desigur, de îndată ce nevoia unui ansamblu a fost vizibil, imediat instrumentele folosite de Backend au început să transfere la frontend. Principala lor problemă este motivul pentru care sunt mai puțin folosiți pentru față, ele nu sunt complet ascuțite sub specificitatea sa, deoarece structura proiectului, tehnologiile utilizate și ciclul de dezvoltare sunt foarte dependente de sarcinile proiectului și pot diferi semnificativ . Aceeași furnică, de exemplu, are o sintaxă verbală și nu știe în mod special cum să facă lucrurile necesare pentru față: sarcini încorporate destul de puțin, dar se extinde prost. Dacă vorbim despre GNU, este mult mai universal deoarece operează comenzi Shell. Din dezavantaje, trebuie să menționați o sintaxă specială care trebuie studiată în continuare, necesitatea de a cunoaște bine coaja, precum și tendința spre complicarea rapidă a machiajului cu o creștere a cerințelor pentru adunare.

Să ne uităm la locul de dimensiuni medii cu o structură standard și să încercăm să enumeră principalele etape ale adunării, pe care o trece. Pentru simplitate, să presupunem că nu vă deranjați de crearea diferitelor fișiere JS pentru diferite pagini, dar în același timp doriți să păstrați mai multe fișiere mici în împrejurimile de dezvoltare pentru a susține orice modularitate. De obicei, arată ca ceva de genul acesta:

/ libs / jquery.min.js subliniere.min.js / js / comun.js carusel.js popups.js ....

Sistemul de asamblare face de obicei următoarele:

concatase Toate fișierele JS la una (în ordinea dorită, nu vrem să descărcați scripturile noastre mai devreme decât jQuery);
verifică codul JS privind validitatea (de exemplu, folosind Jshint);
minimizează codul, dacă este necesar, acesta va fi descris (adică face de neînțeles);
creează fișiere CSS (ordinea aici este, de asemenea, importantă, deoarece proprietățile sunt adesea redefinite);
minimizează CSS;
plătiți fișierele într-un director separat din care le conectați în HTML.

Adesea, această schemă simplă este complicată de cerințe suplimentare: Testele sunt acționate, sunt compilate CSS-preprocesoare, imaginile sunt optimizate, se compilează șabloanele.

Toate aceste sarcini și chiar mai mult, sunt capabile să rezolve instrumentele moderne de asamblare. Vom lua în considerare cele mai populare soluții care lucrează pe platforma NODE.JS. Avantajul lor este un limbaj clar care știe (sau cred că ei cunosc toți dezvoltatorii Frontend, accentul inițial pe soluționarea sarcinilor Frontendului, precum și un mediu NODE.JS clar în care vă puteți dezvolta deja cererea dvs. .

Grunt.

Grunt este cel mai vechi, cel mai important și mai popular instrument pentru asamblare. Aproape tot sistemul de asamblare luată în considerare, într-un fel sau altul se compară cu Grât, iar unele au apărut ca alternative mai rapide sau mai simple. În ciuda acestui fapt, are câteva defecte esențiale.

În primul rând, așa cum spun mulți dezvoltatori Frontend, Grunt este ales. Pentru a configura un sistem simplu de asamblare, veți avea nevoie de un config sub sute de linii. Cu toate acestea, în sine, aceasta nu este o astfel de deficiență: configul este citit destul de ușor și, în virtutea popularității grunt, nu este de obicei posibil să găsiți o configurație gata de recuperare sub sarcina modelului.

În al doilea rând, Grunt a fost dezvoltat ca produs universal, adică pe baza sa, este posibil să se rezolve aproape orice sarcină asociată asamblării proiectului. Este rece, dar versatilitatea trebuie să plătească. Ambele au menționat multi-rezistență și viteză. În comparație cu alte sisteme de asamblare pe NODE.JS Grunt considerabil mai lent, și, în special neplăcute, tinde să încetinească pe măsură ce proiectul crește. Dacă nu intrați în detaliile arhitecturii grunt, atunci motivul se află în faptul că de fiecare dată când trebuie să colectați, de exemplu, fișierul JS, reaserează toate fișierele JS. Puteți încerca să accelerați procesul de asamblare, vorbind legăturile necesare între fișiere, dar pe un proiect cu un arbore de dependență complex poate fi prea complex.

În ciuda tuturor acestor lucruri, Grunt are un ecosistem uriaș: sute de pluginuri, mii de proiecte, miliarde de dezvoltatori, asta-i tot. Adică, nu este suficient ca Grunt să fie universal, de asemenea, un plugin pentru sarcina dvs. deja, cel mai probabil scris.

Rezumarea, putem spune că Grunt este o alegere excelentă pentru proiectele mici și mijlocii, în special dacă ați instalat mai devreme sisteme de asamblare. O comunitate uriașă, o grămadă de pluginuri, o documentație de înțeles și chiar articole și rapoarte în limba rusă pentru cei nefericiți care nu pot fără ea. Și, bineînțeles, dacă în viitor, dintr-un anumit motiv, Grosul va înceta să vă aranjeze, puteți merge întotdeauna la un alt sistem, lipsit de defectele sale.

Înghiţitură.

Gulp - Dezvoltarea în prezent în sistemul de asamblare a momentului. Baza arhitecturii sale este utilizarea fluxurilor în NODE.JS, care vă permite să nu înregistrați fișiere și foldere temporare pe disc. Principalele avantaje ale Gulp - viteza și scurtarea configului. Mai mult, dacă primul este, fără îndoială, concivanța în comparație cu GRK se realizează pur și simplu datorită celeilalte structuri. Dacă în configurația GRUNT, utilizați în mod individual cu plugin-uri, ajustând fiecare dintre ele, apoi în configul Gulp, trebuie să descrieți procesul pe care fiecare fișier (sau un set de fișiere) trebuie colectat. Iată un exemplu de viață al compilației SASS:

Gulp.tașk ("stiluri", funcția ("stiluri / * sCSS") .pipe (SASS ((stil: "extins"))))) (Rename (sufix: ".min"))). țeavă (minifycss ()) .pipe (Gulp.Dest ("Build / Stiluri / CSS"));));

În prima linie, înregistrăm sarcina pentru gulp cu stilurile de nume. Apoi, descriem în mod constant ceea ce trebuie să faceți cu fiecare dintre fișierele potrivite pentru stiluri / * mască. SCSS: compilați SASS, add.min la numele fișierului, minimalizați, puneți în directorul final. Dacă aveți nevoie să faceți altceva cu acest fișier, vom adăuga pur și simplu comanda corespunzătoare, de exemplu. (Adăugați un comentariu cu un Unicorn ASCII la începutul fișierului) (sper pentru această sarcină de zi cu zi, în cele din urmă plugin). Îmi place această abordare pentru a scrie mai mult config: descrie mai bine ceea ce se întâmplă cu adevărat cu fișierele dvs.

Desigur, în timp ce Gulp pierde grunt de numărul de plug-in-uri, dar există o sarcină plug-in. Cel mai probabil, aveți suficiente pluginuri existente, iar dacă există ceva foarte rău, puteți să vă scrieți întotdeauna propria (glumă). Apropo, există un pachet Gulp-Grunt care vă permite să executați sarcini deranjante din Gulp, dacă este foarte necesar.

Dacă vă place o abordare similară a adunării, viteza este importantă și nu este necesar să efectuați sarcini specifice, pluginul pentru care este doar pentru Grunt, atunci Gulp poate deveni o alegere excelentă. În prezent, Gulp rămâne cel mai grav concurent.

Broccolli.

Cel mai tânăr dintre instrumentele de asamblare luate în considerare este acum, de fapt, în etapa de dezvoltare. Dezvoltatorii Broccolli nu ascund că Gulp a fost inspirat, dar consideră că unele concepte care stau la baza acestuia, eronate. De exemplu, au ales cache-ul tuturor rezultatelor ansamblului intermediar (și implementate de fiecare dintre plug-in-urile) pentru ao accelera în loc de o revoluție parțială a fișierelor necesare. De asemenea, ei nu și-au plăcut că Gulp este cel mai bine operat cu transformarea unui fișier într-o singură finală, adică una la una. Pentru a îmbunătăți executarea operațiunilor de tip "mult la unul", în momentul în care Gulp se dezvoltă schemă complicată Odată cu crearea unui sistem de fișiere virtuale pe care dezvoltatorii Broccolli par complicații excesive și manifestarea slăbiciunii conceptelor autentice ale Gulpului. Broccolli operează inițial conceptele de copaci în loc de fișiere și face doar transformarea copacilor la alți copaci (chiar degenerat și de la un vârf).

O abordare teoretică foarte rezonabilă a problemei asamblării nu elimină problemele numărului de extensii la Broccolli. Din păcate, acestea sunt de aproximativ două duzini și sunt îndeplinite doar sarcinile cele mai de bază. Dacă doriți să încercați ceva nou, uitați-vă la Broccolli, este destul de rapid, se dezvoltă în mod activ, dar probabil că este folosit în proiecte grave.

Gustare

Brunchul a fost creat cu aceeași sarcină - pentru a dedica neplăcerea pe toate fronturile, dar sa apropiat de ea complet de cealaltă parte. Brunch Developers au decis să facă o bună înțelegere a domeniului, adică să facă un instrument mai puțin universal care să fie ascuțit exact sub sarcinile Frontendumului, de exemplu, fără setări, înțelegeți că * .js este un fișier Cu scripturi, * .Coffee - Coffeescript și așa mai departe. Brunchul este destul de rapid, mult mai rapid grunt, dar un pic mai lent gulp. Avantajele necondiționate ale brunchului ar trebui să includă, de asemenea, o configurație cu adevărat compactă, mai mică decât cea a Grunt și Gulp, sunt uneori. Aici, de exemplu, un simplu Brunch Config:

Exports.Config \u003d Fișiere: JavaScripts: Jointo: "JavaScripts / App.js": / ^ App / "JavaScripts / Vendor.js": / ^ (Bower_Components | Vendor) / Stofele: Jointo: "Stylesheets / Apps.css comandă : După: ["Vendor / Stiluri / Helpers.css"] Șabloane: Jointo: "JavaScripts / App.js"

Rețineți că configul poate fi scris atât pe coffeescript (atât în \u200b\u200bacest caz) cât și pe JS obișnuit. Creați un modul regulat care returnează JSON cu setările de asamblare.

Acordați atenție cheilor de comunitate și ordine. Aceasta este cunoașterea domeniului subiectului, pe care am menționat-o este - la nivelul configurației brunchului știe că cel mai probabil doriți să lipiți fișierele și unele înainte de restul. Acesta este exact ceea ce vă permite să înlocuiți 400 de linii din configurația Grunt pe linii de brunch 20-30.

În plus, ecosistemul brunch este mult mai mic decât mormântul și chiar cu Gulp. Plugin-uri de aproximativ 50 (comparați cu 450+ în Gulp, de exemplu), dezvoltarea nu este foarte rapidă, în general, totul este destul de trist aici.

Rezumarea: Dacă vă place foarte mult configurațiile scurte, viteza este importantă, dar dacă nu are nevoie de pași speciali în stadiul de asamblare, vă puteți uita la brunch. Confuz, desigur nu un numar mare de Plugin-uri, dar poate situația se va schimba.

ENB.

Ei bine, la sfârșit este cel mai dulce. Vreau să spun despre sistemul de asamblare dezvoltat în Yandex Marat Dulin, numit ENB. Este acum și folosim pe proiectul nostru. Abordarea sa este fundamental diferită de toate sistemele descrise: Inițial a fost creat pentru a lucra cu proiecte care utilizează metodologia BEM, deși, în calitate de autor, platforma sa este liberă de ideologia BEM și poate fi utilizată pentru toate proiectele unei structuri adecvate .

Pe scurt, care este esența. În ENB, acționăm conceptul de țintă, adică fișierul final care trebuie colectat sau noduri (foldere, în cazul general), pentru care trebuie să colectați un set de fișiere. Pentru a colecta fișierul țintă, folosim câteva tehnologii (aproximativ vorbit, plugin-uri în termeni grunt, deși tehnologiile sunt mai mici și mai specializate). Primul ENB este determinat de setul de fișiere sursă necesare pentru a construi obiective (mai multe tehnologii de bază sunt implicate, în mod implicit, care lucrează cu metodologia BEM, adică că caută fișierul * .bemdecl, în care dependența Din acest nod din diferite blocuri este speriat acest copac de dependență (când blocul, pe care depinde pagina dvs., depinde de cealaltă, ambele sunt conectate în ordinea dorită) și apoi găsește fișierele necesare pentru fiecare tehnologie înregistrată. ENB urmează secvența de transformare a fișierelor descrisă în config (aici puteți urmări unele analogie cu Gulp). În ciuda unor diferențe de abordarea sistemului standard de asamblare, sobering cu concepte de bază, atunci lucrul cu ENB este destul de ușor.

Principalele avantaje ale ENB: rata de asamblare, datorită sistemului flexibil de cache și capacitatea de a face schimb de date intermediare între diferite tehnologii, paralelizarea proceselor independente și alocarea celor mai severe tehnologii în subproprocese separate. ENB este extrem de ușor să scrieți tehnologii noi dacă nu vă place comportamentul standardului.

Dezavantajele includ faptul că configul ENB este destul de verbos, deoarece este posibil să gestionați absolut toate etapele de asamblare. În plus, ENB a fost încă scrisă pentru metodologia BEM și pentru a-l fixa la proiect cu o structură complet diferită, va necesita televitări inutile. Pentru ENB, nu există atât de multe tehnologii scrise (aproximativ 60), dar cu majoritatea sarcinilor proiectelor BEM, se confruntă cu un bang.

Rezumarea: ENB - cea mai buna alegere Pentru proiectele bazate pe metodologia BEM, pe care o consider personal cele mai potrivite pentru site-uri mijlocii și mari, de la organizarea codului pentru blocuri și bibic. Este foarte rapid, colectează zeci de pagini și sute de fișiere pentru numărarea secundelor, simple în configurarea și plăcută de utilizat. Dacă proiectul dvs. este mare, sunteți confundat în regulile de cod și fișiere pe o mie de rânduri, vă sfătuiesc să explorați BEM ca o modalitate de a organiza structura proiectelor Frontend. Și când vă place BEM, vă veți iubi și vă va iubi ca fiind cel mai nativ instrument pentru asamblarea proiectelor BEM.

Doriți să formați mai multe puncte în Viteza Google Page? Nu știu ce fel de asamblare "front-end"? Atunci tu ești interesant.

Ce este nodul?

Nod.js este obișnuit numit "JavaScript de Nord". Această platformă vă permite să scrieți programe utilizând sintaxa JavaScript.

Există implementări pentru Windows, Mac OS și Linux.

Kitul include un manager de pachete NPM.Cu care puteți instala pachete.

Ce este gulpul?

Gulp este un pachet scris pe NODE.JS, care ajută webmasterii să construiască proiecte la aspectul layout.

Pentru a instala Gulp, trebuie să utilizați linia de comandă.

NPM Instalați Gulp.

La sfârșitul acestui articol există un fișier care va contribui la colectarea unui proiect tipic.

În acest exemplu, cu Gulp, vom face următoarele:

Optimizarea automată a imaginilor pentru web;
Colectați un stiluri minime de la precrossori (SASS, SCS);
Colectați un fișier minim cu scripturi.

Cum se colectează un front-end folosind Gulp?

Pentru a înțelege cum funcționează totul, vom examina totul în pași.

Structura poate fi vizualizată în captura de ecran.

Folderul activelor - pentru surse de imagine, stiluri și scripturi;
Folderul public - rezultatul adunării proiectului va fi localizat în acesta;
gulpFile.js - un fișier care descrie logica lucrării muncitorului;
pachet.json este un fișier care conține informații despre programe și pluginuri utilizate pentru funcționarea corectă a Gulpului.

pachet.json.

Conținutul fișierului:

("Nume": "Gulp_Project", "Versiunea": "1.0.0", "Descriere": "exemplu", "Main": "Gulpfile.js", "Scripturi": ("Test": "Echo \\" EROARE: Nici un test specificat \\ "&& ieșire 1"), "Autor": "Dmitriy Ilichev", "licență": "ISC", "Devidenddencies": ("Gulp": "^ 3.9.0", "Gulp-Csso ":" 1.0.0 "," Gulp-Concat ":" ^ 2.6.0 "," Gulp-Uglify ":" ^ 1.2.0 "," Gulp-imagemin ":" ^ 2.3.0 "," gulp -SASS ":" ^ 2.1.1 "))

Acest fișier este clar după cum urmează:

Nume proiect Gulp_project, versiune și descriere;
Fișierul principal este GulpFile.js;
Autorul proiectului, Licența - Toate acestea nu sunt atât de importante și pur și simplu aceste câmpuri pot fi goale;
Un punct interesant este devotamentele. Descrie dependențele.

Fișierul poate fi editat în obișnuit editor de text. De asemenea, poate fi creat pentru noul proiect prin comanda NPM INT.

Bazat pe acest lucru, NODE.JS înțelege că va trebui să lucrăm:

Gulp versiunea 3.9.0 și mai mare pentru asamblare;
Gulp-CSSO versiunea 1.0.0 și mai sus - plugin pentru a mintia stilurile (CSS);
Gulp-Concat versiunea 2.6.0 și mai sus - plugin pentru lipirea mai multor fișiere la unul;
Gulp-Uglify versiunea 1.2.0 și mai sus - Pluginul pentru a recitifica JavaScript;
Gulp-Imagemin versiunea 2.3.0 și mai sus - plugin pentru a optimiza imaginile;
Versiunea Gulp-Sass 2.1.1 și mai sus - plugin pentru a obține CSS de la SASS (SCS).

Excelent! După aceea, trebuie să instalați totul. Acest lucru este terminat linie de comanda. În timpul dosarului proiectului trebuie să executați comanda:

Instalarea npm.

Toate informațiile necesare vor fi luate din pachet.json.

După toate aceste magice, va apărea dosarul de service NODE_MODALES.

gulpfile.js.

Conținutul fișierului:

/ * * * Determinați variabilele * * / VAR Gulp \u003d necesită ("Gulp"), // a raportat Gulp JS Uglify \u003d necesită ("Gulp-Uglify"), // Minificație JS Concat \u003d necesită ("Gulp-concac") , // lipirea fișierului Imagemin \u003d necesită ("Gulp-imagemin"), // Minificarea CSSO \u003d necesită imagini ("Gulp-CSSO"), // Minificație CSS Sass \u003d necesită ("Gulp-Sass"); // SASS Converting (SCSS) în CSS / * * * Crearea sarcinilor (gusturi) * * /// SASS sarcină. Lansează comanda Gulp Sass ("SASS", funcția () (Gulp.SRC ("./ Stiluri / stil / stil.scs") // Fișier care procesează.pipe (SASS () On ("Eroare" , sass.logerror)) // convertiți SASS în CSS .Pipe (CSSSO ()) // MinifaxTureTure CSS, obținut la pasul anterior. Țeavă (Gulp.Dest ("Public / CSS /")); // rezultat scriem la adresa specificată)); // sarcina "js". Lansează comanda Gulp JS Gulp.tașk ("JS", funcția () (Gulp.Src (["./assets/javascripts/jquery-2.1.4.min.js", "./assets/javascripts/bootstrap. Min .js "," ./assets/javascripts/script.js "]) // Fișierele care procedați. (Concat (" min.js ")) // lipici toate js .pipe (uglify ()) // rezultat "Port" Minifa.Pipe (Gulp.Dest ("./ Public / JS /")) // Rezultatul scriem la adresa specificată)); // problema "imagini". Lansează "imaginile Gulp" de Gulp.tașk ("Imagini", Funcție () (Gulp.Src ("Active / Imagini / ** / *") // Luăm orice fișiere în dosar și subfolderele sale. Țeavă ( Imagemin ()) // Optimizăm imaginile pentru web. Țeavă (Gulp.Dest ("./ Imagini / Imagini /"))) // Rezultat Scriem la adresa specificată)); // Sarcina "ceas". Acesta este pornit de comanda "Gulp Watch" // monitorizează modificările fișierelor și pornește automat celelalte sarcini Gulp.tașk ("ceas", funcția () (// când modificați fișierele * .Scss în folderul și subfolderele stilurilor Rulați sarcina de Gulp SASS. Uita-te ("./ Stiluri / stiluri / ** / *. SCSS", ["SASS"]); // Când modificați dosarul de fișiere * .js "JavaScripts" și subfolderele rulează JS Gulp. Sarcina de vizionare ("./ Active / JavaScripts / ** / *. Js", ["JS"]); // Când schimbați fișierele din folderul și subfolderele "Imagini", lansați imaginile Gulp.Watch (" ./ active / imagini / ** / * ", [" imagini "]);));

CHIP principal - în sarcină ceas.. După ce o conduceți o dată, puteți lucra în siguranță cu surse, iar proiectul va fi automat colectat de fiecare dată când salvați fișiere editabile.

La ieșire, ne pregătim să publicăm șablonul pe Internet.

Sarcinile pot fi lansate separat. Ca rezultat, în arhivă la sfârșitul articolului veți găsi următoarele:

Fotografiile! Notă Pentru a despacheta această arhivă, în primul rând, va trebui să executați comanda NPM Instalare. Acest dosar conține un număr destul de mare de fișiere și de fiecare dată când le copiați / lipiți - o pierdere de timp.

In custodie

Există un set imens de alte plug-uri utile. De exemplu, un șablon minunat de jad, care este uneori accelerarea scrisului codul HTML., Cineva poate avea nevoie de mai puțin și așa mai departe.

Exemplul prezentat este doar o platformă și un șablon din care este posibil să începeți să utilizați toate aceste chipsuri frumoase fără prea multe cunoștințe.

ÎN În ultima vreme Înghiţitură. câștigând o mare popularitate și este clar de ce. Este mai rapid, mai frumos și mai ușor decât Grunt.. Trebuia să lucrez adesea cu el, dar am luat mereu soluții gata Și nu a înțeles pe deplin cum a făcut totul. În acest weekend, am decis să dezasamblez și să închid acest lucru mica problema. Luați asta și vorbiți astăzi.

Ce este gulpul?

Gulp este un instrument de asamblare frontală. Vă permite să automatizați sarcini repetate (asamblarea și minificarea fișierelor CSS și JS, lansarea testelor, reporniți browserul și altele). Astfel, Gulp accelerează și optimizează procesul de dezvoltare web.

Instalarea gulpului.

Instalați gulpul este suficient de ușor. Dacă ceva nu funcționează, scrieți în comentarii sau ați făcut-o problema. Deci, pentru instalare trebuie să faceți 3 pași:

Instalați Gulp Global.
Instalați Gulp ca deces (dependențe de dezvoltare)
Creați un fișier GulpFile.js

Primul pas este de a instala Gulp la nivel global. Deschideți terminalul și scrieți:

nPM Install - Gulp Global

După aceea, trebuie să instalați Gulp ca deces pentru proiectul dvs. Asigurați-vă că aveți un fișier pachet.json. Dacă nu este, atunci creați-o scriind-o în consola Init NPM. Acum puteți instala Gulp ca deces:

npm install --Save-dev gulp

În cele din urmă, trebuie să creați GulpFile.js în rădăcina proiectului dvs., care va conține sarcinile dvs. (sarcini). Ca o etapă intermediară, vom instala pluginul Gulp-Util. Pentru a afișa cum sunt instalate pluginurile:

nPM Install --Save-Dev Gulp-Util

Acum a venit timpul să scrie prima noastră sarcină. Deschideți fișierul GulpFile.Js nou creat și scrieți-l după cum urmează:

/ * Fișier: GulpFile.js * / // colecta toate pluginurile noastre Var Gulp \u003d necesită ("Gulp"), Gutil \u003d necesită ("Gulp-Util"); // Creați o sarcină care va fi executată în mod implicit Înghiţitură. Sarcină ("Implicit", funcția () (întoarceți gutil. Log ("Gulp rulează!")));

Și acum trebuie să lansăm Gulp în terminal și vom vedea ceva similar cu acesta:

\u003e Gulp [12:32:08] Folosind Gulpfile ~ / Proiecte / Gulp-Scotch-Io / GulpFile.js [12:32:08] Pornirea "Implicit" ... [12:32:08] Gulp rulează! [12:32:08] terminat "Implicit" după 1 ms

Prezentare generală

Gulp în sine este foarte scale de oportunități. Dar tot ce trebuie să fii pus în pluginuri separate. Împreună cu Gulp creează miracole.

API-ul Gulp este foarte mic și conține doar 4 funcții de ordin superior:

gulp.tașk.
gulp.src.
gulp.Dest.
gulp.watch.

gulp.tașk definește sarcinile noastre. Argumentele sunt numite, dependența (matricea) și funcția (acțiunile principale). Dependențele nu pot fi:

Înghiţitură. Sarcină ("mytașk", funcția () (// face ceva)); Înghiţitură. Sarcină ("dependentTSK", ["mytask"], funcția () () // faceți ceva după "Mytask" va fi executat });

gulp.src indică fișierele pe care vrem să le folosim. Utilizează. Accesul la țevi la fișiere prin pluginuri.

gulp.Dest puncte către dosarul în care dorim să salvăm fișierele modificate.

gulp.src și Gulp.Dest este utilizat pentru o copie simplă a fișierelor:

Înghiţitură. Sarcină ("copyhtml", funcția () ( // Copiați toate fișierele HTML de la sursa / public / Înghiţitură. Src (sursa / * html "). Țeavă (gulp. Destin (public "); );

În Gulp, este construit un sistem de răspuns la răspuns la dosar (Gulp.watch). Puteți utiliza această sarcină pentru a începe celelalte sarcini de care aveți nevoie la schimbarea fișierelor.

Sistemele de amenajare a sarcinilor și sistemele de asamblare accelerează foarte mult activitatea, automatizarea compilației, testarea și alte sarcini de rutină. Ca și în orice altă zonă, există o concurență puternică pe această piață. Până în 2014, Task Ranner Grunnt dominat printre ei, dar mai târziu, o mică echipă a fost separată de proiect, care a decis să facă un instrument alternativ, Gulp, ansamblu de proiect orientat.

Pentru a vă ajuta să decideți asupra selecției, în cadrul articolului, luați în considerare principalii manageri de sarcini:

grunt.

Și, de asemenea, atingeți alte mijloace și construirea metodelor.

Privind puțin înainte, să spunem că folosim Gulp în Waveaccess. Implementarea instrumentului sa dovedit a fi foarte ușor: la familia produselor Jetbrains (Ideea, Webstorm, Resharper), pe care am folosit mulți ani au pluginuri excelente pentru a lucra cu Gulp / Grunt și NPM / NODEJS.

Task Manager vs. Sistemul de asamblare a proiectului: Care este diferența?

Gestionar de sarcini - instrument pentru automatizarea sarcinilor. În configurația de amenajări, puteți înregistra numele acestor sarcini; funcția care le îndeplinește; Plugin-uri pentru accelerarea acțiunilor standard, dar sarcinile în sine pot fi arbitrare. De exemplu:

Sarcini pentru implementare (proiect ZIP, încărcarea proiectului server la distanta etc)
Sarcini de asamblare a proiectului (miniere, optimizare, cod de verificare pentru validitate și TP)
Sarcini pentru migrarea datelor etc.

Exemple de astfel de instrumente - Grunt și Gulp.

Sistem de asamblare - Acesta este un instrument care rezolvă doar o singură sarcină tipică a asamblării proiectului pe scriptul Java, care include:

concatenare,
verificarea codului pentru validitate,
minificarea codului și TD.

Instrumente similare includ webpack, broccoli, brunch, browsery și altele.

Toate sarcinile similare de frontend pot fi efectuate automat utilizând alte mijloace: de exemplu, folosind NPM Run, despre care vom vorbi și în articol.

Exemplu

Luați în considerare un fișier Gulp pentru a asambla proiectul:

Const gulp \u003d necesită ("gulp"); Const cafea \u003d necesită ("gulp-cafea"); Const concat \u003d necesită ("Gulp-Concat"); const uglify \u003d necesită ("gulp-uglify"); const imagemin \u003d necesită ("gulp-imagemin"); const surymaps \u003d necesită ("gulp-sourcemaps"); const del \u003d necesită ('del'); )

Dar Adunarea este un caz special de o sarcină tipică mare. Pentru Gulp, puteți scrie un alt config - spune, pentru a implementa:

Var Gulp \u003d necesită ("Gulp"); var zip \u003d necesită ("gulp-zip"); VAR DEL \u003d necesită ("DEL"); VAR INSTALL \u003d necesită ("Gulp-Install"); Var Runsequence \u003d necesită ("secvența de alergare"); VAR AWSLAmbda \u003d necesită ("Nod-Aws-Lambda"); gulp.tașk ("Clean" (CB) (CB) (Del (["./ dist", "./dist.zip"], CB);)); gulp.tașk ("copie", funcția () ("index.js") .pipe (gulp.dest (dist / ");));); Gulp.tașk ("nod-mods", function ("./ pachet.json") .pipe (Gulp.Dest ("DIST /") .Pipe (Instalare (producție: true)));)); // Curățați toate directoarele AWS-SDK de la NODE_MODALES. Nu avem nevoie să le încărcați de când instanța Lambda va fi deja disponibilă la nivel global. Gulp.tașk ("Clean-AWS-SDK", funcția (Callback) (Delback) (Del ("DIST / NODODALES / ** / AWS-SDK "], apel invers);)) .Pipe (zip (dist.zip ")) .pipe (gulp.dest (" ./ "));))); gulp.tașk (" Încărcare ", funcție (apelare) (Awslambda.deploy (". / DIST .ZIP ", necesită (" ./ lambda-config.js "), callback);)); gulp.tașk (" implementare ", funcția (apel invers) (run-ul de întoarcere ([" Clean "], [" copie "] , ["NODE-MODS"], ["CLEAN-AWS-SDK"], [ZIP "], [" Încărcare "], apel invers);));

A poate fi descrisă de noi sarcini ca o combinație a celor existente:

Gulp.tașk ("Implementare", Gulp.Series ("Clean", "Copiere", "Nod-Mods", "Clean-AWS-SDK", "Zip", "Încărcare"));

Aceasta este diferența. Acum luați în considerare instrumentele de bază.

gulp vs. Grunt.

Deci, în fața noastră sunt două cursuri de sarcini: Gulp și Grunt. Ambele sunt folosite de NODE.JS și NPM și au pus sarcinile folosind JavaScript.

La prima vedere, ele sunt similare, cu toate acestea, Gulp are ceva care îl face mai convenabil de asamblare: abilitatea este paralelă cu sarcinile de proces și o configurație compactă, API-ul laconic. Să arătăm mai aproape de principiul lor de lucru.

Datele de filetare

Avem un dosar de grant care face ca asamblarea și prelucrarea CSS.

Se poate vedea din ea care a zgâriat când începe fiecare proces:

deschide fișierul;

lansați procesul;

salvează schimbări;

Închide fișierul procesat pentru a preveni următorul proces în acesta;

Înregistrează fișierul în folderul final.

Adică, lanțul include crearea mai multor foldere temporale și salvați fișiere intermediare:

Pluginurile scrieți autori diferiți. Pentru fiecare plugin poate lucra cu fișiere, ocolire, fișierele trebuie trimise ca obiecte. În Gulp, această sarcină este efectuată de sistemul de fișiere virtuale Vynyl-Fs. Și Gulp trimite imediat fișierul la următorul proces fără a crea fișiere temporare și fără a salva pe disc.

Aceeași configurație pentru Gulp este deja mai compactă:

Mecanismul general de lucru - Fișierele de streaming fără scriere la disc:

Secvența de execuție a sarcinii

Există o altă diferență: Gulp de implicit efectuează asincron lucruri. Există avantaje în acest sens și Contra. În același fișier de configurare, oferim comenzii să numere fișierele din directorul DEV / * SCSS și să le trimiteți la SASS.

Fluxurile trimit rezultatul V.Pipe. Metodă. Țeava vă permite să colectați rezultatul la tampon în părți și când este plin, trimiteți imediat informații fluxului pentru citire, fără a termina recepționarea conținutului directorului.

Execuția de sarcină secvențială face ca Gulpa să fie rapidă și puternică, dar ocazional necesitatea de a îndeplini în continuare sarcini sincron ca în grunt. Problema poate fi rezolvată prin apel invers, întoarcerea fluxului sau promisiunii. Sarcina lui Habré este dezmembrată în detaliu. Există o alternativă pe site-ul npm.js

Dacă utilizați Grât, dar sunteți atras de date de streaming - același modul Vynyl-Fs poate fi folosit pentru ao implementa în Grunt.

API-ul laconic Gulp are doar 5 metode:

(Nume, Fn). Înregistrează o caracteristică numită. Puteți specifica dependența de alte sarcini dacă aveți nevoie să le executați mai întâi.

Rulați (sarcini ...). Îndeplinește sarcini.

Ceas (glob, fn). Efectuează o funcție în cazul în care fișierul de pe locul lumii se schimbă.

SRC (GLOB). Ca parametru ia masca de fișier și returnează firul reprezentând aceste fișiere. Apoi, fluxul poate fi transferat la pluginul de intrare.

Destina (dosarul). Salvează fișiere în dosarul specificat.

Aș dori mai ales să menționez prezența lui.watch () în proiectul "nativ" API, deoarece urmărirea modificărilor constante în fișiere este cea mai importantă componentă a adunării. Scurta API face posibilă concentrarea asupra principalelor sale sarcini de asamblare a proiectelor.

Alternative gulp și grunt

În ciuda popularității Gulp (mai mult de 130 de descărcări pe zi) și grunt (mai mult de 86 de descărcări pe zi în conformitate cu NPMJs.com), dezvoltatorii văd în aceste sisteme și dezavantajele lor: de exemplu, dependența de plug-in-uri, incomplete Documentație, Debuging incomod. Alternativ, puteți lua în considerare sistemele de asamblare a proiectelor (cum ar fi broccoli și webpack) sau scripturi NPM.

Sisteme de asamblare a proiectului

Luați în considerare câteva soluții alternative pe platforma nod.js. Pentru a asambla proiectul, ei pot înlocui Gulp și Grunt.

Acest sistem, cum ar fi Gulp, a apărut ca o sarcină concurentă - grunt timpurie, dar dezvoltatorii l-au conceput inițial ca asistent de a construi cu toate avantajele și dezavantajele. El nu va "înțelege" fără setări, că * .js este un fișier cu scripturi, * .Coffee este coffeescript; Config este mai compact. Cu toate acestea, orice acțiuni arbitrare în stadiul adunării nu va putea să se angajeze.

Aici este brunchul de fișier config. Este scris în Coffeescript (puteți scrie și pe JS):

Aici vreau să fiu atenți la operatorii de comenzi și comenzi. La nivelul configului de brunch, se pare că trebuie să colectați fișiere în ordinea dorită. Ca rezultat, configul durează 20-30 de linii.

Brocoli.

Indi-instrument, care este în curs de dezvoltare. Dezvoltatorii săi doreau să creeze deja concurența Gulp.

În comparație cu Gulp, instrumentul Broccoli utilizează alte principii:

Adunarea de accelerare. Fiecare plugin implementează un caching intermediar al rezultatelor ansamblului în locul rebeling parțial doar fișierele necesare.

Copaci în loc de fișiere. Gulp este cel mai bine transformând un fișier într-o singură finală. Broccolli implicit utilizează numai copaci, nu fișiere și le transformă în alți copaci (degenerați de la un vârf).

În prezent, instrumentul se dezvoltă în mod activ, apar noi pluginuri, dar pentru proiecte serioase este prea devreme: pluginurile nu sunt suficiente.

Webpack - flexibil sistem modular asamblare. Are sintaxă neobișnuită, dar ea însăși adoptă orice sintaxă a modulelor.

Înțelegerea că trebuie să concurați cu atât de giganți ca Gulp, creatorii au decis să ne ușureze viața în dezvoltarea unor proiecte mari. Și a adăugat la utilitate:

Abilitatea de a construi automat dependențe și resurse din lemn.

Instrumente confortabile pentru implementarea încărcării dinamice.

Compatibil cu practic orice module (AMD, UMD, ES 2015, JS comune, module terțe părți pe baza lor).

Compatibilitate cu preprocesoare (SASS, Babel, Script de cafea, script de tip etc.).

Reîncărcare live (tehnologia de boot asincronă, la care browserul actualizează nu toate paginile, ci aplicații separate).

Abilitatea de a partaja codul și de a genera o mulțime de fișiere de pachete, evitând crearea unui pachet greu.

Abilitatea de a optimiza codul.

Separat, puteți observa o abordare flexibilă a dependențelor. Modulul poate fi fișierul JS, CSS și HTML și chiar JPEG cu PNG. Puteți utiliza necesită ("myjsfile.js") și solicitați ("mycssfile.css"), împărtășiți și utilizați din nou părți ale artefactului.

Citiți mai multe despre posibilitățile, configurațiile instrumentului, pluginurile pot fi găsite pe GitHub, în \u200b\u200bprezentarea cu FrontTalks: Immersie profundă în Webpack.

nPM script-uri

Sarcinile de asamblare pot fi rezolvate utilizând scripturile NPM. Multe sperie această idee: Puține capabilități, scripturile nu sunt suficient de repede în comparație cu gulp sau webpack. Cu toate acestea, aceste deficiențe sunt exagerate.

Capabilități de script npm

SCRIPTELE NPM rezolvă o mulțime de sarcini. De exemplu, puteți implementa scripturi de capcană:

("Nume": "NPM-script-uri-exemplu", "Versiune": "1.0.0", "Descriere": "NPM Scripts Exemplu", "Scripturi": ("Prebuild": "Echo eu alerg înainte de a construi script" , "Construiți": "Cross-En NoDe_env \u003d Producție Webpack" "Postbuild": "Echo alerg după scriptul de construire"))

Scripturile vor fi încărcate în conformitate cu prefixele: Prebuild, de exemplu, începe înainte de a construi, deoarece are prefixul Pre. În consecință, postuild va fi încărcat ultima dată. Echipa NPM Run Build le va lansa în ordinea dorită.

Puteți apela un script de la celălalt pentru a descompune sarcinile complexe. De exemplu, aici sarcina Prebuild solicită sarcina curată.

("Nume": "NPM-script-uri-exemplu", "Versiune": "1.0.0", "Descriere": "NPM Scripts Exemplu", "Script-uri": ("Clean": "Rimraf ./dist && mkdir dist "," Prebuild ":" NPM Run Clean "," Construiți ":" Cross-En NoDe_env \u003d Producție Webpack "))

Dacă sarcina devine prea complicată, puteți apela întotdeauna fișier separat.:

("Nume": "NPM-script-uri-exemplu", "Versiune": "1.0.0", "Descriere": "Scripturi NPM Exemplu", "Scripturi": ("Construi": "Nod build.js"))

Datorită streamingului de gulp pentru sarcini de asamblare, acesta a devenit mult mai convenabil decât Grunt. Dar poate fi implementat prin NPM. În Windows și Unix, streamingul se face implicit, fără a salva fișiere intermediare.

De exemplu, în Unix puteți face conținutul fișierului GREP și trimiteți-l într-un fișier nou:

GREP "Numele meu" bigfile.txt\u003e linesthathavemyname.txt

Redirecționarea (\u003e) trimite șirurile dorite în fișierul de destinație. Sarcina este efectuată fără a salva fișiere intermediare.

Dar există inconveniente: nu puteți lăsa comentarii în pachet.json. Calea poate fi crearea unor scripturi scurte cu nume de înțelegere care vizează o anumită sarcină mică. În mai multe detalii, întrebarea de înlocuire a standardelor de sarcini NPM este bine aprinsă în articolul de limbă engleză de ce am lăsat Gulp și mormânt pentru scripturile NPM.

Rezultat

Pe piață există un mare instrument de competiție pentru automatizarea sarcinilor de rutină (de exemplu, Gulp și Grunt), precum și instrumente de automatizare a asamblării proiectului (webpack, broccoli, medusa, browsery, etc.).

Dacă vă uitați la amenajările de sarcini, atunci Gulp în comparație cu Grunt este mai simplu, înțeleasă și produce: câștigă prin salvarea operațiuni de discuri. Dar Grunt are mai multe pluginuri (de exemplu, există un plugin de testare). Din acest motiv, el rămâne mulți fani.

Dacă vorbim doar despre adunare, atunci Gulp are toate avantajele față de grunt:

Arhitectura fluxului pentru transferul de fișiere pe lanțul furnizat de modulul Vynyl-FS.

Implicit - execuția sarcinii asincrone.

API-ul laconic este de numai 5 funcții.

În același timp, construirea webpack este un instrument la fel de interesant. Oferă tehnologie de reîncărcare live care accelerează reînnoirea browserului. Acesta este un imens Plus: Tehnologia economisește timp pentru a apăsa butonul de actualizare pe care dezvoltatorii trebuie să îl apese în mod constant. Gulp are, de asemenea, reîncărcare live, dar webpack este dificil de comparat cu gulp sau grunt, deoarece este "ascuțit" numai sub construirea și nu "nu" cunoaște modul de rezolvare a sarcinilor arbitrare.

Toate aceste soluții sunt perfect integrate cu familia de produse din Jetbrains, cu toate acestea, în waveleccess preferat pentru oportunități largi Și pentru versetele și pentru specialiștii Frontend.

Dacă aveți întrebări și trebuie să dezvoltați un proiect web, scrieți-ne pe noi [E-mail protejat]

În față
Grunt.
Înghiţitură.
Alergătorii de sarcini.