Comprimarea imaginilor, fișierelor JS și CSS pentru a optimiza încărcarea paginilor web și multe altele. Pentru a simplifica acest proces, vă sugerăm să utilizați versiunea de proiect Gulp 4, pe care Andrey Gorokhov o îmbunătățește constant. Linkurile de descărcare vor fi prezentate mai jos, dar deocamdată să trecem prin punctele principale: descriere și instalare.

Gulp Project Builder

Gulp este un constructor de proiecte, un instrument pentru automatizarea sarcinilor descrise mai sus. Vă va ajuta să vă accelerați munca și să pregătiți în mod competent proiectul pentru lansare.

Puteți descărca ansamblul din depozitul Github sau prin linia de comandă Git. Pe viitor, îl puteți personaliza în funcție de nevoile dvs.

Particularități

• Denumirea clasei BEM
• Se utilizează structura BEM
• Se folosește preprocesorul SCSS
• folosește transpilerul Babel pentru a suporta JavaScript modern (ES6) în browsere
• folosit de Webpack pentru a construi module JavaScript
• CSS-grid smart-grid-ul bazat pe Bootstrap este folosit pentru un aspect rapid adaptiv
• este folosit codul hard

Instalare

• instalați NodeJS (dacă este necesar) și Yarn
• descărcați versiunea cu Git: git clone https://github.com/andreyalexeich/gulp-scss-starter.git
• instalează gulp global: yarn global add gulp-cli
• accesați folderul de compilare descărcat: cd gulp-scss-starter
• descărcați dependențele necesare: yarn
• pentru a începe, introduceți comanda: yarn run dev (modul de dezvoltare)
• pentru a construi proiectul, tastați yarn run build (modul de construire)

Dacă ați făcut totul corect, ar trebui să aveți un browser cu un server local deschis. Modul build implică optimizarea proiectului: compresia imaginii, minimizarea fișierelor CSS și JS pentru încărcare pe server.

Dacă aveți probleme la instalare, vizionați acest videoclip:

Structura fișierului

Gulp-SCSS-Starter ├── Dist ├── Cam-sarcini Gulp ├── Src │ ├── blocuri │ ├── fonturi │ ├ cameră │ │ ├─feri JS │ ├── stiluri │ ├─ Vederi │ └── .htaccess ├── gulpfile.babel.js ├── webpack.config.js ├── package.json ├── .babelrc.js ├── rc.js ├── rc.js.─m─js. ─ .stylelintrc ├── .stylelintignore └── .gitignore

• Rădăcina dosarului:
  • .babelrc.js - Setări Babel
  • .bemrc.js - setări BEM
  • .eslintrc.json - setări ESLint
  • .gitignore - împiedică Git să urmărească fișierele
  • .stylelintrc - Setări Stylelint
  • .stylelintignore - împiedică Stylelint să urmărească fișierele
  • gulpfile.babel.js - Setări Gulp
  • webpack.config.js - Setări Webpack
  • package.json - listă de dependențe
• folder src - folosit în timpul dezvoltării:
  • Blocuri BEM: src/blocks
  • fonturi: src/fonts
  • imagini: src/img
  • Fișiere JS: src/js
  • paginile site-ului: src/views/pages
  • Fișiere SCSS: src/styles
  • Fișiere HTML: src/views
  • Fișier de configurare a serverului web Apache cu setări gzip (compresie fără pierderi): src/.htaccess
• Dosarul dist este folderul din care este lansat serverul de dezvoltare locală (când rulați yarn run dev)
• folderul gulp-tasks - dosar cu Gulp-tasks

Echipe

• yarn run lint:style - Verificați fișierele SCSS. VSCode necesită instalarea pluginului. Pentru WebStorm sau PHPStorm, Stylelint trebuie să fie activat în Limbi și cadre - Foi de stil - Stylelint (erorile vor fi remediate automat când fișierul este salvat)
• yarn run lint:style --fix - remediază erorile din fișierele SCSS
• yarn run dev - lansează serverul pentru dezvoltarea proiectului
• yarn run build - construiește un proiect cu optimizare fără a porni serverul
• yarn run build views - compilați fișiere Pug
• yarn run build styles - compilați fișiere SCSS
• yarn run build scripts - construiți fișiere JS
• yarn run build images - build images
• yarn run build webp - convertiți imaginile în format .webp
• yarn run build sprites - colectează sprites
• yarn run build fonts - build fonts
• yarn run build favicons - construiți favicons
• yarn run build gzip - construiți configurația Apache

Abordare componentă a dezvoltării site-ului web

• Fiecare bloc BEM are propriul folder în interiorul src/blocks/modules
• folderul unui bloc BEM conține un fișier HTML, un fișier SCSS și un fișier JS (dacă blocul folosește un script)
  • Fișierul HTML bloc este importat în fișierul src/views/index.html (sau în fișierul de pagină necesar din care va fi apelat blocul)
  • Fișierul bloc SCSS este importat în fișierul src/blocks/modules/_modules.scss
  • Fișierul Block JS este importat în src/js/import/modules.js

Un exemplu de structură de foldere cu un bloc BEM:

Blocuri ├── module │ ├──header │ │ ├── header.html │ │ ├── header.js │ │ ├──s header.s

Pentru a nu crea manual folderul și fișierele corespunzătoare, este suficient să scrieți comanda bem create my-block în consolă - pentru a crea un folder bloc BEM, unde my-block este numele blocului BEM

Pagini de proiect

• paginile proiectului sunt în folderul src/views/pages
  • pagina principală: src/views/index.html

Fonturi

• fonturile sunt în folderul src/fonts
  • utilizați formatele .woff și .woff2
  • fonturile sunt incluse în fișierul src/styles/base/_fonts.scss
  • puteți converti fonturi locale folosind acest serviciu

Imagini

• imaginile sunt în folderul src/img
  • imaginea pentru generarea favicon-urilor trebuie să fie localizată în folderul src/img/favicon și să aibă o dimensiune de cel puțin 1024px x 1024px
  • imaginile sunt convertite automat în format .webp. Informații detaliate despre utilizare.

Biblioteci terțe

• toate bibliotecile terțe sunt instalate în folderul node_modules
  • pentru a le încărca, utilizați comanda yarn add package_name
  • pentru a include fișiere JS ale bibliotecilor, importați-le chiar la începutul fișierului JS al blocului BEM (adică blocul BEM pe care îl folosește scriptul), de exemplu:

  import$din jquery;

  • pentru a include fișiere de stil de bibliotecă, importați-le în fișierul src/styles/vendor/_libs.scss
  • Fișierele JS și fișierele de stil ale bibliotecilor nu pot fi modificate independent

⚠️ Dacă proiectul tău folosește mai multe biblioteci care trebuie incluse pe mai multe pagini, pentru a evita erori, trebuie să:

• de-a lungul căii src/js/import creați un folder pagini
• în folderul pagini, creați un fișier js pentru pagină, de exemplu, pageA.js și importați biblioteca acolo, care va fi folosită numai pe această pagină
  • faceți același pas pentru pagini suplimentare
• în fișierul webpack.config.js, adăugați fișiere page js la punctul de intrare, exemplu:

Intrare: (principal: „./src/js/index.js”, paginaA: „./src/js/import/pages/pageA.js”, pagina B: „./src/js/import/pages/pageB.js” }

• includeți fișierele js compilate pe paginile necesare

Rețea inteligentă CSS

Robinetul include smart-grid CSS de Dmitry Lavrik. Vă permite să scăpați de clasele inutile din marcaj prin utilizarea mixin-urilor în SCSS și accelerează aspectul adaptiv. Configurația este deja configurată conform grilei Bootstrap. Exemplu de utilizare:

Articole ( @include row-flex (); @include md (justify-content , center ); .item ( @include col (); @include size (3 ); @include size-md (5 ); @include size- xs(10); ))

24 septembrie , 2016

Vor fi abordate următoarele subiecte: lucrul cu stiluri sass folosind hărți sursă, lipirea și comprimarea fișierelor js, construirea requirejs cu rjs, preprocesarea html, curățarea și copierea fișierelor, optimizarea imaginilor, ridicarea unui server web local și modul de vizionare - task-tasks. Bun venit la articol, vor fi o mulțime de lucruri interesante!
P.S. Există o mulțime de materiale, așa că articolul va fi împărțit în 3 părți: elementele de bază ale asamblarii și organizarea proiectului, scrierea unei aplicații de testare pe Backbone + Require.js și, de fapt, construirea cu gulp.

De ce trebuie să construiți un frontend.

Unul dintre cele mai importante principii în dezvoltare este modularitatea. Împărțirea codului de proiect în multe module mici, în mod ideal, cuplate liber. Acest lucru se aplică mult mai mult decât codul javascript. Acest lucru se aplică stilurilor și șabloanelor html pentru diferite biblioteci.

Structura unei aplicații simple scrise în Backbone + Require ar putea arăta cam așa.

Și acesta este un mic proiect de testare, într-o aplicație reală pot exista sute și mii de fișiere. Forțarea browserului utilizatorului să facă sute de solicitări http este cel puțin inuman. Trebuie să asigurăm cea mai rapidă încărcare a serviciului pe care l-am scris. Prin urmare, una dintre cele mai importante sarcini ale instrumentelor de construcție este minimizarea, reducerea numărului de fișiere utilizate în proiect, lipirea lor în pachete. La ieșire, ar trebui să avem o structură mai concisă, de exemplu, ca aceasta:

Diferența este clar vizibilă: în loc de zeci de fișiere, avem un fișier index.html, un fișier css, imagini optimizate și comprimate într-un folder separat, deși acest lucru nu este vizibil în captură de ecran :-)

Și, de asemenea, cel mai interesant: în folderul js, am primit doar 3 fișiere comprimate.
P.S. De ce trei și nu unul, vă spun 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 compilare, dar acesta este suficient pentru a începe să utilizați gulp, grunt, webpack sau altele asemenea în proiectele dvs. Și nu contează dacă scriem un serviciu uriaș, un mic SPA (ca în articolul nostru) sau o pagină de destinație. Principiile de asamblare sunt aceleași pentru toate proiectele și diferă doar prin varietatea de sarcini și abordări ale soluției lor. În exemplul nostru, vom crea o structură care poate fi extinsă în orice fel în viitor, dar rezultatul va fi întotdeauna un teanc ordonat de fișiere, gata să fie turnat în site-ul dvs. de producție - luptă.

Cum să organizezi corect un proiect.

Principiul este acesta: există o secțiune cu fișiere de dezvoltator, există cu fișiere colectate și tot ce servește acest lucru. Să creăm 2 foldere în rădăcina proiectului: src și build. În src și numai în src vom lucra, vom crea fișiere noi, le vom edita și în general ne vom distra. În captura de ecran de mai sus, unde există câteva zeci de fișiere, ați văzut exact conținutul folderului src al proiectului nostru de testare. Și chiar mai jos sunt câteva fișiere îngrijite din folderul de compilare. Se formează doar automat, prin instrumente de asamblare, nu trebuie editat nimic acolo. Oricum, cu fiecare ansamblu, conținutul său este suprascris cu fișiere noi (și în modul de dezvoltare, nu există deloc un folder de compilare - este șters pentru a nu fi o bătaie de vedere)

Pe lângă src și build, fișierele package.json, gulpfile.js, folderul node_modules și, opțional, .gitignore (dacă lucrați cu git) vor fi în rădăcină. Puteți vedea în continuare folderul jurnal în locul meu - acesta este un produs al apache și un obicei de lungă durată de a păstra jurnalele de proiect în propriul folder, desigur, excluzându-l din depozitul git :-)

Iată cum arată întreaga structură a proiectului:

Conform conținutului build-ului, cred că nu există întrebări, voi explica mai detaliat despre src:

• 1. html - index.html, fișierul index rădăcină al proiectului. De ce nu imediat la root src? Pentru că va fi preprocesat și creat prin înghițire. Cum, vom afla puțin mai târziu, când ne vom ocupa de ansamblu.
• 2. img - imagini, necomprimate, normale
• 3. js - toate mișcările javascript ale proiectului, modelele și vederile Backbone
• 4. lib - biblioteci terțe, cum ar fi backbone.js, require.js, lodash.js și altele
• 5. scripturi - scripturi js care sunt necesare pe un site de producție, dar nu sunt necesare în modul de dezvoltare. Aceasta se referă la coduri pentru analize, diverse experimente și alte piese de marketing.
• 6. stiluri - fișiere sass cu stiluri. Fișierul css asamblat va fi adăugat în același folder (numai pentru modul de dezvoltare)
• 7. tpl - șabloane html. Folosit de vizualizările Backbone folosind pluginul text require.js

Aspectul aplicației de testare este destul de inestetic. Puteți spune că acest tip de prostie se face cu câteva linii de cod html și css fără un singur fișier js.
Dar scopul nostru nu este să desenăm o imagine frumoasă, ci să creăm o structură de proiect de încredere și să luăm în considerare cât mai multe aspecte ale ansamblului. Când proiectul crește la sute de fișiere, vom fi pregătiți pentru acest flagel și vom face față cu ușurință volumelor crescute. Prin urmare, în ciuda micii și mizeriei exterioare a aplicației de testare, vom învăța principiile de asamblare pentru proiecte mari și complexe.

Ce sarcini de asamblare vom rezolva.

Permiteți-mi să vă reamintesc că am convenit asupra a două moduri de construire: dezvoltare și producție. Vom scrie toate sarcinile noastre ținând cont de aceste două moduri. Nu toate operațiunile sunt necesare în procesul de dezvoltare și nu toate în asamblarea pentru producție.

Iată o listă cu ceea ce vom face după ce scriem o aplicație de testare:

• 1. Curățarea fișierelor și folderelor din rezultatele versiunii anterioare
• 2. Construirea css din fișiere sass, cu și fără compresie
• 3. Conectarea hărților sursă la stiluri, în același timp voi arăta cu un exemplu de ce este nevoie de acest lucru
• 4. Construirea unui pachet js cu requirejs
• 5. Lipirea și comprimarea fișierelor js individuale (analitice)
• 6. Preprocesare HTML
• 7. Optimizarea și compresia imaginii
• 8. Creșterea unui server web local
• 9. Sarcini pentru monitorizarea fișierelor atunci când lucrați în modul de dezvoltare - watch-tasks
• 10. Colectarea sarcinilor separate într-o grămadă - sarcini finale pentru producție-asamblare și dezvoltare-lucru

Așadar, am discutat de ce trebuie să construim front-end-ul, ne-am hotărât asupra structurii proiectului, am analizat în detaliu ce dorim de la build și am vorbit în termeni generali despre aplicația de testare. În următoarea parte a articolului, vom scrie o aplicație Backbone simplă împreună cu Require.js. Dacă nu sunteți familiarizat cu Backbone și/sau Require.js, atunci nu aveți de ce să vă faceți griji. De fapt, nu există suficient cod Backbone în aplicație. Puteți utiliza cu ușurință biblioteca dvs. preferată în schimb sau pur și simplu scrie cod javascript/jquery și sări peste secțiunea de configurare requirejs.

Acest manual conține o descriere a instrumentelor frontale utile și cele mai frecvent utilizate. Veți putea învăța procesul de instalare a instrumentelor și principalele puncte de lucru cu acestea.

NPM

Introducere

În timpul dezvoltării unui proiect, este adesea necesar să adăugați biblioteci și pluginuri terțe. Ca rezultat, dezvoltatorul trebuie să caute dependența necesară, să descarce, să despacheteze arhiva și să copieze fișierele în proiect. Managerii de pachete vor ajuta la automatizarea acestei lucrări de rutină.

manager de pachete- software care vă permite să gestionați procesul de instalare, dezinstalare, configurare și actualizare a diverselor componente.

Adăugarea de biblioteci terță parte folosind managerul de pachete este înlocuită cu câteva comenzi în terminal.

Unul dintre managerii de pachete utilizați în proiectele frontend este NPM.

npm(Manager de pachete Node.js) este un manager de pachete inclus cu Node.js. Folosit pentru a descărca pachete de pe serverul cloud npm sau pentru a încărca pachete pe acest server.

Site-ul oficial

Începutul lucrării

Pentru a instala npm, trebuie să descărcați și să instalați NodeJS (npm va fi instalat automat): https://nodejs.org/en/.

Utilizare

Instalarea pachetelor

Un pachet este unul sau mai multe fișiere JavaScript care reprezintă un fel de bibliotecă sau instrument. Pentru a instala un pachet folosind npm, rulați următoarea comandă:

instalare npm<название пакета>

Cheia este folosită pentru a instala pachetul la nivel global -g. După instalare, pachetul, împreună cu sursele, se află în director module_nod/.

Verificare versiuni

Pentru a verifica versiunea curentă a npm, trebuie să rulați comanda:

Configurarea fișierului de configurare

Fişier pachet.json conține informații despre aplicația dvs.: nume, versiune, dependențe etc. Orice director care conține acest fișier este interpretat ca un pachet Node.js.

Pentru a crea un fișier pachet.json trebuie să rulezi comanda:

npm init

După aceea, va trebui să completați câteva informații despre proiect.

Acest fișier va stoca numele și versiunile tuturor pachetelor necesare în proiect. Cu comanda instalare npm puteți descărca toate pachetele care sunt în pachet.json.

Pentru a instala un pachet și a-l salva automat în fișierul package.json, utilizați comanda:

instalare npm<название пакета>--save-dev

Alternative

Fire

Particularități

• Crearea unui server web și reîncărcarea automată a paginii în browser la salvarea codului, urmărirea modificărilor în fișierele de proiect.
• Folosind diverse preprocesoare JavaScript, CSS și HTML (CoffeeScript, Less, Sass, Stylus, Jade etc.).
• Minimizarea codului CSS și JS, precum și optimizarea și concatenarea fișierelor de proiect individuale într-unul singur.
• Crearea automată a prefixelor de furnizor (prefixe la numele proprietăților CSS pe care producătorii de browser le adaugă pentru proprietăți non-standard) pentru CSS.
• Gestionați fișierele și folderele dintr-un proiect - creați, ștergeți, redenumiți.
• Lansarea și monitorizarea execuției comenzilor externe ale sistemului de operare.
  Lucrul cu imagini - compresie, creare de sprite, redimensionare (png, jpg, svg etc.).
• Implementați (trimiterea către un server extern) un proiect prin FTP, SFTP etc.
  Conectarea și utilizarea în proiect a unui număr infinit de mare de utilitare, programe și pluginuri Node.js și Gulp.
• Crearea diferitelor hărți de proiect și automatizarea altor lucrări manuale.

Începutul lucrării

NodeJS și npm trebuie instalate pe sistem.

Pasul 1: Pentru a instala GulpJS la nivel global folosind managerul de pachete npm, rulați următoarea comandă:

npm instalează gulp -g

Pasul 2: Trebuie să-l instalați pentru aplicație:

npm install --save-dev gulp

Încărcarea pluginurilor suplimentare care pot fi utilizate la construirea unui proiect se face și folosind npm cu următoarea comandă:

instalare npm<название плагина>--save-dev

Toate pluginurile instalate se află în director module_nod/.

Utilizare

Pasul 1: Mai întâi trebuie să vă conectați înghiţitură la proiect. Pentru asta în dosar gulpfile.js scrie linia:

var gulp = require("gulp");

Funcţie cere() vă permite să conectați pluginuri dintr-un folder module_nod/.

Pasul 2: Cu o variabilă înghiţitură puteți crea sarcini pentru a construi proiectul:

Gulp.task("exampleTask", function() ());

Metodă sarcină ia doi parametri: un nume și o funcție cu corpul sarcinii.
Această instrucțiune este deja disponibilă. Pentru a face acest lucru, scrieți în consolă:

Gulp exampleTask

Comenzi de bază

Mai jos este un exemplu mai complex de declarație:

Gulp.task("exampleTask", function () ( return gulp.src ("sursa-fisiere") .pipe(plugin()) .pipe(gulp.dest("folder")); ));

Să analizăm comenzile folosite în acest exemplu:

• gulp.src- selectarea fisierelor sursa proiectului pentru prelucrare de catre plugin;
• .pipe(plugin())- apelați pluginul Gulp pentru a procesa fișierul;
• .pipe(gulp.dest('folder')) - scoateți fișierul rezultat în folderul de destinație.

Măști de fișiere

Funcția gulp.src ia ca parametru o mască de fișier. Exemple de masti:

• ./ - directorul curent;
• ../ - Directorul Parinte;
• js/index.js- fisierul index.js din folderul js;
• js/*.js- toate fișierele cu extensia js din folderul js;
• js/**/*.js- toate fișierele cu extensia js din folderul js și subdirectoarele acestuia;
• !js/*.js– excluderea fișierelor cu extensia js din folderul js.

cursuri

Utilizarea thread-urilor este unul dintre cele mai importante beneficii ale GulpJS.

Fluxurile vă permit să treceți unele date secvenţial de la o funcţie la alta, fiecare dintre acestea efectuând o anumită acţiune asupra acestor date.

Funcţie gulp.src() creează un flux de obiecte reprezentând fișierele care îi sunt transmise ca parametru. Apoi, folosind funcțiile teava se construiește o conductă de-a lungul căreia se transmite un flux de obiecte. Ca parametru, acestei funcții i se trece un plugin care procesează fluxul de obiecte într-un fel.

Mai jos este un exemplu de utilizare a firelor. În acest exemplu, sunt utilizate pluginuri terță parte. gulp-jshintși gulp-concat, pentru a fi instalat și conectat gulpfile.js

Funcţie gulp.src preia fișierele cu mască js/*.js. Rulează JSHint și emite rezultatul. Apoi concatenează fișierele și la sfârșit salvează fișierul rezultat după concatenare în director dist/.

Gulp.task(„exemplu”, funcția () ( return gulp.src(„js/*.js”) .pipe(jshint()) .pipe(concat(„index.js”)) .pipe(gulp.dest ("dist")); ));

Pluginuri de la terți

Luați în considerare un exemplu de utilizare a pluginurilor terță parte. Pentru a face acest lucru, vom crea o instrucțiune de concatenare a fișierelor js:

Pasul 1: Mai întâi trebuie să includeți pluginul cu comanda require:

var concat = require("gulp-concat");

Pasul 2: Apoi trebuie să creați o sarcină pentru a concatena fișierele cu extensia js situată în directorul js/. La sfârșit, fișierul rezultat este plasat în directorul dist/js:

Gulp.task("concat", funcția () ( return gulp.src("js/*.js") .pipe(concat("index.js")) .pipe(gulp.dest("dist/js") ); ));

gulp concat

informatii suplimentare

De asemenea, puteți defini o sarcină care va determina executarea altor sarcini.

Gulp.task("build", ["html", "css"]);

În plus, există o metodă ceas pentru a observa modificările în fișiere:

Gulp.watch("mască de fișiere de urmărit", ["numele sarcinii care va fi executată când fișierele sunt modificate"]);

LA gulpfile.js puteți crea o sarcină implicită:

Gulp.task(„implicit”, [„sarcina1”, ​​„sarcina2”]);

Această sarcină este lansată din consolă cu comanda:

Pluginuri principale

• gulp-autoprefixer– prefixează automat proprietățile CSS;
• gulp-browser-sync- creează o conexiune, după care reîmprospătează automat pagina la schimbarea fișierelor client sau chiar server;
• gulp-uncss- optimizarea fisierelor CSS. Pluginul analizează codul HTML și găsește toate stilurile neutilizate și duplicate;
• gulp-csso- minificator CSS;
• gulp-htmlmin– simplificator HTML simplu;
• gulp-htmlhint– validator HTML;
• înghiţit-urâţesc– Minificator JavaScript;
• gulp-concat– concatenarea fișierelor;
• gulp-server web– vă permite să creați și să rulați un server;
• gulp-jshint– verificarea calității codului JS;
• înghiţitură-iasomie– efectuarea de teste cu iasomie;
• gulp-jsdoc- generarea documentației JSDoc.

Puteți găsi lista completă a pluginurilor Gulp aici:
http://gulpjs.com/plugins/

Alternative

GruntJS

Particularități

• Suport pentru testarea asincronă.
• Posibilitatea de a expune observatori (observator) pe diferite obiecte.

Începutul lucrării

Pentru a conecta Jasmine la proiectul dvs., trebuie să descărcați biblioteca și să includeți următoarele fișiere pe pagina principală HTML:

• lib/jasmine-*/jasmine.js- cadrul propriu-zis;
• lib/jasmine-*/jasmine-html.js- înregistrarea rezultatelor sub formă de HTML;
• lib/jasmine-*/jasmine.css- apariția rezultatelor testelor;
• SpecRunner.html- fișierul care trebuie deschis în browser pentru a rula testele.

Sincronizarea cu instrumentele

GulpJS

Jasmine poate fi inclusă în ansamblul proiectului GulpJS:

Pasul 1: Mai întâi trebuie să instalați pluginul gulp-jasmine:

npm instalează gulp-jasmine --save-dev

Pasul 2: Apoi trebuie să includeți pluginul în fișierul de compilare și să creați o sarcină de lansare de testare:

var jasmine = require("gulp-jasmine"); gulp.task("jasmine", function() ( gulp.src ("fișiere de testare") .pipe(jasmine()); ));

KarmaJS

(la sfârșitul articolului, lucrul cu acest instrument este descris mai detaliat)

Pentru a conecta Jasmine în KarmaJS aveți nevoie de:

Pasul 1: Instalați KarmaJS:

npm install -g karma-cli

Pasul 2: Instalați pluginurile necesare pentru a rula teste scrise în Jasmine în browserele Chrome și PhantomJS:

npm instalează karma-jasmine karma-chrome-launcher karma-phantomjs-launcher

Pasul 3: Instalați Jasmine în sine:

npm install -g jasmine

Pasul 4:În fișierul de configurare karma, conectați pluginurile și setați calea către teste.

Utilizare

Cuvinte cheie

• descrie - definirea unui set de teste;
• it - definirea testului;
• astept - definirea asteptarilor care sunt verificate in test.

Funcțiile descrie și au doi parametri: primul este numele, al doilea este funcția cu codul.

Exemplu de testare de bază

descrie(„numele suită de testare”, funcția () ( it(„numele testului”, funcția () ( aștept (2+2).toBe(4); )); ));

Metode de verificare a rezultatelor

• astept().toBe()– verificarea variabilelor pentru egalitate (‘===’);
• așteaptă().nu.toBe()– verificarea variabilelor pentru egalitate (‘!==’);
• astept().toEqual()– verificarea egalității variabilelor și obiectelor, inclusiv a conținutului;
• astept().toBeDefined()- verifica existenta;
• astept().toBeUndefined()– verificarea inexistenței;
• astept().toBeNull()– verificarea valorii unei variabile pentru null;
• așteaptă().toBeTruthy()- verificarea adevărului;
• astept().toBeFalsy()- verificarea falsitatii;
• astept().toBeLessThan()– verificarea ca valoarea sa fie mai mica de;
• așteptați().toBeGreaterThan()– verificarea ca valoarea sa fie mai mare decat;
• așteptați().toBeCloseTo()– verificarea ca valoarea să fie apropiată de un număr;
• astept().toMatch()– verificarea potrivirii expresiilor regulate;
• astept().toContain()– verificați conținutul din matrice;
• așteaptă().toThrow()– verificarea unui apel de excepție;
• așteptați().toHaveBeenCalled()– verificarea apelului de funcție.

Funcții suplimentare

Pentru a evita copierea oricărei logici utilizate în teste, sunt folosite funcții beforeEach/afterEach. Acestea rulează înainte/respectiv după fiecare test.

Funcțiile sunt folosite pentru a testa apelurile asincrone aleargăși așteaptă.

• aleargă- acceptă o funcție asincronă de executat;
• așteaptă- ia trei parametri: primul este o funcție care ar trebui să revină Adevărat, dacă funcția de apel asincron aleargă a fost executat, al doilea este mesajul de eroare, al treilea este așteptarea în milisecunde.

descrie("exemplu de testare a apelurilor asincrone", function () (var rezultat = 0; function asyncFunc() ( setTimeout(function() (rezultat = rezultat + 2; ), 500); ) it("nume test", function ( ) ( runs(function () ( asyncFunc(); )); waitsFor(function() ( returnează rezultat === 2; ), „valoarea nu sa schimbat”, 2000); )); ));

Observatori

Capacitatea de a urmări apelurile de funcții se face folosind spion. Această funcție are doi parametri: primul este obiectul pentru care este apelată funcția, al doilea este numele funcției care trebuie urmărită.

If(„testul apelului funcției”, funcția () ( spyOn(exampleObject, "exampleFunction"); exampleObject.exampleFunction(); aștept (exampleObject.exampleFunction).toHaveBeenCalled(); ));

Când este testat folosind spion puteți urmări numărul de apeluri, parametrii acestora și fiecare apel separat.

Pentru a crea o funcție fără o implementare, puteți utiliza createSpy. Funcţie createSpy ia un nume de funcție pentru a identifica.

If(„testul apelului funcției”, funcția () (var exemplu = createSpy(„EXEMPLU”); exemplu(„param1”, „param2”); așteptați(example.identificare).toHaveBeenCalledWith(„param1”, „param2”) ;așteptați(example.calls.length).toEqual(1); ));

Un obiect stub este creat folosind createSpyObj. Ca parametri createSpyObj ia numele unui obiect și o matrice de șiruri de caractere, care este o listă de metode pe obiectul stub.

Alternative

Moca

Utilizare

Documentația este generată din comentariile codului sursă.

În acest articol, vom lua în considerare un exemplu de mediu Gulp care poate fi utilizat pentru dezvoltarea confortabilă front-end a unui proiect web. Acest exemplu este configurat implicit pentru a crea site-uri și aplicații web bazate pe cadrul Bootstrap 4.

Proiectul acoperit în acest articol este găzduit pe Github la: https://github.com/itchief/gulp-project-bootstrap-4

Videoclip pentru acest articol:

Instrucțiuni pentru instalarea mediului Gulp

Pentru a crea un mediu, trebuie să aveți următoarele programe instalate:

• „Node.js” (puteți descărca programul de instalare „Node.js” pentru sistemul dumneavoastră de operare de pe această pagină; proiectul necesită cel puțin versiunea 10);
• „Gulp” (Puteți instala Gulp rulând următoarea comandă în consolă: npm install -g gulp-cli).

Următorul pas este să instalați pachetele npm și dependențele acestora. Pentru a face acest lucru, în consolă (ar trebui să fie în directorul rădăcină al proiectului), trebuie să rulați comanda:

instalare npm

Această comandă va instala toate pachetele necesare atât pentru funcționarea mediului în sine, cât și pentru interfață. npm efectuează aceste acțiuni conform instrucțiunilor scrise în fișierul „package.json”.

Când utilizați prima versiune a proiectului (1.0.0), care utilizează managerul de pachete Bower, trebuie să rulați o altă comandă:

Instalare Bower

Acest program va instala pachetele frontend specificate în fișierul „bower.json”.

Cum se utilizează mediul Gulp?

Deschideți un prompt de comandă (calea ar trebui să indice folderul rădăcină al proiectului) și tastați gulp (mod normal):

După introducerea acestei comenzi, va începe sarcina implicită, adică. "Mod implicit". Această sarcină va rula, la rândul său, o serie de alte sarcini: „build”, „webserver” și „watch”.

Sarcina „build” va construi proiectul pentru producție (adică va rula „clean:build”, „html:build”, „css:build”, „js:build”, „fonts:build” și „image:build”. "). Aceste sarcini vor plasa fișierele de proiect rezultate în folderul „active/build”.

Sarcina „server web” este concepută pentru a rula un server web local cu „reîncărcare live” a paginilor din browser. Cu acesta, puteți vizualiza foarte ușor proiectul și efectuați testarea acestuia.

Sarcina „watch” este folosită pentru a ține evidența modificărilor la fișierele sursă din folderul „assets/src” și pentru a rula diferite sarcini dacă apar. Cu alte cuvinte, vă permite să rulați automat sarcinile necesare și să păstrați la zi fișierele rezultate (conținutul folderului „assets/build”).

În plus, puteți efectua o asamblare selectivă (independentă) a uneia sau altei părți a proiectului.

De exemplu, pentru a construi doar CSS-ul unei părți a site-ului, este suficient să introduceți comanda:

gulp css:build

Lista altor sarcini:

gulp clean:build // pentru a curăța directorul „active/build” gulp html:build // pentru a construi fișiere HTML gulp js:build // pentru a construi fișiere JS gulp fonts:build // pentru a construi fonturi gulp image:build / / la imaginea de asamblare

Descrierea mediului Gulp

În această secțiune vom analiza:

• principalele instrumente și structura fișierelor din mediul Gulp;
• cum sunt conectate sursele Bootstrap la proiect și cum sunt configurate;
• cum să inițializați independent (de la zero) proiectul Gulp și să instalați dependențe (fără a utiliza pachetul gata făcut.json)
• cum să inițializezi Bower și să instalezi pachete frontend de la zero (fără a folosi „bower.json” gata făcut)*;
• conținutul fișierului Gulp project builder (gulpfile.js)

* Managerul de pachete Bower nu a fost folosit în proiect de la versiunea 2.0.0.

Lista de instrumente

Mediul destinat dezvoltării unui proiect front-end (site web) este construit pe baza următoarelor instrumente:

• Node.js (mediul în care mediul va rula);
• npm (managerul de pachete inclus cu Node.js; va fi folosit pentru a încărca Gulp, pluginuri și pachete front-end)
• jQuery, Popover, Bootstrap (pachete care vor fi folosite pentru a construi părțile css și js ale site-ului);
• Gulp și pluginurile sale (vor fi folosite pentru a construi proiectul și pentru a efectua alte sarcini web).

În primele versiuni ale proiectului, a fost folosit suplimentar managerul de pachete Bower. A fost folosit pentru încărcarea bibliotecilor jQuery, Popover și Bootstrap. În versiunile de proiect care încep de la 2.0.0, aceste biblioteci sunt încărcate folosind npm.

Structura fișierului de proiect Gulp

Structura de fișiere a unui proiect poate fi organizată în diferite moduri. Acest lucru poate depinde atât de preferințele unui anumit dezvoltator, cât și de proiectul pentru care este creat.

În acest articol, vom urma următoarea structură:

Dosarul „assets” și fișierele „gulpfile.js”, „package.json” se află în rădăcina proiectului. Fișierul „gulpfile.js” va conține sarcini pentru constructorul proiectului Gulp.

Prima versiune a proiectului a folosit și fișierele „.bowerrc” și „bower.json”. Fișierul „bower.json” este fișierul de configurare al managerului Bower, pe baza căruia au fost determinate pachetele front-end necesare pentru încărcare. În acest proiect, a fost folosit pentru a încărca Bootstrap, jQuery și Popper.

Dosarul „assets” conține două foldere: „src” (pentru fișierele sursă) și „build” (pentru fișierele terminate; constructorul Gulp le va pune în acest folder). Dosarul „src” conține directoarele „fonts” (pentru fonturi), „img” (pentru imagini sursă), „js” (pentru fișiere js), „style” (pentru stiluri) și „template” (pentru fragmente HTML) și fișierul „index.html”.

În prima versiune a proiectului, folderul „src” mai conținea directorul „bower_components”. A fost destinat componentelor care au fost încărcate folosind Bower. Nu este în versiunea actuală.

Directorul „js” conține două fișiere: „main.js” și „my.js”. Fișierul „my.js” este folosit pentru a scrie propriile scripturi, iar „main.js” este folosit pentru a defini lista fișierelor al căror conținut va trebui inclus în fișierul js final. Fișierul final este fișierul care ar trebui să fie rezultatul (în directorul „build”).

Directorul „stil” este rezervat stilurilor. Acest director conține trei fișiere: „main.scss” (conține o listă de fișiere al căror conținut trebuie să fie inclus în fișierul de stil final), „my.scss” (folosit pentru a vă scrie stilurile) și „variables.scss” (conține SCSS variabile, cu care vom schimba stilurile Bootstrap 4 și, de asemenea, vom folosi pentru a crea variabilele noastre).

Fișierul „index.html” este pagina principală a proiectului creat. Pe lângă „index.html”, în acest director pot fi plasate și alte pagini html.

Directorul „șablon” este destinat să plaseze fragmente de pagini HTML în el. De exemplu, puteți crea fișiere „head.html” și „footer.html” în acest director și puteți importa conținutul acestora (folosind sintaxa //= path_to_file) în mai multe pagini simultan. Acest lucru va facilita crearea și editarea paginilor html, deoarece. părțile individuale ale paginilor vor fi deja în fișiere separate.

Conectarea surselor Bootstrap 4 la proiect și configurarea acestora

Există diferite moduri de a conecta cadrul Bootstrap 4 la un proiect, precum și opțiuni de lucru cu acesta.

Cea mai flexibilă opțiune este utilizarea codurilor sursă. În acest caz, nu numai că se poate este foarte ușor să schimbați stilurile implicite de Bootstrap, dar și pentru a se conecta la proiect numai acele clase și componente care vor fi utilizate în el.

Bootstrap 4 Stiluri CSS Codate sursă în SCSSși sunt reprezentate de un număr mare de fișiere mici.

Lista fișierelor SCSS (situate în directorul „node_modules/bootstrap/scss/”): „functions.scss”, „variables.scss”, „mixins.scss”, „variables.scss”, „print.scss”, „reboot . scss”, „type.scss”, „images.scss”, „code.scss”, „grid.scss”, „tables.scss”, „forms.scss”, „buttons.scss”, „transitions.scss” " , "dropdown.scss", etc.

Fiecare astfel de fișier îndeplinește fie o sarcină de serviciu specifică, fie este responsabil pentru stilul unei anumite funcții a unui cadru sau a unei componente. Fișierele SCSS au nume concise și ușor de înțeles. Folosind numai ele, puteți înțelege destul de precis scopul fiecăruia dintre ele.

Personalizarea sau modificarea stilurilor implicite de Bootstrap 4 este finalizată prin redefinirea valorilor variabilelor SCSS. Toate variabilele SCSS sunt colectate într-un singur loc pentru comoditate (în fișierul „variables.scss”). Dar, este de dorit să le redefiniți valorile, desigur, nu în acest fișier, ci în propriul dvs. (de exemplu, având același nume „variables.scss”, dar situat în „assets/style/variables.scss”).

De exemplu, schimbarea culorii temei succesși Pericol, se face prin modificarea valorilor variabilelor $verde și $roșu:

// Suprascrierea valorilor implicite ale variabilelor Bootstrap 4 $red: #cc2eaa; $verde: #2ecc71;

Notă că după ce ați copiat variabilele Bootstrap 4 în fișierul dvs. CSS ("assets/style/variables.scss"), acestea trebuie să fie neetichetate! implicit .

Eticheta !default este pentru setarea unei variabile SCSS la o valoare implicită. Dacă variabila SCSS are deja o valoare, atunci noua valoare, dacă este specificată cu tasta !default, nu va fi setată.

Specificarea ce fișiere SCSS sursă Bootstrap 4 ar trebui incluse în compilarea la CSS și care nu ar trebui să se facă prin fișierul SCSS „assets/style/main.scss”. Cu alte cuvinte, conținutul acestui fișier va determina setul de stiluri care vor fi conectate la pagina web după compilare.

În plus, fișierele „assets/style/variables.scss” (pentru a înlocui variabilele Bootstrap) și „assets/style/my.scss” (pentru a crea propriile stiluri) sunt de asemenea conectate la acest fișier.

Conținutul fișierului „main.scss” (exemplu):

// Suprascrieți variabilele implicite Bootstrap 4 și definiți-vă propriile „variabile” @import; // Includeți sursele necesare Bootstrap 4 SCSS @import „../../../node_modules/bootstrap/scss/_functions”; @import „../../../node_modules/bootstrap/scss/_variables”; @import „../../../node_modules/bootstrap/scss/_mixins”; @import „../../../node_modules/bootstrap/scss/_root”; @import „../../../node_modules/bootstrap/scss/_reboot”; @import „../../../node_modules/bootstrap/scss/_type”; @import „../../../node_modules/bootstrap/scss/_images”; @import „../../../node_modules/bootstrap/scss/_code”; @import „../../../node_modules/bootstrap/scss/_grid”; @import „../../../node_modules/bootstrap/scss/_tables”; @import „../../../node_modules/bootstrap/scss/_forms”; @import „../../../node_modules/bootstrap/scss/_buttons”; @import „../../../node_modules/bootstrap/scss/_transitions”; @import „../../../node_modules/bootstrap/scss/_dropdown”; @import „../../../node_modules/bootstrap/scss/_button-group”; @import „../../../node_modules/bootstrap/scss/_input-group”; @import „../../../node_modules/bootstrap/scss/_custom-forms”; @import „../../../node_modules/bootstrap/scss/_nav”; @import „../../../node_modules/bootstrap/scss/_navbar”; @import „../../../node_modules/bootstrap/scss/_card”; @import „../../../node_modules/bootstrap/scss/_breadcrumb”; @import „../../../node_modules/bootstrap/scss/_pagination”; @import „../../../node_modules/bootstrap/scss/_badge”; @import „../../../node_modules/bootstrap/scss/_jumbotron”; @import „../../../node_modules/bootstrap/scss/_alert”; @import „../../../node_modules/bootstrap/scss/_progress”; @import „../../../node_modules/bootstrap/scss/_media”; @import „../../../node_modules/bootstrap/scss/_list-group”; @import „../../../node_modules/bootstrap/scss/_close”; @import „../../../node_modules/bootstrap/scss/_toasts”; @import „../../../node_modules/bootstrap/scss/_modal”; @import „../../../node_modules/bootstrap/scss/_tooltip”; @import „../../../node_modules/bootstrap/scss/_popover”; @import „../../../node_modules/bootstrap/scss/_carousel”; @import „../../../node_modules/bootstrap/scss/_spinners”; @import „../../../node_modules/bootstrap/scss/_utilities”; @import „../../../node_modules/bootstrap/scss/_print”; // Includeți fișierele dvs. SCSS @import "my";

În plus, unele componente Bootstrap 4 necesită, de asemenea, cod JavaScript pentru a funcționa.

Lista fișierelor Bootstrap 4 js (situate în directorul „node_modules/bootstrap/js/dist/”): „util.js”, „alert.js”, „button.js”, „carousel.js”, „collapse.js „, „dropdown.js”, „modal.js”, „tooltip.js”, „popover.js”, „scrollspy.js”, „tab.js” și „toast.js”.

Determinarea care fișiere js din cadrul Bootstrap 4 trebuie incluse în fișierul js final al proiectului și care nu sunt, se face prin „main.js”.

Importarea fișierelor necesare în build/main.js rezultat se face folosind următorul construct:

//= calea_la_fișier

Efectuarea acestei acțiuni va fi pluginul Gulp „gulp-rigger”. Modul de instalare și conectare va fi descris mai jos.

De asemenea, puteți importa jQuery, Popper (necesar pentru funcționarea componentelor Dropdown, Tooltip și Popover) și, dacă este necesar, propriile fișiere js în acest fișier.

Conținutul fișierului „main.js” (exemplu):

// Import jQuery //= ../../../node_modules/jquery/dist/jquery.js // Import Popper //= ../../../node_modules/popper.js/dist/umd /popper.js // Importă fișierele Bootstrap 4 js necesare //= ../../../node_modules/bootstrap/js/dist/util.js //= ../../../node_modules/ bootstrap/js/dist/alert.js //= ../../../node_modules/bootstrap/js/dist/button.js //= ../../../node_modules/bootstrap/js/ dist/carousel.js //= ../../../node_modules/bootstrap/js/dist/collapse.js //= ../../../node_modules/bootstrap/js/dist/dropdown. js //= ../../../node_modules/bootstrap/js/dist/modal.js //= ../../../node_modules/bootstrap/js/dist/tooltip.js //= ../../../node_modules/bootstrap/js/dist/popover.js //= ../../../node_modules/bootstrap/js/dist/scrollspy.js //= ../. ./../node_modules/bootstrap/js/dist/tab.js //= ../../../node_modules/bootstrap/js/dist/toast.js // Importă alte fișiere js //= my . js

Cum să inițializați un proiect Gulp și să instalați dependențe de la zero?

Dezvoltarea unui proiect începe de obicei cu crearea unui fișier „package.json” (manifest).

Fișierul „package.json” va conține informații generale despre proiect (nume, versiune, descriere, numele autorului etc.), precum și informații despre pachetele de care depinde acest proiect.

Pentru a crea un manifest, trebuie să mergeți la folderul rădăcină al proiectului și să introduceți comanda:

npm init

După ce ați introdus comanda, trebuie să răspundeți la următoarele întrebări:

• numele proiectului (nume) - "bootstrap-4";
• numărul versiunii (versiunea) – „2.0.0”;
• descriere (descriere) - „Începe proiectul cu utilizarea Bootstrap 4”;
• autor (autor) - „site-ul web”;
• depozitul git (depozitul git) - "";
• punct de intrare (punct de intrare), comandă de testare (comandă de testare), licență (licență), cuvinte cheie (cuvinte cheie) - valori implicite.

La întrebarea „Este în regulă?” răspunde „da” sau apasă Enter .

Ca rezultat, fișierul „package.json” va apărea în folderul rădăcină al proiectului.

Acum haideți să instalăm pachetele pe care le vom folosi în proiect cu următoarea comandă:

npm install package_name --save-dev // instalează pachetul, cu informații despre acesta adăugate automat în secțiunea „devDependencies” a fișierului „package.json” npm install package_name --save-prod // instalează pachetul, cu informații despre aceasta , este adăugat automat la secțiunea „dependențe” a fișierului „package.json”.

Tasta „--save-dev” sau „--save-prod” determină ce secțiune a fișierului „package.json” va conține informații despre aceasta.

Lista pachetelor care vor fi utilizate în proiect:

npm install gulp --save-dev // instalează gulp npm install browser-sync --save-dev // instalează browser-sync npm install gulp-autoprefixer --save-dev // instalează gulp-autoprefixer npm install gulp-cache - -save-dev // instalează gulp-cache npm install gulp-clean-css --save-dev // instalează gulp-clean-css npm install gulp-rimraf --save-dev // instalează gulp-clean-css npm install gulp-imagemin --save-dev // instalează gulp-imagemin npm instalează gulp-plumber --save-dev // instalează gulp-plumber npm instalează gulp-rigger --save-dev // instalează gulp-rigger npm instalează gulp- sass --save-dev // instalează gulp-sass npm instalează gulp-sourcemaps --save-dev // instalează gulp-sourcemaps npm instalează gulp-uglify --save-dev // instalează gulp-uglify npm install imagemin-jpeg- recompress --save-dev // instalează imagemin-jpeg-recompress npm install imagemin-pngquant --save-dev // instalează imagemin-pngquant npm install gulp-rename --save-dev // instalează imagemin-pngquant npm install jquery - -save-prod npm inst all popper.js --save-prod npm install bootstrap --save-prod

După instalarea tuturor dependențelor, fișierul package.json va avea următorul conținut:

( „nume”: „bootstrap-4”, „versiune”: „2.0..com/itchief/gulp-project-bootstrap-4.git” ), „dependențe”: ( „jquery”: „^3.4.1” , "popper.js": "^1.14.7", "bootstrap": "^4.3.1" ), "devDependencies": ( "browser-sync": "^2.26.7", "gulp": "^ 4.0.2", "gulp-autoprefixer": "^6.1.0", "gulp-cache": "^1.1.2", "gulp-clean-css": "^4.2.0", "gulp-rimraf" ": "^0.2.2", "gulp-imagemin": "^6.0.0", "gulp-plumber": "^1.2.1", "gulp-rigger": "^0.5.8", "gulp -sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5", "gulp-uglify": "^3.0.2", "imagemin-jpeg-recompress": "^6.0.0 ", "imagemin-pngquant": "^8.0.0", "gulp-rename": "^1.4.0" ) )

Cum să inițializez Bower și să instalez pachete frontend de la zero?

Să definim un folder în care Bower va descărca pachetele. Pentru a face acest lucru, creați un fișier .bowerrc și introduceți următoarele în el:

( „director”: „assets/src/bower_components/” )

Salvați fișierul .bowerrc. Acum toate componentele vor fi încărcate în directorul bower_components situat în assets/src/ .

Să inițializam Bower (creăm un fișier manifest bower.json). Crearea fișierului bower.json se poate face folosind comanda (în folderul rădăcină al proiectului):

Bower init

După aceea, trebuie să răspundeți la următoarele întrebări:

• numele proiectului (nume) - bootstrap-4;
• descriere (descriere) - Porniți proiectul pe Bootstrap 4 - site;
• autor (autor) - site;
• setați componentele instalate ca dependențe (setați componentele instalate în prezent ca dependențe) - Y (Da);
• ați dori să marcați acest pachet ca privat, ceea ce împiedică publicarea accidentală în registru - Y (Da);
• pentru restul întrebărilor vom lăsa implicit răspunsurile oferite de program;

Acești pași vor crea un fișier bower.json.

Să încărcăm Bootstrap 4 și pachetele de care depinde (Popper și jQuery) în proiectul nostru folosind Bower.

Pentru a face acest lucru, introduceți următoarea comandă în consolă:

Bower instalează bootstrap#v4.0.0-beta --save

Comutatorul -save este necesar pentru a scrie informațiile pachetului în secțiunea de dependențe a fișierului bower.json.

Ca rezultat, bower.json va avea următorul conținut:

( „nume”: „bootstrap-4”, „descriere”: „Începe proiectul pe Bootstrap 4 - site web”, „autori”: [ „site web” ], „licență”: „ISC”, „cuvinte cheie”: , „pagina de pornire” ": "", "ignore": [ "**/.*", "node_modules", "bower_components", "assets/src/bower_components/", "test", "teste" ], "dependențe": ( " jquery": "^3.2.1", "bootstrap": "^v4.0.0-beta" ) )

Dacă nu doriți să inițializați Bower (bower.json) cu comanda bower init și să instalați manual pachetele, puteți pur și simplu să creați un fișier bower.json (folosind un manager de fișiere, de exemplu) și să lipiți conținutul text de mai sus în el. . Pentru a instala dependențe în proiect, va fi suficient să introduceți următoarea comandă:

Instalare Bower

Descrierea fișierului Gulp project builder (gulpfile.js)

Toate acțiunile efectuate înainte de aceasta au fost pregătitoare. Toate funcționalitățile pe care le va realiza mediul creat vor fi determinate de fișierul „gulpfile.js”.

Fișierul „gulpfile.js” este o listă de sarcini.

Principalele sarcini pe care le va îndeplini acest fișier:

• colectarea mai multor fișiere de stil într-unul singur, compilarea SCSS-ului rezultat în CSS, adăugarea de prefixe automate, minimizarea CSS-ului și crearea unei hărți sursă;
• importul tuturor fișierelor js necesare într-unul singur, minimizând acest fișier și creând o hartă sursă;
• colectare de fișiere html, transfer de fonturi, procesare (comprimare) imagini și actualizare automată a paginilor prin Browser Sync.

În plus, pentru a nu rula aceste sarcini la schimbarea manuală a fișierelor sursă, să creăm o altă sarcină de „vizionare”. Acesta va monitoriza modificările fișierelor și va rula automat anumite sarcini.

Cod de fișier „gulpfile.js” (când utilizați Gulp 4):

„utilizați strict”; /* Căile către fișierele sursă (src), fișierele terminate (build) și fișierele de urmărit pentru modificări (vizionare) */ var cale = ( build: ( html: "assets/build/", js: "assets/build/") js/", css: "assets/build/css/", img: "assets/build/img/", fonturi: "assets/build/fonts/" ), src: ( html: "assets /src/*. html", js: "assets/src/js/main.js", stil: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", fonturi: „assets/src/fonts/**/*.*” ), urmăriți: ( html: „assets/src/**/*.html”, js: „assets/src/js/** /*.js” , css: „assets/src/style/**/*.scss”, img: „assets/src/img/**/*.*”, fonturi: „assets/srs/fonts/* */*.* " ), curat: "./assets/build/*" ); /* setări server */ var config = ( server: (baseDir: "./assets/build" ), notify: false ); /* Include gulp și pluginuri */ var gulp = require("gulp"), // Include Gulp webserver = require("browser-sync"), // Serverul rulează și actualizează automat paginile plumber = require ("gulp-plumber") "), // modul pentru urmărirea erorilor rigger = require("gulp-rigger"), // modul pentru importarea conținutului unui fișier în altul sourcemaps = require ("gulp-sourcemaps"), // modul pentru generarea unei hărți de fișiere sursă sass = require("gulp-sass"), // modul pentru compilarea SASS (SCSS) la CSS autoprefixer = require ("gulp-autoprefixer"), // modul pentru setarea automată a autoprefixelor cleanCSS = require("gulp- clean-css" ), // plugin pentru minimizarea CSS uglify = require("gulp-uglify"), // plugin pentru minimizarea cache JavaScript = require("gulp-cache"), // plugin pentru stocarea în cache imagemin = require(" gulp-imagemin" ), // plugin pentru comprimarea imaginilor PNG, JPEG, GIF și SVG jpegrecompress = require("imagemin-jpeg-recompress"), // plugin pentru comprimarea jpeg pngquant = require ("imagemin-pngq") uant"), // plugin pentru compresia png rimraf = require("gulp-rimraf"), // plugin pentru stergerea fisierelor si directoarelor rename = require ("gulp-rename"); /* sarcini */ // pornește serverul gulp.task("webserver", function () ( webserver(config); )); // build html gulp.task("html:build", function () ( return gulp.src(path.src.html) // selectează toate fișierele html din calea specificată. pipe(plumber()) // urmărește erori . pipe(rigger()) // importă atașamente. pipe(gulp.dest(path.build.html)) // încarcă fișiere terminate. pipe(webserver.reload(( stream: true ))); // repornește serverul ) ); // colectează stiluri gulp.task("css:build", function () ( return gulp.src(path.src.style) // get main.scss .pipe(plumber()) // pentru a urmări errors.pipe( sourcemaps.init()) // inițializați sourcemap .pipe(sass()) // scss -> css .pipe(autoprefixer()) // adăugați prefixes.pipe(gulp.dest(path.build.css)) .pipe (redenumiți(( sufix: ".min" ))) .pipe(cleanCSS()) // Reduceți CSS .pipe(sourcemaps.write(". /")) // scrie sourcemap .pipe(gulp.dest(path.build.css)) // încărcați pentru a construi .pipe(webserver.reload(( stream: true ))); // reporniți serverul )); / / build js gulp.task("js:build", function () ( return gulp.src(path.src.js) // obține fișierul main.js .pipe(plumber()) // pentru urmărirea erorilor.pipe ( rigger()) // import toate fișierele specificate în main.js .pipe(gulp.dest(path.build.js)) .pipe(rename(( sufix: ".min" ))) .pipe(sourcemaps.init ( )) //inițializați sourcemap .pipe(uglify()) //minify js .pipe(sourcemaps.write("./")) //scrie sourcemap .pipe(gulp.dest(path.build.js)) / / puneți fișierul terminat. pipe(webserver.reload(( stream: true ))); // reporniți serverul )); // transfer fonts gulp.task("fonts:build", function () ( return gulp.src (cale. src.fonts) .pipe(gulp.dest(path.build.fonts)); )); // procesează imagini gulp.task(„imagine:build”, function () ( return gulp.src(path. src.img ) // calea cu sursele de imagine. pipe(cache(imagemin([ // compresia imaginii i magemin.gifsicle(( interlaced: true )), jpegrecompress(( progresiv: true, max: 90, min: 80 )), pngquant(), imagemin.svgo(( plugins: [( removeViewBox: false )] )) ]) )) .pipe(gulp.dest(path.build.img)); // încărcați fișierele terminate )); // șterge directorul de compilare gulp.task("clean:build", function () ( return gulp.src(path.clean, ( citiți: false )) .pipe(rimraf()); )); // șterge memoria cache gulp.task("cache:clear", function () ( cache.clearAll(); )); // build gulp.task("build", gulp.series("clean:build", gulp.parallel("html:build", "css:build", "js:build", "fonts:build", " imagine:build"))); // rulează sarcini când fișierele se modifică gulp.task(„watch”, function () ( gulp.watch(path.watch.html, gulp.series(“html:build”))); gulp.watch(path.watch.css , gulp.series("css:build")); gulp.watch(path.watch.js, gulp.series("js:build")); gulp.watch(path.watch.img, gulp.series(" imagine:build")); gulp.watch(path.watch.fonts, gulp.series("fonts:build")); )); // sarcină implicită gulp.task("default", gulp.series("build", gulp.parallel("webserver","watch")));

Codul fișierului „gulpfile.js” conține comentarii. Cu ajutorul lor se explică ce realizează acest sau acel fragment de instrucțiuni.

Crearea unei sarcini în Gulp este foarte ușoară:

// crearea unei sarcini gulp (nametask este numele sarcinii) gulp.task("nametask", function() ( // acțiuni pe care sarcina trebuie să le efectueze... ));

Sarcinile în gulp sunt construite foarte simplu. Cadrul lor de acțiuni în majoritatea cazurilor poate fi reprezentat după cum urmează:

• obțineți date din fișierele sursă;
• procesează datele brute folosind plugin-uri gulp;
• salvați rezultatul (fișierele) în directorul „build”.

Dacă utilizați Gulp 3, atunci conținutul fișierului „gulpfile.js” ar trebui să fie după cum urmează:

„utilizați strict”; /* opțiuni pentru gulp-autoprefixer */ var autoprefixerList = [ „Chrome >= 45”, „Firefox ESR”, „Edge >= 12”, „Explorer >= 10”, „iOS >= 9”, „Safari >= 9”, „Android >= 4.4”, „Opera >= 30” ]; /* Căile către fișierele sursă (src), fișierele terminate (build) și fișierele de urmărit pentru modificări (vizionare) */ var cale = ( build: ( html: "assets/build/", js: "assets/build/") js/", css: "assets/build/css/", img: "assets/build/img/", fonturi: "assets/build/fonts/" ), src: ( html: "assets /src/*. html", js: "assets/src/js/main.js", stil: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", fonturi: „assets/src/fonts/**/*.*” ), urmăriți: ( html: „assets/src/**/*.html”, js: „assets/src/js/** /*.js” , css: „assets/src/style/**/*.scss”, img: „assets/src/img/**/*.*”, fonturi: „assets/srs/fonts/* */*.* " ), curat: "./assets/build/*" ); /* setări server */ var config = ( server: (baseDir: "./assets/build" ), notify: false ); /* Include gulp și pluginuri */ var gulp = require("gulp"), // Include Gulp webserver = require("browser-sync"), // Serverul rulează și actualizează automat paginile plumber = require ("gulp-plumber") "), // modul pentru urmărirea erorilor rigger = require("gulp-rigger"), // modul pentru importarea conținutului unui fișier în altul sourcemaps = require ("gulp-sourcemaps"), // modul pentru generarea unei hărți de fișiere sursă sass = require("gulp-sass"), // modul pentru compilarea SASS (SCSS) la CSS autoprefixer = require ("gulp-autoprefixer"), // modul pentru setarea automată a autoprefixelor cleanCSS = require("gulp- clean-css" ), // plugin pentru minimizarea CSS uglify = require("gulp-uglify"), // plugin pentru minimizarea cache JavaScript = require("gulp-cache"), // plugin pentru stocarea în cache imagemin = require(" gulp-imagemin" ), // plugin pentru comprimarea imaginilor PNG, JPEG, GIF și SVG jpegrecompress = require("imagemin-jpeg-recompress"), // plugin pentru comprimarea jpeg pngquant = require ("imagemin-pngq") uant"), // plugin pentru compresia png rimraf = require("gulp-rimraf"), // plugin pentru stergerea fisierelor si directoarelor rename = require ("gulp-rename"); /* sarcini */ // pornește serverul gulp.task("webserver", function () ( webserver(config); )); // build html gulp.task("html:build", function () ( return gulp.src(path.src.html) // selectează toate fișierele html din calea specificată. pipe(plumber()) // urmărește erori . pipe(rigger()) // importă atașamente. pipe(gulp.dest(path.build.html)) // încarcă fișiere terminate. pipe(webserver.reload(( stream: true ))); // repornește serverul ) ); // colectează stiluri gulp.task("css:build", function () ( return gulp.src(path.src.style) // get main.scss .pipe(plumber()) // pentru a urmări errors.pipe( sourcemaps.init()) // inițializați sourcemap .pipe(sass()) // scss -> css .pipe(autoprefixer(( // adăugați prefixe browsere: autoprefixerList ))) .pipe(gulp.dest(path.build. css)) .pipe(rename(( sufix: ".min" ))) .pipe(cleanCSS()) // Minimizează CSS .pipe(sourcemaps.write(". /")) // scrie sourcemap .pipe(gulp.dest(path.build.css)) // încărcați pentru a construi .pipe(webserver.reload(( stream: true ))); // reporniți serverul )); / / build js gulp.task("js:build", function () ( return gulp.src(path.src.js) // obține fișierul main.js .pipe(plumber()) // pentru urmărirea erorilor.pipe ( rigger()) // import toate fișierele specificate în main.js .pipe(gulp.dest(path.build.js)) .pipe(rename(( sufix: ".min" ))) .pipe(sourcemaps.init ( )) //inițializați sourcemap .pipe(uglify()) //minify js .pipe(sourcemaps.write("./")) //scrie sourcemap .pipe(gulp.dest(path.build.js)) / / puneți fișierul terminat. pipe(webserver.reload(( stream: true ))); // reporniți serverul )); // transfer fonts gulp.task("fonts:build", function () ( return gulp.src ) (cale. src.fonts) .pipe(gulp.dest(path.build.fonts)); )); // procesează imagini gulp.task(„imagine:build”, function () ( return gulp.src(path. src.img ) // calea cu sursele de imagine. pipe(cache(imagemin([ // compresia imaginii i magemin.gifsicle(( interlaced: true )), jpegrecompress(( progresiv: true, max: 90, min: 80 )), pngquant(), imagemin.svgo(( plugins: [( removeViewBox: false )] )) ]) )) .pipe(gulp.dest(path.build.img)); // încărcați fișierele terminate )); // șterge directorul de compilare gulp.task("clean:build", function () ( return gulp.src(path.clean, ( citiți: false )) .pipe(rimraf()); )); // șterge memoria cache gulp.task("cache:clear", function () ( cache.clearAll(); )); // build gulp.task("build", [ "clean:build", "html:build", "css:build", "js:build", "fonts:build", "image:build" ]); // rulează sarcini când fișierele se modifică gulp.task(„watch”, function () ( gulp.watch(path.watch.html, ["html:build"]); gulp.watch(path.watch.css, [" css:build"]); gulp.watch(path.watch.js, ["js:build"]); gulp.watch(path.watch.img, ["image:build"]); gulp.watch(cale .watch.fonts, ["fonts:build"]); )); // sarcină implicită gulp.task("default", [ "build", "webserver", "watch" ]);

Gentleman's set de dezvoltatori front-end

Nu este un secret pentru nimeni că un dezvoltator front-end modern trebuie să aibă unul dintre instrumentele de construire a proiectelor în arsenalul său, cum ar fi înghiţitură sau Grunt. Până la un timp, Grunt a deținut un monopol în această chestiune, dar un grup de dezvoltatori care s-au separat de Grunt au decis să-și creeze propriul manager de activități Gulp, ușor și rapid.

În acest articol, vom pregăti un pachet de pornire de la zero pentru a fi utilizat în proiecte viitoare.

Ce tehnologii folosim

• Platforma software: Node.js
• Pre-procesor CSS: stiloul
• Gestionar de sarcini: înghiţitură

De ce un frontender are nevoie de un manager de activități?

Până de curând, mă întrebam și eu de ce trebuie să petrec timp instalând configurația managerului de activități, dacă mă pricep deja la layout-uri, până când am început să folosesc preprocesoare CSS.

Pre-procesoarele CSS sunt cu adevărat convenabile și accelerează stilurile de scriere, dar compilarea codului scris într-un pre-procesor în CSS obișnuit nu este o sarcină banală care poate fi rezolvată cu un singur buton. Aici ne vine în ajutor managerul de sarcini. Conversia codului nu are loc prin apăsarea unui buton, totul se întâmplă online fără participarea ta (desigur, dacă totul este configurat corect).

Desigur, sarcinile unui manager de activități depășesc cu mult procesele asociate cu conversia codului pre-procesor în CSS pur. Asamblatorul de proiect se ocupă și de minificarea, concatenarea, verificarea codului pentru erori, asamblarea imaginilor în sprite, optimizarea imaginilor pentru web etc. Pur și simplu creați o mulțime de fișiere separate logic în proiectul dvs., care sunt apoi colectate convenabil într-un singur director, deja procesate și gata de funcționare în browser. Dar mai multe despre asta mai târziu, dar acum să începem cu pregătirea.

Instalarea Node.js

Dacă știți cum să instalați node.js pe sistemul dvs. și să îl utilizați, nu ezitați să treceți la următorul titlu.

Aș dori să avertizez imediat că toate acțiunile descrise sunt relevante pentru Mac OS X, dar aplicabil în general altora Unix sisteme. Dezvoltare prin task manager și linia de comandă în Windows ceva mai dificil și nu va fi descris aici. Cu toate acestea, dacă încă utilizați Windows și nu sunteți pregătit să renunțați la el, atunci vă pot sugera opțiunea de a folosi o mașină virtuală cu instalat ubuntu, folosesc această opțiune pe sistemul meu de acasă, care este în general destul de convenabil.

Deci, primul lucru pe care trebuie să-l facem este să descărcați și să instalați pachetul node.js pe sistemul nostru pentru a lucra cu nodul prin consolă. Mergem pe site-ul oficial node.js și descarcăm cea mai recentă versiune stabilă pentru sistemul dumneavoastră. Odată instalată, comanda node ar trebui să fie disponibilă pe linia de comandă. Pentru a verifica dacă nodul dvs. funcționează, introduceți comanda pe linia de comandă

versiunea node.js instalată ar trebui să apară ca răspuns. Dacă totul este bine, mergem mai departe.

Structura directorului de proiect

În proiectele noastre, vom folosi o versiune unificată a structurii:

Dezvolta - directorul rădăcină de dezvoltare└─începe - directorul proiectelor├─construiește - build asamblat de managerul de sarcini├─resursa - toate fișierele sursă pentru dezvoltare (.psd, etc.)├─src - director de dezvoltare│├─css - director de dezvoltare a stilului││├─imagini - toate imaginile statice││├─sprite - imagine colectată într-un sprite││├─parțial - fișiere de stil personalizate│││├─mixine.stil - mixuri personalizate│││└─stiluri - stiluri personalizate││├─vânzător - alte fișiere de stil externe││└─stiluri - foaia de stil principală│├─fonturi - directorul fonturilor│├─img - catalog de imagini dinamice│├─js - Director de dezvoltare JavaScript││├─_*.js - fișiere laterale js││├─_main.js - js personalizat principal││└─principal.js - fișierul js principal│├─.htaccess - configurare pentru server│├─*.html - fișiere de marcare a paginii│├─pages.html - un fișier cu link-uri către toate paginile șablonului│├─index.html - fișierul index de marcare a paginii│└─include - directorul fișierelor de marcare incluse│ └─*.html - fișierele de markup incluse (header.html etc.)├─package.json - configurare manager de pachete npm├─gulpfile.js - Configurare Gulp├─stil.şablon.mustaţă - masca pentru citirea sprite-urilor├─TODO - lista de tot└─.gitignore - git config

Instalare

În consolă, utilizați comanda cd pentru a merge la directorul rădăcină de dezvoltare, creați directorul nostru de proiect mkdir start și mergeți la el.

Să ne configuram structura pentru proiect prin consolă:

mkdir build resource src src/css src/css/images src/css/sprites src/css/partial src/css/vendor src/js src/template src/template/include src/img src/fonts

Să creăm fișierele inițiale în structura proiectului:

atingeți gulpfile.js stylus.template.mustache .gitignore src/.htaccess src/TODO src/css/styles.styl src/css/partial/styles.styl src/css/partial/mixins.styl src/js/main.js src/js/_main.js src/template/pages.html src/template/index.html src/template/include/header.html src/template/include/footer.html

Creați package.json

toate întrebările pop-up pot fi făcute clic prin Enter, nodul le va seta la valorile implicite sau va completa câmpurile propuse.

.gitignore

Îi spunem git ce directoare să ignore și să nu încarce în depozit:

/node_modules/ /build/ /resource/

Directorul node_modules va apărea mai târziu după instalarea pluginurilor și va conține toate pluginurile nodului proiectului.

src/.htaccess

Setați compresie și stocare în cache gzip suplimentare pentru server:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript # Serviți fișierele CSS comprimate gzip dacă acestea există # și clientul acceptă gzip. RewriteCond "%(HTTP:Accept-encoding)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.css" "$1\.css\.gz" # Servire gzip comprimat Fișiere JS dacă există # și clientul acceptă gzip. RewriteCond "%(HTTP:Accept-encoding)" "gzip" RewriteCond "%(REQUEST_FILENAME)\.gz" -s RewriteRule "^(.*)\.js" "$1\.js\.gz" # Serviți conținut corect tipuri și previne mod_deflate double gzip. RewriteRule „\.css\.gz$” „-” RewriteRule „\.js\.gz$” „-” # Serviți tipul de codificare corect. Adăugați antet Codificarea conținutului gzip # Forțați ca proxy-urile să memoreze separat fișierele css/js gzipped și # negzipped. Adăugați antet Variați Acceptare-Codificare ExpiresActive pe aplicația ExpiresByType/javascript „acces plus 1 lună” ExpiresByType imagine/jpg „acces plus 1 lună” ExpiresByType imagine/jpeg „acces plus 1 lună” ExpiresByType imagine/gif „acces plus 1 lună” ExpiresByType imagine/png „acces plus 1 luna" ExpiresByType text/css "acces plus 1 lună"

src/css/styles.style

Includeți fișiere de stil personalizate în fișierul de stil principal:

@import „parțial/stiluri”

Rețineți că pentru includerea fișierelor .styl, extensia nu este specificată, conform semanticii codului de preprocesor Stylus. Pentru a include stiluri într-o altă extensie, cum ar fi .css, aceasta din urmă este necesară.

A FACE

Această pagină conține lista de activități de dezvoltare. Puteți citi mai multe despre lucrul cu acest fișier pe pagina de plugin PlainTasks pentru Sublime Text.

Aceasta completează instalarea structurii.

Instalarea pluginurilor cu managerul de pachete npm

Node.js include implicit managerul de pachete npm, care are o mulțime de pluginuri în depozitele sale cu care trebuie să lucrăm.

Instalarea pluginului Gulp

Mai întâi trebuie să instalați Gulp la nivel global (cu comutatorul -g) pe sistemul nostru

npm instalează gulp -g

Trebuie să faci asta o dată, nu este necesară o instalare globală suplimentară.

Acum trebuie să instalăm Gulp local în directorul proiectului

npm install gulp --save-dev

Cheia --save-dev spune că informațiile despre plugin (numele din depozit și versiunea acestuia) vor fi adăugate la configurația package.json și le vor aminti pentru acest proiect. Deoarece nu stocăm un folder greu cu pluginuri node_modules în git, informațiile despre pluginurile instalate salvate în config ne vor permite să implementăm toate pluginurile necesare în proiect cu o singură comandă npm i.

Există abrevieri pentru fiecare comandă, așa că putem scrie comanda de mai sus într-un format mai scurt.

În viitor, vom folosi și formatul de comandă abreviat.

Plugin Stylus pentru Gulp

În proiectele noastre, folosim pre-procesorul Stylus, care funcționează excelent și se compilează pe nod.

Instalare:

npm i gulp-stylus -D

Pluginuri de procesare CSS

Autoprefixer- inserează automat prefixele -ms- -o- -moz- -webkit- în proprietățile necesare:

npm i gulp-autoprefixer -D

Minificare CSS- pluginul minimizează fișierul CSS de ieșire eliminând spații și file suplimentare din acesta:

npm i gulp-minify-css -D

Pluginuri de procesare a imaginilor

Combinarea imaginilor în sprite-uri- nu mai trebuie să petreci ore întregi de timp prețios îmbinând toate imaginile în sprite-uri și apoi calculând coordonatele acestora, acest plugin va face automat toate acestea pentru tine:

npm i gulp.spritesmith -D

Adăugați o mască pentru calcularea pozițiilor în sprite-uri în fișierul stylus.template.mustache creat anterior:

((#articole)) $((nume)) = ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.height)) ((px.total_width)) ((px.total_height)) "(((escaped_image)))"; ((/articole))

Adăugați mixuri personalizate la mixins.styl:

SpriteWidth($sprite) lățime $sprite spriteHeight($sprite) înălțime $sprite spritePosition($sprite) poziție de fundal $sprite $sprite spriteImage($sprite) imagine de fundal url($sprite) sprite($sprite) dacă !match( „hover”, selector()) && !match(„activ”, selector()) spriteImage($sprite) spritePosition($sprite) spriteWidth($sprite) spriteHeight($sprite)

Conectați mixin-urile și fișierul generat cu coordonate la fișierul de stil principal src/css/styles.styl:

@import „partial/sprite” @import „partial/mixins”

Rețineți că fișierele sprite trebuie incluse înaintea stilurilor personalizate @import „partial/styles”

Optimizarea imaginii pentru web- pluginul va elimina automat toate informațiile inutile din imaginile dvs. și le va micșora la dimensiunea optimă, ceea ce în unele cazuri va reduce dimensiunea imaginilor cu până la 90%:

npm i gulp-imagemin -D

Pluginuri de procesare JavaScript

Minificare JS- pluginul minimizează codul dvs. JS cât mai mult posibil, reducând timpul de încărcare:

npm i gulp-uggify -D

Urmărirea erorilor JS- pluginul va verifica temeinic codul dvs. JS pentru a identifica toate inconsecvențele și le va afișa în consolă:

npm i jshint gulp-jshint -D

Pluginuri de procesare HTML

Fișiere conectate- pluginul vă permite să stocați părți statice ale site-ului, cum ar fi antet , subsol , deoparte etc., în fișiere separate și să le includeți în orice parte a altui fișier. Nu mai este nevoie, în cazul unor modificări minore în antet, să schimbați zeci sau chiar sute de pagini html ale șablonului:

npm i gulp-rigger -D

Pluginul este, de asemenea, compatibil cu JS.

Includeți JS personalizat în fișierul JS principal src/js/main.js cu construcția:

//= _main.js

Includeți fișierele header.html și footer.html în index.html

//= include/header.html//= include/footer.html

Alte pluginuri

LiveReload- pluginul elimină nevoia de a reîncărca pagina în browser de fiecare dată pentru a vedea modificările, acum acest lucru se întâmplă automat când salvați fișierul modificat:

npm i gulp-connect -D

Prevenirea prăbușirii lui Gulp- uneori se întâmplă ca Gulp să iasă din modul ceas în cazul unor erori critice (în mare parte din cauza JS). Acest plugin încearcă să mențină procesele Gulp în funcțiune ori de câte ori este posibil:

npm i gulp-plumber -D

Redenumirea fișierelor- cea mai comună lucrare cu nume de fișiere. Pluginul vă permite să redenumiți complet fișierele, să schimbați extensia, să adăugați prefixe și postfixe, de exemplu, pentru a aduce fișierul de vizualizare style.styl la style.min.css:

npm i gulp-redenumim -D

Curățător- uneori este nevoie să curățați complet directorul de compilare, aici un plugin vine în ajutor:

Harta sursă- pentru ca fișierele dvs. să rămână lizibile prin depanarea browserului după minificare, trebuie să adăugați o hartă sursă la fișierele minificate:

npm i gulp-sourcemaps -D

Funcții avansate ale ceasului- pluginul face ceasul inteligent, acum nu suprascrie toate fișierele din build atunci când este schimbat un singur fișier, suprascrie un anumit fișier modificat, ceea ce economisește timp și resurse:

npm i gulp-watch -D

Verificați package.json

După ce toate pluginurile sunt instalate, să verificăm pachetul nostru.json. Ar trebui să arate cam așa:

( „nume”: „start”, „versiunea”: „1.0.0”, „descriere”: „Pachet de pornire pentru dezvoltarea front-end”, „autor”: „Ivan Ivanov”, „licență”: „MIT”, "dependencies": (), "devDependencies": ( "gulp": "ultime", "gulp-autoprefixer": "ultime", "gulp-connect": "ultime", "gulp-imagemin": "ultime", "jshint": "cele mai recente", "jshint-stylish": "cele mai recente", "gulp-jshint": "cele mai recente", "gulp-minify-css": "cele mai recente", "gulp-plumber": "cele mai recente", „gulp-rename”: „cel mai recent”, „gulp-rigger”: „mai recent”, „gulp-sourcemaps”: „cel mai recent”, „gulp-stylus”: „mai recent”, „gulp-uglify”: „mai recent”, „gulp-watch”: „cele mai recente”, „gulp.spritesmith”: „mai recente”, „rimraf”: „mai recente” ) )

În loc de cel mai recent, în cazul dvs., vor fi scrise versiuni specifice ale pluginurilor instalate. pentru că Deoarece construim pachetul nostru de pornire care va fi folosit în multe proiecte, se recomandă, de asemenea, să înlocuim valorile versiunii cu cele mai recente pentru a instala întotdeauna versiuni actualizate de plugin în proiect.

Directorul node_modules ar trebui să apară, de asemenea, în folderul proiectului, în care sunt stocate toate fișierele plugin-uri nod. Sunt instalate toate pluginurile necesare, puteți trece la setările de configurare Gulp.

Configurarea gulpfile.js

gulpfile.js- acesta este fișierul principal de configurare al managerului nostru de activități, în el vom stoca toate setările și comenzile.

Toată munca lui Gulp se rezumă la sarcină ( Engleză o sarcină). O sarcină este o funcție independentă separată cu un nume. Fiecare sarcină poate fi apelată separat.

Modul de compatibilitate cu standardele moderne

În primul rând, la începutul fișierului, vom conecta modul de compatibilitate numai conform standardelor moderne:

„utilizați strict”;

Puteți afla mai multe despre această directivă.

Inițializarea pluginului

Pluginurile sunt inițializate cu următorul construct:

var initPlugin = require("nume-plugin");

În conformitate cu acest design, inițializam toate pluginurile noastre:

Var gulp = require("gulp"), //plugin principal gulp stylus = require ("gulp-stylus"), //preprocesor stylus prefixer = require ("gulp-autoprefixer"), //aranjarea autoprefixelor cssmin = require(" gulp-minify-css"), //css minification uglify = require("gulp-uglify"), //js minification jshint = require ("gulp-jshint"), //js error tracking rigger = require("gulp - rigger"), //lucrarea cu html și js include imagemin = require("gulp-imagemin"), //minimizarea imaginilor spritesmith = require("gulp.spritesmith"), //combinarea imaginilor în sprite-uri rimraf = require( "rimraf") "), //purge sourcemaps = require("gulp-sourcemaps"), //sourcemaps rename = require("gulp-rename"), //redenumiți fișierele instalator = require("gulp-plumber"), // fuzionați la stop gulp watch = require("gulp-watch"), //extindere watch connect = require("gulp-connect"); //livereload

Constante de cale

Pentru comoditate, definim imediat toate căile și măștile:

Var cale = ( build: ( //Aici vom specifica unde să punem fișierele gata după build html: "build/", js: "build/js/", css: "build/css/", img: " build/css/ images/”, fonturi: „build/fonts/”, htaccess: „build/”, contentImg: „build/img/”, sprites: „src/css/images/”, spritesCss: „src/css /partial/" ), src: ( //Cale pentru a obține surse html de la: "src/template/*.html", //Sintaxa src/template/*.html îi spune gulp că vrem să obținem toate fișierele cu . extensia html js: „src/js/[^_]*.js”,//În stiluri și scripturi, avem nevoie doar de fișierele principale jshint: „src/js/*.js”, css: „src/css/styles” .styl", cssVendor: "src /css/vendor/*.*", //Dacă dorim să stocăm fișierele de bibliotecă separat, atunci decomentați linia img: "src/css/images/**/*.*", //Sintaxă img/**/*.* înseamnă - luați toate fișierele cu toate extensiile din folderul și subdirectoarele fonturi: „src/fonts/**/*.*”, contentImg: „src/img/**/* .*", sprites: "src/css/ sprites/*.png", htaccess: "src/.htaccess" ), watch: ( //Aici indicăm, după schimbarea ce fișiere vrem să urmărim html: "src/template/**/*.html", js: "src/js/**/*.js", css: "src/css/**/*.*" , img: „src/css/images/**/*.*”, contentImg: „src/img/**/*.*”, fonturi: „src/fonts/**/*.*”, htaccess: " src/.htaccess", sprites: "src/css/sprites/*.png" ), clean: "./build", //directoare care pot fi curățate outputDir: "./build" //directorul rădăcină inițial către porniți miniserverul);

Rețineți că putem folosi măști de nume:

• *.js- toate fișierele cu extensia js
• [^_]*.js- toate fișierele cu extensia js, cu excepția celor care încep cu un caracter de subliniere
• *.* - orice fișiere cu orice extensie în directorul curent
• /**/*.html- toate fișierele cu extensia .html din directorul curent și toate directoarele copil

sarcina (sarcini)

Acum că toate constantele sunt scrise, puteți începe să scrieți sarcini. Toate sarcinile au următoarea structură:

Gulp.task("numele sarcinii", function()( //unele functii ));

Mini Server și LiveReload

În primul rând, vom configura serverul local și LiveReload:

// Server local pentru dezvoltare gulp.task("connect", function()( connect.server(( //setați configurațiile serverului root: , //portul directorului rădăcină de pornire a serverului: 9999, //ce port vom folosi livereload) : true //inițializați operația LiveReload )); ));

Cel mai probabil, de multe ori va trebui să lucrați simultan la mai multe proiecte deodată. Serverul vă permite să rulați mai multe servere în același timp, este suficient să vă înregistrați portul pentru diferite proiecte.

Creați HTML

// sarcină pentru construirea html gulp.task("html:build", function () ( gulp.src(path.src.html) //Selectează fișierele din calea necesară.pipe(rigger()) //Rulează prin rigger .pipe(gulp.dest(path.build.html)) //încărcați-le în folderul de compilare .pipe(connect.reload()) //și reporniți serverul nostru pentru actualizări));

JS build

// verifică js pentru erori și le trimite în consolă gulp.task("jshint:build", function() ( return gulp.src(path.src.jshint) //selectează fișierele din path.pipe(jshint() )) //rulează prin jshint .pipe(jshint.reporter("jshint-stylish")); //stil de ieșire a erorilor către consolă )); // construirea javascript gulp.task("js:build", function () ( gulp.src(path.src.js) //Găsiți fișierul nostru principal.pipe(rigger()) //Rul prin rigger .pipe(sourcemaps .init()) //Inițializați sourcemap .pipe(uglify()) //Comprimați js .pipe(sourcemaps.write()) //Scrieți maps.pipe(rename((sufix: ".min"))) / /adăugați sufixul.min la fișierul de ieșire.pipe(gulp.dest(path.build.js)) //încărcați fișierul terminat pentru a construi .pipe(connect.reload()) //Și reporniți serverul ));

Sprite build

Toate imaginile care urmează să fie sprite sunt adăugate în directorul src/css/sprites/ și, după rularea prin Gulp, devin o singură imagine sprite. Sprite-urile nu trebuie să includă logo-uri și fundaluri fără dimensiuni clare.

// construiți sprites gulp.task("sprites:build", function () ( var spriteData = gulp.src(path.src.sprites) //alegeți de unde să obțineți imaginile pentru a fi îmbinate într-un sprite.pipe(spritesmith(( imgName) : " sprite.png", //numele imaginii sprite cssName: "sprite.styl", //numele stilului în care stocăm pozițiile imaginii în sprite-ul imgPath: "images/sprite.png", //calea unde sprite-ul se află cssFormat: "stylus", //format în care procesăm pozițiile cssTemplate: "stylus.template.mustache", //mask fișier cssVarMap: function(sprite) ( sprite.name = "s-" + sprite.name // numele fiecărui sprite va consta dintr-un nume de fișier și construcții „s-” la începutul numelui ) ))); spriteData.img.pipe(gulp.dest(path.build.sprites)); // calea unde salvăm imaginea spriteData.css.pipe(gulp.dest(path .build.spritesCss)); // calea unde salvăm stilurile ));

Pentru a afișa un sprite, utilizați doar un mixin. De exemplu, pentru fișierul lorem.png, selecția din sprite va arăta astfel:

Sprite Lorem ($s-lorem)

Acum obiectul .lorem va lua dimensiunile imaginii și imaginea însăși ca fundal.

Construire de imagini statice

Imaginile statice sunt imagini utilizate în șablonul de aspect.

// construiți imagini statice gulp.task("image:build", function () ( gulp.src(path.src.img) //Selectați imaginile noastre. pipe(imagemin(( //Comprimați-le progresiv: true, // compression.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg intercalat: true, //compression.gif optimizationLevel: 3 //nivel de compresie de la 0 la 7 ))) .pipe(gulp.dest(path. build.img)) //încărcare pentru a construi .pipe(connect.reload()) //reporniți serverul ));

Creați imagini dinamice

Imaginile dinamice sunt imagini de conținut care se vor modifica pe site și sunt incluse la nivel de șablon numai în scop demonstrativ. De exemplu, pot fi imagini pentru știri etc.

// construiți imagini dinamice gulp.task("imagescontent:build", function() ( gulp.src(path.src.contentImg) .pipe(imagemin(( //Comprimați-le progresiv: true, //compress.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg intercalat: true, //compression.gif optimizationLevel: 3 //raport de compresie de la 0 la 7 ))) .pipe(gulp.dest(path.build.contentImg)) //descărcați pentru a construi .pipe(connect.reload()) //reporniți serverul ));

Construiește CSS

// construiește css personalizat gulp.task("cssOwn:build", function () ( gulp.src(path.src.css) //Selectează foaia noastră de stil principală. pipe(sourcemaps.init()) //inițializează hărți de sursă . pipe (stylus(( compress: true, "include css": true )))) //Compilați stylus .pipe(prefixer(( browser: ["ultimele 3 versiuni", "> 1%", "adică 8", "adică 7" "] ))) //Adăugați prefixe de furnizor.pipe(cssmin()) //Compress.pipe(sourcemaps.write()) //scrie sourcemap .pipe(rename((sufix: ".min"))) / / adăugați suffix.min la ieșirea numelui fișierului.pipe(gulp.dest(path.build.css)) //descărcați pentru a construi .pipe(connect.reload()) //reporniți serverul ));

Sarcină separată pentru stilurile externe:

// construirea furnizorului css gulp.task("cssVendor:build", function () ( gulp.src(path.src.cssVendor) // Obțineți folderul furnizorului .pipe(sourcemaps.init()) //inițializați harta sursă .pipe( cssmin()) //Compress.pipe(sourcemaps.write()) //scrie sourcemap .pipe(gulp.dest(path.build.css)) //încărcare pentru a construi .pipe(connect.reload() ) // reporniți serverul));

Să adăugăm, de asemenea, o sarcină pentru compilarea CSS generală:

// construiește întregul css gulp.task("css:build", [ "cssOwn:build", // "cssVendor:build" ]);

Dacă doriți să procesați stilurile externe separat de cele de acasă și să le încărcați ca fișiere separate, trebuie să decomentați linia „cssVendor:build”

Construirea fontului

// construiți fonturi gulp.task("fonts:build", function() ( gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)) //dump to build ));

Build.htaccess

// build htaccess gulp.task("htaccess:build", function() ( gulp.src(path.src.htaccess) .pipe(gulp.dest(path.build.htaccess)) //upload to build ));

Construcție generală

Pentru a nu trebui să construim fiecare parte separat, să scriem o sarcină pentru construcția generală:

// construiește totul gulp.task("build", [ "html:build", "jshint:build", "js:build", "sprites:build", "css:build", "fonts:build", " htaccess:build", "image:build", "imagescontent:build" ]);

Curățarea construcției

Uneori este necesar să curățați complet directorul de compilare. Aici ne va veni în ajutor următoarea sarcină:

// curăță folderul de compilare gulp.task("curățat", funcția (cb) ( rimraf(path.clean, cb); ));

Urmăriți sau urmăriți modificările în timp real

Una dintre cele mai importante și utile funcții ale Gulp este funcția de urmărire, care vă permite să monitorizați în timp real toate modificările fișierelor produse și, în funcție de aceasta, să efectuați acțiuni specifice:

// watch gulp.task("watch", function()( //build html in caz de schimbare watch(, function(event, cb) (gulp.start("html:build"); )); //build sprites în cazul schimbării watch(, function(event, cb) ( gulp.start("sprites:build"); )); //construiți imagini de context în cazul schimbării watch(, function(event, cb) ( gulp. start(" imagescontent:build"); )); //build css în cazul schimbării watch(, function(event, cb) (gulp.start("css:build"); )); //verificați js în caz of change watch(, ["jshint"]); //construiți js în cazul schimbării watch(, function(event, cb) (gulp.start("js:build"); )); //construiți imagini statice în caz de schimbare watch(, function (eveniment, cb) ( gulp.start("image:build"); )); //construiți fonturi în cazul schimbării watch(, function(event, cb) (gulp.start(" fonts:build"); )) ; //build htaccess în cazul schimbării watch(, function(event, cb) ( gulp.start("htaccess:build"); )); ));

Acțiuni implicite

Acțiunile implicite sunt sarcinile pe care managerul de activități le va efectua atunci când introduce comanda gulp în consolă:

// acțiuni implicite gulp.task("default", ["build", "watch", "connect"]);

În cazul nostru, în mod implicit, ne vom construi proiectul, vom activa modul de vizionare și vom porni serverul.

Comenzi pentru linia de comandă

Toate comenzile galp pentru linia de comandă constau din două părți - comanda gulp în sine și numele sarcinii separate printr-un spațiu. Iată o listă de comenzi aplicabile configurației noastre:

• gulp - comanda principală, rulează sarcina implicită
• gulp build - construiește totul
• gulp watch - începe ceasul
• gulp clean - curăță directorul de construcție
• gulp connect - porniți serverul
• gulp html:build - compilare HTML
• gulp jshint:build - verificați JS pentru erori
• gulp js:build - JS build
• gulp sprites:build - sprite build
• gulp image:build - construirea unei imagini statice
• gulp imagecontent:build - construirea dinamică a imaginii
• gulp cssOwn:build - build personalizat css
• gulp cssVendor:build - build CSS extern
• gulp css:build - compilare CSS generală
• gulp fonts:build - construirea fontului
• gulp htaccess:build - build.htaccess

În acest moment, configurația gulpfile.js este completă.

Copiați pachetul de pornire în proiect

Mai întâi, să trecem prin consola din folderul în care dezvoltăm, de exemplu, cd develop/example și să copiam totul din directorul pachetului de pornire în proiectul nostru cp -a ~/develop/start/. ~/dezvoltare/exemplu/

Această metodă de copiere este cea mai convenabilă, deoarece. va copia cu exactitate totul, inclusiv fișierele .gitignore ascunse etc.

Concluzie

Folosind acest ghid, am pregătit un pachet de pornire pentru utilizarea Gulp în proiectele noastre de dezvoltare Front-end.

Acest pachet este disponibil și pe GitHub.

Post Scriptum

Acest articol nu este final și va fi actualizat în funcție de modificări și îmbunătățiri.