Kompresija slika, JS i CSS datoteka kako bi se optimiziralo učitavanje web stranica i još mnogo toga. Kako biste pojednostavili ovaj proces, predlažemo da koristite izgradnju projekta Gulp 4, koju Andrey Gorokhov neprestano poboljšava. Veze za preuzimanje bit će predstavljene u nastavku, ali za sada prođimo kroz glavne točke: opis i instalaciju.
Gulp Project Builder
Gulp je alat za izradu projekata, alat za automatizaciju gore opisanih zadataka. Pomoći će vam da ubrzate svoj rad i kompetentno pripremite projekt za puštanje.
Sklop možete preuzeti iz Github repozitorija ili putem Git naredbenog retka. U budućnosti ga možete prilagoditi svojim potrebama.
Osobitosti
- Imenovanje BEM klasa
- Koristi se BEM struktura
- Koristi se SCSS predprocesor
- koristi Babel transpiler za podršku modernog JavaScripta (ES6) u preglednicima
- koristi Webpack za izradu JavaScript modula
- CSS-grid pametna mreža temeljena na Bootstrapu koristi se za brzi prilagodljivi izgled
- koristi se tvrdi kod
Montaža
- instalirajte NodeJS (ako je potrebno) i Yarn
- preuzmite međugradnju s Gitom: git klon https://github.com/andreyalexeich/gulp-scss-starter.git
- instaliraj gulp globalno: yarn globalno dodaj gulp-cli
- idite u preuzetu mapu za izgradnju: cd gulp-scss-starter
- preuzeti potrebne zavisnosti: pređa
- za početak unesite naredbu: yarn run dev (način razvoja)
- za izradu projekta upišite yarn run build (način izrade)
Ako ste sve napravili kako treba, trebali biste imati otvoren preglednik s lokalnim poslužiteljem. Način izrade uključuje optimizaciju projekta: kompresiju slike, smanjivanje CSS i JS datoteka za učitavanje na poslužitelj.
Ako imate problema s instalacijom, pogledajte ovaj video:
Struktura datoteke
gulp-scss-starter ├── dist ├── gulp-tasks ├── src │ ├── blokovi │ ├── fontovi │ ├── img │ ├── js │ ├── stilovi │ ├── prikazi │ └── .htaccess ├── gulpfile.babel.js ├── webpack.config.js ├── package.json ├── .babelrc.js ├── .bemrc.js ├── .eslintrc.json ├── ─ .stylelintrc ├── .stylelintignore └── .gitignore- Korijen mape:
- .babelrc.js - Babel postavke
- .bemrc.js - BEM postavke
- .eslintrc.json - ESLint postavke
- .gitignore - sprječava Git da prati datoteke
- .stylelintrc - Stylelint postavke
- .stylelintignore - sprječava Stylelint da prati datoteke
- gulpfile.babel.js - Gulp postavke
- webpack.config.js - Webpack postavke
- package.json - popis ovisnosti
- mapa src - korištena tijekom razvoja:
- BEM blokovi: src/blokovi
- fontovi: src/fontovi
- slike: src/img
- JS datoteke: src/js
- stranice stranice: src/views/pages
- SCSS datoteke: src/styles
- HTML datoteke: src/views
- Konfiguracijska datoteka Apache web poslužitelja s gzip postavkama (kompresija bez gubitaka): src/.htaccess
- Mapa dist je mapa iz koje se pokreće lokalni razvojni poslužitelj (kada se izvodi yarn run dev)
- mapa gulp-tasks - mapa s Gulp-tasks
Timovi
- yarn run lint:style - Provjerite SCSS datoteke. VSCode zahtijeva instaliranje dodatka. Za WebStorm ili PHPStorm, Stylelint mora biti omogućen u Languages & Frameworks - Style Sheets - Stylelint (pogreške će se automatski popraviti kada se datoteka spremi)
- yarn run lint:style --fix - popravak grešaka u SCSS datotekama
- yarn run dev - pokretanje poslužitelja za razvoj projekta
- yarn run build - izgradite projekt s optimizacijom bez pokretanja poslužitelja
- yarn run build views - sastaviti Pug datoteke
- yarn run stilovi izgradnje - kompilirajte SCSS datoteke
- yarn pokrenuti skripte za izgradnju - izgraditi JS datoteke
- yarn run graditi slike - graditi slike
- yarn run build webp - pretvaranje slika u .webp format
- yarn run build sprites - skupljati spriteove
- yarn run izgraditi fontove - izgraditi fontove
- yarn run build favicons - izgradi favicons
- yarn run build gzip - izgradi Apache konfiguraciju
Komponentni pristup razvoju web stranice
- Svaki BEM blok ima svoju mapu unutar src/blocks/modules
- mapa jednog BEM bloka sadrži jednu HTML datoteku, jednu SCSS datoteku i jednu JS datoteku (ako blok koristi skriptu)
- HTML datoteka bloka se uvozi u datoteku src/views/index.html (ili u potrebnu datoteku stranice iz koje će se blok pozvati)
- Blok SCSS datoteka se uvozi u src/blocks/modules/_modules.scss datoteku
- Block JS datoteka se uvozi u src/js/import/modules.js
Primjer strukture mape s BEM blokom:
Blokovi ├── moduli │ ├──zaglavlje │ │ ├── zaglavlje.html │ │ ├── zaglavlje.js │ │ ├── zaglavlje.scss
Da ne biste ručno kreirali odgovarajuću mapu i datoteke, dovoljno je u konzolu napisati naredbu bem create my-block - za kreiranje mape BEM bloka, gdje je moj-blok naziv BEM bloka
Stranice projekta
- stranice projekta nalaze se u mapi src/views/pages
- glavna stranica: src/views/index.html
Fontovi
- fontovi su u mapi src/fonts
- koristite formate .woff i .woff2
- fontovi su uključeni u datoteku src/styles/base/_fonts.scss
- pomoću ove usluge možete pretvoriti lokalne fontove
Slike
- slike su u mapi src/img
- slika za generiranje favicona mora se nalaziti u mapi src/img/favicon i imati veličinu od najmanje 1024px x 1024px
- slike se automatski pretvaraju u .webp format. Detaljne informacije o korištenju.
Knjižnice trećih strana
- sve biblioteke treće strane instalirane su u mapi node_modules
- da biste ih učitali, koristite naredbu yarn add package_name
- da biste uključili JS datoteke biblioteka, uvezite ih na samom početku JS datoteke BEM bloka (tj. BEM bloka koji koristi skripta), na primjer:
uvoz$iz jquery;
- da biste uključili datoteke stilova biblioteke, uvezite ih u datoteku src/styles/vendor/_libs.scss
- JS datoteke i stilske datoteke biblioteka ne mogu se mijenjati neovisno
⚠️ Ako vaš projekt koristi nekoliko biblioteka koje moraju biti uključene na nekoliko stranica, kako biste izbjegli pogreške, trebate:
- duž staze src/js/import kreirajte mapu pages
- u mapi pages kreirajte js datoteku za stranicu, na primjer, pageA.js i tamo uvezite biblioteku koja će se koristiti samo na ovoj stranici
- napravite isti korak za dodatne stranice
- u datoteci webpack.config.js dodajte js datoteke stranice na ulaznu točku, primjer:
Unos: (glavni: "./src/js/index.js", stranica A: "./src/js/import/pages/pageA.js", stranica B: "./src/js/import/pages/pageB.js" }
- uključite kompilirane js datoteke na potrebne stranice
CSS pametna mreža
Slavina uključuje CSS pametne mreže Dmitrija Lavrika. Omogućuje vam da se riješite nepotrebnih klasa u označavanju korištenjem mixina u SCSS-u i ubrzava prilagodljivi izgled. Konfiguracija je već postavljena prema Bootstrap mreži. Primjer upotrebe:
Stavke ( @include row-flex (); @include md (justify-content, center); .item ( @include col (); @include size (3); @include size-md (5); @include size- xs(10); ) )
24. rujna , 2016
Obradit će se sljedeće teme: rad sa sass stilovima korištenjem izvornih mapa, lijepljenje i sažimanje js datoteka, izgradnja requirejs s rjs, pretprocesiranje html-a, čišćenje i kopiranje datoteka, optimiziranje slika, podizanje lokalnog web poslužitelja i način gledanja - zadaci gledanja. Dobrodošli u članak, bit će puno zanimljivih stvari!
p.s. Materijala ima jako puno pa će članak biti podijeljen u 3 dijela: osnove asemblera i organizacija projekta, pisanje testne aplikacije na Backbone + Require.js te zapravo build uz gutljaj.
Zašto trebate izgraditi sučelje.
Jedno od najvažnijih načela u razvoju je modularnost. Dijeljenje projektnog koda u mnogo malih, idealno labavo povezanih dijelova-modula. Ovo se odnosi na mnogo više od samog javascript koda. Ovo se odnosi na stilove i html predloške, na razne biblioteke.
Struktura jednostavne aplikacije napisane u Backbone + Require mogla bi izgledati otprilike ovako.
A ovo je mali probni projekt, u pravoj aplikaciji mogu postojati stotine i tisuće datoteka. Prisiljavanje korisničkog preglednika da šalje stotine http zahtjeva u najmanju je ruku nehumano. Moramo osigurati najbrže učitavanje usluge koju smo napisali. Stoga je jedan od najvažnijih zadataka alata za izgradnju minifikacija, smanjenje broja datoteka korištenih u projektu, njihovo lijepljenje u pakete. Na izlazu bismo trebali imati koncizniju strukturu, na primjer, ovako: 
Razlika je jasno vidljiva: umjesto desetaka datoteka, imamo jednu index.html, jednu css datoteku, optimizirane i komprimirane slike u zasebnoj mapi, iako se to ne vidi na snimci zaslona :-)
I također najzanimljivije: u mapi js primili smo samo 3 komprimirane datoteke.
p.s. Zašto tri, a ne jedan, reći ću vam kasnije.
Imajte na umu da je ovo stvarna struktura test aplikacije koju ćemo napisati uskoro.
Opisao sam samo jedan razlog za korištenje alata za izgradnju, ali to je dovoljno da počnete koristiti gulp, grunt, webpack ili slično u svojim projektima. I nije važno pišemo li veliku uslugu, mali SPA (kao u našem članku) ili odredišnu stranicu. Načela montaže su ista za sve projekte i razlikuju se samo u raznolikosti zadataka i pristupa njihovom rješavanju. U našem primjeru, stvorit ćemo strukturu koja se može proširiti na bilo koji način u budućnosti, ali izlaz će uvijek biti uredan hrp datoteka, spreman da se ulije u vašu proizvodno - borbenu lokaciju.
Kako pravilno organizirati projekt.
Princip je sljedeći: postoji odjeljak s datotekama programera, postoji odjeljak s prikupljenim datotekama i svim ostalim čemu ova stvar služi. Kreirajmo 2 mape u korijenu projekta: src i build. U src-u i samo u src-u ćemo raditi, stvarati nove datoteke, uređivati ih i općenito se zabavljati. Na gornjoj snimci zaslona, gdje se nalazi nekoliko desetaka datoteka, vidjeli ste točno sadržaj mape src našeg testnog projekta. A ispod su neke zgodne datoteke iz mape za izradu. Formira se samo automatski, alatima za montažu, tamo se ništa ne mora uređivati. U svakom slučaju, sa svakim sklopom, njegov sadržaj se prepisuje novim datotekama (a u razvojnom modu uopće nema mape za izgradnju - briše se da ne bude trn u oku)
Uz src i build, datoteke package.json, gulpfile.js, mapa node_modules i, po izboru, .gitignore (ako radite s git-om) bit će u korijenu. I dalje možete vidjeti mapu zapisa na mom mjestu - ovo je proizvod apachea i dugogodišnje navike čuvanja zapisa projekta u vlastitoj mapi, naravno, isključujući ih iz git repozitorija :-)
Ovako izgleda cijela struktura projekta: 
Prema sadržaju builda, mislim da nema pitanja, prema src ću objasniti detaljnije:
- 1. html - index.html, korijenska indeksna datoteka projekta. Zašto ne odmah na root src? Zato što će biti prethodno obrađeno i stvoreno gutljajem. Kako, saznat ćemo nešto kasnije, kada se latimo montaže.
- 2. img - slike, nisu komprimirane, normalne
- 3. js - sav javascript pokret projekta, Backbone modeli i pogledi
- 4. lib - biblioteke treće strane poput backbone.js, require.js, lodash.js i druge
- 5. skripte - js skripte koje su potrebne na proizvodnom mjestu, ali nisu potrebne u razvojnom modu. To se odnosi na kodove za analitiku, razne eksperimente i ostale marketinške komade.
- 6. stilovi - sass datoteke sa stilovima. Sastavljena css datoteka bit će dodana u istu mapu (samo za razvojni način)
- 7. tpl - html predlošci. Koriste ga pogledi Backbone pomoću dodatka za tekst require.js
Izgled test aplikacije je prilično neugledan. Može se reći da se ovakva sranja rade s nekoliko redaka html i css koda bez ijedne js datoteke. 
Ali naš cilj nije nacrtati lijepu sliku, već stvoriti pouzdanu strukturu projekta i uzeti u obzir što više aspekata sklopa. Kada projekt naraste na stotine datoteka, bit ćemo spremni za ovu pošast i lako se nositi s povećanim količinama. Stoga ćemo, unatoč malenosti i vanjskoj jadnosti testne aplikacije, naučiti principe montaže za velike i složene projekte.
Koje ćemo montažne zadatke rješavati.
Podsjetit ću da smo dogovorili dva načina izrade: razvoj i proizvodnju. Napisat ćemo sve svoje zadatke imajući na umu ova dva načina. Nisu sve operacije potrebne u procesu razvoja, niti sve u montaži za proizvodnju.
Evo popisa onoga što ćemo učiniti nakon što napišemo probnu aplikaciju:
- 1. Čišćenje datoteka i mapa od rezultata prethodne izgradnje
- 2. Izrada css-a iz sass datoteka, sa i bez kompresije
- 3. Povezivanje izvornih mapa sa stilovima, ujedno ću na primjeru pokazati zašto je to potrebno
- 4. Izrada js paketa s requirejs
- 5. Lijepljenje i sažimanje pojedinačnih js datoteka (analitika)
- 6. HTML pretprocesiranje
- 7. Optimizacija i kompresija slike
- 8. Podizanje lokalnog web poslužitelja
- 9. Zadaci za praćenje datoteka pri radu u razvojnom modu - watch-tasks
- 10. Skupljanje zasebnih zadataka na hrpu - završni zadaci za proizvodnju-montažu i razvoj-rad
Dakle, razgovarali smo o tome zašto uopće trebamo izgraditi frontend, odlučili o strukturi projekta, detaljno analizirali što želimo od builda i razgovarali općenito o testnoj aplikaciji. U sljedećem dijelu članka napisat ćemo jednostavnu Backbone aplikaciju u kombinaciji s Require.js. Ako niste upoznati s Backbone i/ili Require.js, onda nema razloga za brigu. Zapravo nema dovoljno Backbone koda u aplikaciji. Umjesto toga možete jednostavno koristiti svoju omiljenu biblioteku ili samo napisati javascript/jquery kod i preskočiti odjeljak za postavljanje requirejs.
Ovaj priručnik sadrži opis korisnih i najčešće korištenih front-end alata. Moći ćete naučiti postupak instaliranja alata i glavne točke rada s njima.
NPM
Uvod
Tijekom razvoja projekta često je potrebno dodati biblioteke i dodatke trećih strana. Kao rezultat toga, razvojni programer mora potražiti potrebnu ovisnost, preuzeti, raspakirati arhivu i kopirati datoteke u projekt. Upravitelji paketa pomoći će automatizirati ovaj rutinski rad.
upravitelj paketa- softver koji vam omogućuje upravljanje procesom instaliranja, deinstaliranja, konfiguriranja i ažuriranja različitih komponenti.
Dodavanje biblioteka trećih strana pomoću upravitelja paketa zamjenjuje se s nekoliko naredbi u terminalu.
Jedan od upravitelja paketa koji se koristi u frontend projektima je NPM.
npm(Node.js Package Manager) je upravitelj paketa uključen u Node.js. Koristi se za preuzimanje paketa s npm poslužitelja u oblaku ili za učitavanje paketa na ovaj poslužitelj.
Službena stranica
Početak rada
Da biste instalirali npm, morate preuzeti i instalirati NodeJS (npm će se automatski instalirati): https://nodejs.org/en/.
Korištenje
Instaliranje paketa
Paket je jedna ili više JavaScript datoteka koje predstavljaju neku vrstu biblioteke ili alata. Da biste instalirali paket koristeći npm, pokrenite sljedeću naredbu:
npm instalirati<название пакета>
Ključ se koristi za globalnu instalaciju paketa -g. Nakon instalacije, paket se zajedno s izvorima nalazi u direktoriju čvor_moduli/.
Provjera verzije
Da biste provjerili trenutnu verziju npm-a, morate pokrenuti naredbu:
Postavljanje konfiguracijske datoteke
Datoteka paket.json sadrži informacije o vašoj aplikaciji: naziv, verzija, ovisnosti itd. Svaki direktorij koji sadrži ovu datoteku tumači se kao paket Node.js.
Za izradu datoteke paket.json morate pokrenuti naredbu:
npm init
Nakon toga ćete morati ispuniti neke podatke o projektu.
Ova datoteka će pohraniti imena i verzije svih paketa potrebnih u projektu. Uz zapovijed npm instalirati možete preuzeti sve pakete koji se nalaze u paket.json.
Da biste instalirali neki paket i automatski ga spremili u datoteku package.json, koristite naredbu:
npm instalirati<название пакета>--save-dev
Alternative
Pređa
Osobitosti
- Izrada web poslužitelja i automatsko ponovno učitavanje stranice u pregledniku prilikom spremanja koda, praćenje promjena u datotekama projekta.
- Korištenje raznih JavaScript, CSS i HTML predprocesora (CoffeeScript, Less, Sass, Stylus, Jade itd.).
- Minifikacija CSS i JS koda, kao i optimizacija i ulančavanje pojedinačnih projektnih datoteka u jednu.
- Automatsko kreiranje prefiksa dobavljača (prefiksi naziva CSS svojstava koje proizvođači preglednika dodaju za nestandardna svojstva) za CSS.
- Upravljanje datotekama i mapama unutar projekta - stvaranje, brisanje, preimenovanje.
- Pokretanje i praćenje izvršavanja vanjskih naredbi operacijskog sustava.
Rad sa slikama - kompresija, stvaranje spriteova, promjena veličine (png, jpg, svg, itd.). - Postavite (slanje na vanjski poslužitelj) projekt putem FTP-a, SFTP-a itd.
Povezivanje i korištenje u projektu beskonačno velikog broja Node.js i Gulp uslužnih programa, programa i dodataka. - Izrada raznih projektnih mapa i automatizacija ostalog ručnog rada.
Početak rada
NodeJS i npm moraju biti instalirani na sustavu.
Korak 1: Da biste instalirali GulpJS globalno pomoću npm upravitelja paketa, pokrenite sljedeću naredbu:
npm instalirajte gulp -g
Korak 2: Morate ga instalirati za aplikaciju:
npm install --save-dev gulp
Učitavanje dodatnih dodataka koji se mogu koristiti prilikom izrade projekta također se vrši pomoću npm-a sa sljedećom naredbom:
npm instalirati<название плагина>--save-dev
Svi instalirani dodaci nalaze se u direktoriju čvor_moduli/.
Korištenje
Korak 1: Prvo se morate povezati gutljaj na projekt. Za ovo u datoteku gulpfile.js napiši redak:
var gutljaj = zahtijevaju ("gutljaj");
Funkcija zahtijevati () omogućuje povezivanje dodataka iz mape čvor_moduli/.
Korak 2: S varijablom gutljaj možete kreirati zadatke za izgradnju projekta:
Gulp.task("exampleTask", function() ());
metoda zadatak uzima dva parametra: ime i funkciju s tijelom zadatka.
Ova je uputa već dostupna. Da biste to učinili, upišite u konzolu:
Primjer gutljajaZadatak
Osnovne naredbe
Ispod je složeniji primjer izjave:
Gulp.task("exampleTask", function () ( return gulp.src("source-files") .pipe(plugin()) .pipe(gulp.dest("folder")); ));
Analizirajmo naredbe korištene u ovom primjeru:
- gutljaj.src- odabir izvornih datoteka projekta za obradu pomoću dodatka;
- .pipe(plugin())- poziv Gulp dodatka za obradu datoteke;
- .pipe(gulp.dest('folder')) - izlaz rezultirajuće datoteke u odredišnu mapu.
Maske datoteka
Funkcija gulp.src uzima masku datoteke kao parametar. Primjeri maski:
- ./ – trenutni direktorij;
- ../ – nadređeni imenik;
- js/index.js- datoteku index.js u mapi js;
- js/*.js- sve datoteke s nastavkom js u mapi js;
- js/**/*.js- sve datoteke s ekstenzijom js u mapi js i njezinim poddirektorijima;
- !js/*.js– izuzimanje datoteka s nastavkom js u mapi js.
potoci
Korištenje niti jedna je od najvažnijih prednosti GulpJS-a.
Streamovi vam omogućuju sekvencijalno prosljeđivanje nekih podataka iz jedne funkcije u drugu, od kojih svaka izvodi neku radnju na tim podacima.
Funkcija gutljaj.src() stvara tok objekata koji predstavljaju datoteke koje su mu proslijeđene kao parametar. Zatim, korištenje funkcija cijev izgrađen je cjevovod po kojem se prenosi tok objekata. Kao parametar, ovoj se funkciji prosljeđuje dodatak koji na neki način obrađuje tok objekata.
Ispod je primjer korištenja niti. U ovom primjeru koriste se dodaci trećih strana. gutljaj-jshint I gutljaj-concat, instalirati i spojiti gulpfile.js
Funkcija gutljaj.src uzima datoteke po maski js/*.js. Pokreće JSHint i ispisuje rezultat. Zatim ulančava datoteke i na kraju sprema rezultirajuću datoteku nakon ulančavanja u direktorij dist/.
Gulp.task("example", function () ( return gulp.src("js/*.js") .pipe(jshint()) .pipe(concat("index.js")) .pipe(gulp.dest ("dist")); ));
Dodaci trećih strana
Razmotrite primjer korištenja dodataka trećih strana. Da bismo to učinili, izradit ćemo instrukciju za ulančavanje js datoteke:
Korak 1: Najprije morate uključiti dodatak s zahtijevanom naredbom:
var concat = require("gulp-concat");
Korak 2: Zatim trebate stvoriti zadatak za spajanje datoteka s ekstenzijom js koja se nalazi u direktoriju js/. Na kraju, rezultirajuća datoteka se postavlja u dist/js direktorij:
Gulp.task("concat", function () ( return gulp.src("js/*.js") .pipe(concat("index.js")) .pipe(gulp.dest("dist/js") ); ));
gutljaj concat
dodatne informacije
Također možete definirati zadatak koji će uzrokovati izvršenje drugih zadataka.
Gulp.task("build", ["html", "css"]);
Osim toga, postoji metoda Gledati za promatranje promjena u datotekama:
Gulp.watch("maska datoteka za promatranje", ["naziv zadatka koji će se izvršiti kada se datoteke promijene"]);
U gulpfile.js možete stvoriti zadani zadatak:
Gulp.task("default", ["task1", "task2"]);
Ovaj zadatak se pokreće iz konzole naredbom:
Glavni dodaci
- gutljaj-autoprefiks– automatski postavlja prefikse CSS svojstvima;
- gulp-browser-sync- stvara vezu, nakon čega automatski osvježava stranicu kada mijenja datoteke klijenta ili čak poslužitelja;
- gutljaj-uncss- optimizacija CSS datoteka. Dodatak analizira HTML kod i pronalazi sve neiskorištene i duplicirane stilove;
- gutljaj-csso- CSS minifier;
- gutljaj-htmlmin– jednostavan HTML minifier;
- gutljaj-htmlsavjet– HTML validator;
- gutljaj-grčiti– JavaScript minifier;
- gutljaj-konkat– ulančavanje datoteka;
- gutljaj-web poslužitelj– omogućuje stvaranje i pokretanje poslužitelja;
- gutljaj-jshint– provjera kvalitete JS koda;
- gutljaj-jasmin– provođenje jasmin testova;
- gutljaj-jsdoc- generiranje JSDoc dokumentacije.
Cijeli popis Gulp dodataka možete pronaći ovdje:
http://gulpjs.com/plugins/
Alternative
GruntJS
Osobitosti
- Podrška za asinkrono testiranje.
- Mogućnost izlaganja promatrača (promatrača) na različitim objektima.
Početak rada
Da biste povezali Jasmine sa svojim projektom, trebate preuzeti biblioteku i uključiti sljedeće datoteke na glavnu HTML stranicu:
- lib/jasmin-*/jasmin.js- sam okvir;
- lib/jasmine-*/jasmine-html.js- registracija rezultata u obliku HTML-a;
- lib/jasmin-*/jasmin.css- izgled rezultata ispitivanja;
- SpecRunner.html- datoteka koja se otvara u pregledniku za izvođenje testova.
Sinkronizacija s instrumentima
GulpJS
Jasmine se može uključiti u sklop GulpJS projekta:
Korak 1: Prvo morate instalirati gulp-jasmine dodatak:
npm instalirajte gulp-jasmine --save-dev
Korak 2: Zatim trebate uključiti dodatak u datoteku za izradu i izraditi zadatak probnog pokretanja:
var jasmine = require("gutljaj-jasmina"); gulp.task("jasmin", funkcija() ( gulp.src("testne datoteke") .cijev(jasmin()); ));
KarmaJS
(na kraju članka rad s ovim alatom je detaljnije opisan)
Za povezivanje Jasmine u KarmaJS potrebno vam je:
Korak 1: Instaliraj KarmaJS:
npm instalirati -g karma-cli
Korak 2: Instalirajte dodatke potrebne za pokretanje testova napisanih u Jasminu u preglednicima Chrome i PhantomJS:
npm instaliraj karma-jasmine karma-chrome-launcher karma-phantomjs-launcher
Korak 3: Instalirajte sam Jasmine:
npm instalirati -g jasmin
Korak 4: U karma konfiguracijskoj datoteci povežite dodatke i postavite put do testova.
Korištenje
Ključne riječi
- opisati - definicija skupa testova;
- it - definicija testa;
- expect - definicija očekivanja koja se provjeravaju u testu.
Funkcije describe i it uzimaju dva parametra: prvi je naziv, drugi je funkcija s kodom.
Primjer osnovnog testa
describe("naziv paketa testova", funkcija () ( it("naziv testa", funkcija () (expekivati(2+2).toBe(4); )); ));Metode provjere rezultata
- očekivati().biti()– provjera jednakosti varijabli (‘===’);
- očekivati().not.toBe()– provjera jednakosti varijabli (‘!==’);
- očekivati().toEqual()– provjera jednakosti varijabli i objekata, uključujući sadržaj;
- očekivati().toBeDefined()- provjera postojanja;
- expect().toBeUndefined()– provjera nepostojanja;
- očekujem().toBeNull()– provjera vrijednosti varijable za null;
- expect().toBeTruthy()- provjera istinitosti;
- očekujem().toBeFalsy()- provjeriti neistinitost;
- očekujem().toBeLessThan()– provjera da vrijednost mora biti manja od;
- očekivati().toBeGreaterThan()– provjera mora li vrijednost biti veća od;
- očekuj().toBeCloseTo()– provjera treba li vrijednost biti blizu broja;
- očekivati().toMatch()– provjera podudaranja regularnih izraza;
- očekivati().sadržati()– provjera sadržaja u nizu;
- očekivati().baciti()– provjera poziva iznimke;
- očekujem().toHaveBeenCalled()– provjera poziva funkcije.
Dodatne funkcije
Kako bi se izbjeglo kopiranje logike koja se koristi u testovima, koriste se funkcije prijeSvakog/poslijeSvakog. Pokreću se prije/poslije svakog testa.
Funkcije se koriste za testiranje asinkronih poziva trči I čeka.
- trči- prihvaća asinkronu funkciju za izvršenje;
- čeka- uzima tri parametra: prvi je funkcija koja bi trebala vratiti pravi, if async poziv u funkciji trči je izvršen, drugi je poruka o pogrešci, treći je čekanje u milisekundama.
Promatrači
Mogućnost praćenja poziva funkcija obavlja se pomoću špijunirati. Ova funkcija ima dva parametra: prvi je objekt za koji se funkcija poziva, drugi je naziv funkcije koju treba pratiti.
If(“test poziva funkcije”, funkcija () ( spyOn(exampleObject, "exampleFunction"); exampleObject.exampleFunction(); expect(exampleObject.exampleFunction).toHaveBeenCalled(); ));
Prilikom testiranja pomoću špijunirati možete pratiti broj poziva, njihove parametre i svaki poziv posebno.
Da biste stvorili funkciju bez implementacije, možete koristiti createSpy. Funkcija createSpy uzima naziv funkcije za identifikaciju.
If(“test poziva funkcije”, function () ( var example = createSpy("EXAMPLE"); example(“param1”, “param2”); expect(example.identify).toHaveBeenCalledWith(“param1”, “param2”) ;expect(example.calls.length).toEqual(1); ));
Stup objekt se stvara pomoću createSpyObj. Kao parametri createSpyObj uzima naziv objekta i niz nizova, što je popis metoda na stub objektu.
Alternative
Moka
Korištenje
Dokumentacija se generira iz komentara izvornog koda.
U ovom ćemo članku razmotriti primjer Gulp okruženja koje se može koristiti za udoban front-end razvoj web projekta. Ovaj je primjer prema zadanim postavkama konfiguriran za izradu web-mjesta i web-aplikacija temeljenih na okviru Bootstrap 4.
Projekt obrađen u ovom članku nalazi se na Githubu na: https://github.com/itchief/gulp-project-bootstrap-4
Video za ovaj članak:
Upute za instaliranje okruženja Gulp
Da biste stvorili okruženje, morate imati instalirane sljedeće programe:
- "Node.js" (možete preuzeti "Node.js" instalacijski program za svoj operativni sustav s ove stranice; projekt zahtijeva najmanje verziju 10);
- "Gulp" (Možete instalirati Gulp pokretanjem sljedeće naredbe u konzoli: npm install -g gulp-cli).
Sljedeći korak je instaliranje npm paketa i njihovih ovisnosti. Da biste to učinili, u konzoli (trebala bi biti u korijenskom direktoriju projekta) morate pokrenuti naredbu:
npm instalirati
Ova naredba će instalirati sve pakete koji su potrebni kako za rad samog okruženja tako i za frontend. npm izvodi ove radnje prema uputama napisanim u datoteci "package.json".
Kada koristite prvu verziju projekta (1.0.0), koja koristi Bower package manager, trebate pokrenuti drugu naredbu:
Bower instalacija
Ovaj program će instalirati pakete sučelja navedene u datoteci "bower.json".
Kako koristiti Gulp okruženje?
Otvorite naredbeni redak (staza bi trebala pokazivati na korijensku mapu projekta) i upišite gulp (normalni način rada):
Nakon unosa ove naredbe pokrenut će se zadani zadatak, tj. "zadano". Ovaj zadatak će zauzvrat pokrenuti niz drugih zadataka: "build", "webserver" i "watch".
Zadatak "build" izgradit će projekt za proizvodnju (tj. pokrenut će "clean:build", "html:build", "css:build", "js:build", "fonts:build" i "image:build" "). Ovi će zadaci smjestiti nastale projektne datoteke u mapu "assets/build".
Zadatak "web poslužitelja" osmišljen je za pokretanje lokalnog web poslužitelja s "ponovnim učitavanjem uživo" stranica u pregledniku. Pomoću njega vrlo jednostavno možete pregledati projekt i izvršiti njegovo testiranje.
Zadatak "watch" koristi se za praćenje promjena izvornih datoteka u mapi "assets/src" i pokretanje različitih zadataka ako se dogode. Drugim riječima, omogućuje vam automatsko pokretanje potrebnih zadataka i ažuriranje dobivenih datoteka (sadržaj mape "assets/build").
Osim toga, možete izvršiti selektivnu (neovisnu) montažu jednog ili drugog dijela projekta.
Na primjer, za izgradnju samo CSS-a dijela stranice dovoljno je unijeti naredbu:
gutljaj css: build
Popis ostalih zadataka:
gulp clean:build // za čišćenje direktorija "assets/build" gulp html:build // za izradu HTML datoteka gulp js:build // za izradu JS datoteka gulp fonts:build // za izradu fontova gulp image:build / / na montažnu sliku
Opis okruženja Gulp
U ovom dijelu ćemo analizirati:
- glavni alati i struktura datoteka okruženja Gulp;
- kako su Bootstrap izvori povezani s projektom i kako su konfigurirani;
- kako samostalno (od nule) inicijalizirati Gulp projekt i instalirati ovisnosti (bez korištenja gotovog package.json)
- kako inicijalizirati Bower i instalirati frontend pakete od nule (bez korištenja gotovih "bower.json")*;
- sadržaj datoteke za izgradnju Gulp projekta (gulpfile.js)
* Upravitelj paketa Bower nije korišten u projektu od verzije 2.0.0.
Popis alata
Okruženje namijenjeno razvoju front-end projekta (web stranice) izgrađeno je na temelju sljedećih alata:
- Node.js (okruženje u kojem će se okruženje izvoditi);
- npm (upravitelj paketa uključen u Node.js; koristit će se za učitavanje Gulp-a, dodataka i front-end paketa)
- jQuery, Popover, Bootstrap (paketi koji će se koristiti za izgradnju css i js dijelova stranice);
- Gulp i njegovi dodaci (koristit će se za izradu projekta i izvođenje drugih web zadataka).
U prvim verzijama projekta dodatno je korišten Bower package manager. Koristio se za učitavanje biblioteka jQuery, Popover i Bootstrap. U verzijama projekta počevši od 2.0.0, te se biblioteke učitavaju pomoću npm-a.
Gulp struktura datoteke projekta
Datotečna struktura projekta može se organizirati na različite načine. To može ovisiti o preferencijama određenog programera io projektu za koji je stvoren.
U ovom ćemo članku slijediti sljedeću strukturu:
Mapa "assets" i datoteke "gulpfile.js", "package.json" nalaze se u korijenu projekta. Datoteka "gulpfile.js" sadržavat će zadatke za graditelja Gulp projekta.
Prva verzija projekta također je koristila datoteke ".bowerrc" i "bower.json". Datoteka "bower.json" je konfiguracijska datoteka Bower managera na temelju koje su određeni front-end paketi potrebni za učitavanje. U ovom projektu korišten je za učitavanje Bootstrapa, jQueryja i Poppera.
Mapa "assets" sadrži dvije mape: "src" (za izvorne datoteke) i "build" (za gotove datoteke; Gulp builder će ih staviti u ovu mapu). Mapa "src" sadrži direktorije "fonts" (za fontove), "img" (za izvorne slike), "js" (za js datoteke), "style" (za stilove) i "template" (za HTML fragmente) i datoteku "index.html".
U prvoj verziji projekta, mapa "src" još uvijek je sadržavala direktorij "bower_components". Namijenjen je komponentama koje su učitavane pomoću Bowera. Nema ga u trenutnoj verziji.
Direktorij "js" sadrži dvije datoteke: "main.js" i "my.js". Datoteka "my.js" koristi se za pisanje vlastitih skripti, a "main.js" se koristi za definiranje popisa datoteka čiji sadržaj treba uključiti u konačnu js datoteku. Konačna datoteka je datoteka koja bi trebala biti izlaz (u direktoriju "build").
Direktorij "style" rezerviran je za stilove. Ovaj direktorij sadrži tri datoteke: "main.scss" (sadrži popis datoteka čiji sadržaj mora biti uključen u konačnu datoteku stila), "my.scss" (koristi se za pisanje vaših stilova) i "variables.scss" (sadrži SCSS varijable, s kojima ćemo mijenjati stilove Bootstrapa 4, a također ga koristiti za stvaranje naših varijabli).
Datoteka "index.html" glavna je stranica projekta koji se stvara. Osim "index.html", u ovaj direktorij mogu se smjestiti i druge html stranice.
Direktorij "template" namijenjen je za postavljanje fragmenata HTML stranica u njega. Na primjer, možete stvoriti datoteke "head.html" i "footer.html" u ovom direktoriju i uvesti njihov sadržaj (koristeći sintaksu //= path_to_file) na nekoliko stranica odjednom. To će olakšati izradu i uređivanje html stranica, jer. pojedini dijelovi stranica već će biti u posebnim datotekama.
Povezivanje Bootstrap 4 izvora s projektom i njihovo postavljanje
Postoje različiti načini povezivanja Bootstrap 4 frameworka s projektom, kao i opcije za rad s njim.
Najfleksibilnija opcija je korištenje izvornih kodova. U ovom slučaju ne samo da može vrlo je jednostavno promijeniti zadane stilove Bootstrapa, ali i za povezivanje s projektom samo one klase i komponente koje će se u njemu koristiti.
Bootstrap 4 CSS stilovi Izvorno kodirani u SCSS-u a predstavljeni su velikim brojem malih datoteka.
Popis SCSS datoteka (nalaze se u direktoriju "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" itd.
Svaka takva datoteka obavlja ili određeni servisni zadatak ili je odgovorna za oblikovanje određene funkcije okvira ili komponente. SCSS datoteke imaju sažeta i razumljiva imena. Koristeći samo njih, možete prilično točno razumjeti svrhu svakog od njih.
Prilagodba ili promjena zadanih stilova Bootstrapa 4 je gotova redefiniranjem vrijednosti SCSS varijabli. Sve SCSS varijable su skupljene na jednom mjestu radi praktičnosti (u datoteci "variables.scss"). No, poželjno je redefinirati njihove vrijednosti, naravno, ne u ovoj datoteci, već u vlastitoj (na primjer, koja ima isti naziv "variables.scss", ali se nalazi u "assets/style/variables.scss").
Na primjer, promjena boje teme uspjeh I opasnost, vrši se promjenom vrijednosti varijabli $green i $red:
// Nadjačavanje zadanih vrijednosti varijabli Bootstrap 4 $red: #cc2eaa; $zeleno: #2ecc71;
Bilješka da nakon kopiranja Bootstrap 4 varijabli u vašu CSS datoteku ("assets/style/variables.scss"), moraju biti uklonjene oznake! default .
Oznaka !default služi za postavljanje SCSS varijable na zadanu vrijednost. Ako SCSS varijabla već ima vrijednost, tada nova vrijednost, ako je navedena s ključem !default, neće biti postavljena.
Određivanje koje Bootstrap 4 izvorne SCSS datoteke trebaju biti uključene u kompilaciju u CSS, a koje ne, vrši se putem SCSS datoteke "assets/style/main.scss". Drugim riječima, sadržaj ove datoteke će odrediti skup stilova koji će biti povezani s web stranicom nakon kompilacije.
Osim toga, datoteke "assets/style/variables.scss" (za nadjačavanje Bootstrap varijabli) i "assets/style/my.scss" (za stvaranje vlastitih stilova) također su povezane s ovom datotekom.
Sadržaj datoteke "main.scss" (primjer):
// Nadjačajte zadane Bootstrap 4 varijable i definirajte vlastite @import "varijable"; // Uključite potrebne Bootstrap 4 SCSS izvore @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"; // Uključite svoje SCSS datoteke @import "my";
Osim toga, neke Bootstrap 4 komponente također zahtijevaju JavaScript kôd za rad.
Popis Bootstrap 4 js datoteka (nalaze se u "node_modules/bootstrap/js/dist/" direktoriju): "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".
Određivanje koje js datoteke okvira Bootstrap 4 trebaju biti uključene u konačnu js datoteku projekta, a koje ne, vrši se kroz "main.js".
Uvoz potrebnih datoteka u rezultirajući build/main.js vrši se pomoću sljedeće konstrukcije:
//= put_do_datoteke
Ovu radnju izvršit će Gulp dodatak "gulp-rigger". Kako ga instalirati i spojiti bit će opisano u nastavku.
Također možete uvesti jQuery, Popper (potreban za rad komponenti Dropdown, Tooltip i Popover) i, ako je potrebno, vlastite js datoteke u ovu datoteku.
Sadržaj datoteke "main.js" (primjer):
// Uvoz jQueryja //= ../../../node_modules/jquery/dist/jquery.js // Uvoz Poppera //= ../../../node_modules/popper.js/dist/umd /popper.js // Uvezite potrebne datoteke Bootstrap 4 js //= ../../../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 // Uvoz drugih js datoteka //= moj . js
Kako pokrenuti Gulp projekt i instalirati ovisnosti od nule?
Razvoj projekta obično počinje stvaranjem datoteke "package.json" (manifest).
Datoteka "package.json" sadržavat će opće informacije o projektu (naziv, verzija, opis, ime autora itd.), kao i informacije o paketima o kojima ovaj projekt ovisi.
Da biste stvorili manifest, morate otići u korijensku mapu projekta i unijeti naredbu:
npm init 
Nakon unosa naredbe potrebno je odgovoriti na sljedeća pitanja:
- naziv projekta (ime) - "bootstrap-4";
- broj verzije (verzija) – "2.0.0";
- opis (opis) - "Pokreni projekt s korištenjem Bootstrap 4";
- autor (autor) - "web stranica";
- git repozitorij (git repozitorij) - "";
- ulazna točka (entry point), testna naredba (testna naredba), licenca (licenca), ključne riječi (keywords) - zadane vrijednosti.
Na pitanje "Je li ovo ok?" odgovorite "da" ili pritisnite Enter.
Kao rezultat toga, datoteka "package.json" pojavit će se u korijenskoj mapi projekta.
Sada instalirajmo pakete koje ćemo koristiti u projektu sljedećom naredbom:
npm install package_name --save-dev // instalirajte paket, s informacijama o njemu koji se automatski dodaju u odjeljak "devDependencies" datoteke "package.json" npm install package_name --save-prod // instalirajte paket, s informacijama o tome, automatski se dodaje u odjeljak "ovisnosti" datoteke "package.json".
Ključ "--save-dev" ili "--save-prod" određuje koji će dio datoteke "package.json" sadržavati informacije o njoj.
Popis paketa koji će se koristiti u projektu:
npm instalirati gulp --save-dev // instalirati gulp npm instalirati preglednik-sync --save-dev // instalirati preglednik-sinkronizaciju npm instalirati gulp-autoprefixer --save-dev // instalirati gulp-autoprefixer npm instalirati gulp-cache - -save-dev // instaliraj gulp-cache npm instaliraj gulp-clean-css --save-dev // instaliraj gulp-clean-css npm instaliraj gulp-rimraf --save-dev // instaliraj gulp-clean-css npm instaliraj gulp-imagemin --save-dev // instaliraj gulp-imagemin npm instaliraj gulp-plumber --save-dev // instaliraj gulp-plumber npm instaliraj gulp-rigger --save-dev // instaliraj gulp-rigger npm instaliraj gulp- sass --save-dev // instalirajte gulp-sass npm instalirajte gulp-sourcemaps --save-dev // instalirajte gulp-sourcemaps npm instalirajte gulp-uglify --save-dev // instalirajte gulp-uglify npm instalirajte imagemin-jpeg- recompress --save-dev // instalirajte imagemin-jpeg-recompress npm instalirajte imagemin-pngquant --save-dev // instalirajte imagemin-pngquant npm instalirajte gulp-rename --save-dev // instalirajte imagemin-pngquant npm instalirajte jquery - -save-prod npm instalirati popper.js --save-prod npm instalirati bootstrap --save-prod
Nakon instaliranja svih ovisnosti, datoteka package.json imat će sljedeći sadržaj:
( "ime": "bootstrap-4", "verzija": "2.0..com/itchief/gulp-project-bootstrap-4.git" ), "ovisnosti": ( "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-vodoinstalater": "^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" ) )
Kako inicijalizirati Bower i instalirati frontend pakete od nule?
Definirajmo mapu u koju će Bower preuzimati pakete. Da biste to učinili, stvorite .bowerrc datoteku i u nju unesite sljedeće:
( "direktorij": "assets/src/bower_components/" )
Spremite datoteku .bowerrc. Sada će se sve komponente učitati u direktorij bower_components koji se nalazi u Assets/src/.
Inicijalizirajmo Bower (stvorimo datoteku manifesta bower.json). Stvaranje datoteke bower.json može se izvršiti pomoću naredbe (u korijenskoj mapi projekta):
Bower init 
Nakon toga potrebno je odgovoriti na sljedeća pitanja:
- naziv projekta (naziv) - bootstrap-4;
- description (opis) - Pokrenite projekt na Bootstrap 4 - mjestu;
- autor (autor) - stranica;
- postavi instalirane komponente kao ovisnosti (postavi trenutno instalirane komponente kao ovisnosti) - Y (Da);
- želite li ovaj paket označiti privatnim čime se sprječava slučajno objavljivanje u registru - Y (Da);
- za ostala pitanja ostavit ćemo zadane odgovore koje nudi program;
Ovi koraci će stvoriti datoteku bower.json.
Učitajmo Bootstrap 4 i pakete o kojima ovisi (Popper i jQuery) u naš projekt koristeći Bower.
Da biste to učinili, unesite sljedeću naredbu u konzolu:
Bower instalirajte bootstrap#v4.0.0-beta --save
Prekidač -save potreban je za pisanje informacija o paketu u odjeljak ovisnosti datoteke bower.json.
Kao rezultat, bower.json će imati sljedeći sadržaj:
( "ime": "bootstrap-4", "opis": "Pokreni projekt na Bootstrap 4 - web stranici", "autori": [ "web stranica" ], "licenca": "ISC", "ključne riječi": , "početna stranica ": "", "ignore": [ "**/.*", "node_modules", "bower_components", "assets/src/bower_components/", "test", "testovi" ], "dependencies": ( " jquery": "^3.2.1", "bootstrap": "^v4.0.0-beta" ) )
Ako ne želite inicijalizirati Bower (bower.json) naredbom bower init i ručno instalirati pakete, možete jednostavno stvoriti datoteku bower.json (na primjer, pomoću upravitelja datoteka) i u nju zalijepiti gornji tekstualni sadržaj . Da biste instalirali ovisnosti u projekt, bit će dovoljno unijeti sljedeću naredbu:
Bower instalacija
Opis datoteke za izgradnju Gulp projekta (gulpfile.js)
Sve radnje izvedene prije ovoga bile su pripremne. Sve funkcionalnosti koje će kreirano okruženje izvoditi bit će određene datotekom "gulpfile.js".
Datoteka "gulpfile.js" je popis zadataka.
Glavni zadaci koje će ova datoteka obavljati:
- prikupljanje nekoliko stilskih datoteka u jednu, kompajliranje rezultirajućeg SCSS-a u CSS, dodavanje automatskih prefiksa, minimiziranje CSS-a i stvaranje mape izvora;
- uvoz svih potrebnih js datoteka u jednu, minimiziranje ove datoteke i stvaranje mape izvora;
- prikupljanje html datoteka, prijenos fontova, obrada (kompresija) slika i automatsko ažuriranje stranica kroz Browser Sync.
Nadalje, kako ne bismo pokretali ove zadatke kada ručno mijenjamo izvorne datoteke, stvorimo još jedan zadatak "gledanja". Pratit će promjene datoteka i automatski pokretati određene zadatke.
Kod datoteke "gulpfile.js" (kada se koristi Gulp 4):
"koristi strog"; /* Putovi do izvornih datoteka (src), gotovih datoteka (build) i datoteka za praćenje promjena (watch) */ var path = ( build: ( html: "assets/build/", js: "assets/build/ js/", css: "assets/build/css/", img: "assets/build/img/", fontovi: "assets/build/fonts/" ), src: ( html: "assets /src/*. html", js: "assets/src/js/main.js", stil: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", fontovi: "assets/src/fonts/**/*.*" ), gledajte: ( html: "assets/src/**/*.html", js: "assets/src/js/** /*.js" , css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", fontovi: "assets/srs/fonts/* */*.* " ), čisto: "./assets/build/*" ); /* postavke poslužitelja */ var config = ( server: ( baseDir: "./assets/build" ), notify: false); /* Uključi gulp i dodatke */ var gulp = require("gulp"), // Uključi Gulp web poslužitelj = require("browser-sync"), // Poslužitelj za pokretanje i automatsko ažuriranje stranica vodoinstalater = zahtijeva ("gulp-vodoinstalater) "), // modul za praćenje grešaka rigger = require("gulp-rigger"), // modul za uvoz sadržaja jedne datoteke u drugu sourcemaps = require("gulp-sourcemaps"), // modul za generiranje karte sass izvornih datoteka = require("gulp-sass"), // modul za kompajliranje SASS (SCSS) u CSS autoprefixer = require("gulp-autoprefixer"), // modul za automatsko postavljanje autoprefiksa cleanCSS = require("gulp- clean-css" ), // dodatak za umanjivanje CSS-a uglify = require("gulp-uglify"), // dodatak za umanjivanje JavaScript predmemorije = require("gulp-cache"), // dodatak za predmemoriju imagemin = require(" gulp-imagemin" ), // dodatak za kompresiju PNG, JPEG, GIF i SVG slika jpegrecompress = require("imagemin-jpeg-recompress"), // dodatak za kompresiju jpeg pngquant = require("imagemin-pngquant"), / / dodatak za kompresiju png rimraf = require("gulp-rimraf"), // dodatak za brisanje datoteka i direktorija rename = require("gulp-rename"); /* zadaci */ // pokretanje poslužitelja gulp.task("webserver", function () ( webserver(config); )); // izgraditi html gulp.task("html:build", function () ( return gulp.src(path.src.html) // odabrati sve html datoteke u navedenoj stazi. pipe(vodoinstalater()) // pratiti pogreške . pipe(rigger()) // uvoz privitaka. pipe(gulp.dest(path.build.html)) // upload gotovih datoteka. pipe(webserver.reload(( stream: true ))); // ponovno pokreni poslužitelj ) ) ; // prikupljanje stilova gulp.task("css:build", function () ( return gulp.src(path.src.style) // dobivanje main.scss .pipe(plumber()) // za praćenje grešaka.pipe( izvorne karte.init()) // inicijaliziraj izvornu kartu .pipe(sass()) // scss -> css .pipe(autoprefixer()) // dodaj prefikse.pipe(gulp.dest(path.build.css)) .pipe (preimenuj(( sufiks: ".min" ))) .pipe(cleanCSS()) // Umanji CSS .pipe(sourcemaps.write(". /")) // pisanje izvorne karte .pipe(gulp.dest(path.build.css)) // učitavanje za izgradnju .pipe(webserver.reload(( stream: true ))); // ponovno pokreni poslužitelj )); / / build js gulp.task("js:build", function () ( return gulp.src(path.src.js) // dohvaćanje datoteke main.js .pipe(plumber()) // za praćenje pogrešaka.pipe ( rigger()) // uvoz svih navedenih datoteka u main.js .pipe(gulp.dest(path.build.js)) .pipe(rename(( sufiks: ".min" ))) .pipe(sourcemaps.init / / stavite gotovu datoteku. pipe(webserver.reload(( stream: true ))); // ponovno pokrenite poslužitelj )); // prijenos fontova gulp.task("fonts:build", function () ( return gulp.src (path. src.fonts) .pipe(gulp.dest(path.build.fonts)); )); // obrada slika gulp.task("image:build", function () ( return gulp.src(path. src.img ) // putanja izvora slike. pipe(cache(imagemin([ // kompresija slike imagemin.gifsicle(( interlaced: true)), jpegrecompress(( progresivno: true, max: 90, min: 80 )), pngquant () , imagemin.svgo(( dodaci: [( removeViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // upload gotovih datoteka )); // brisanje direktorija za izgradnju gulp.task("clean:build", function () ( return gulp.src(path.clean, ( read: false )) .pipe(rimraf()); )); // brisanje predmemorije 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", " slika:graditi"))); // pokretanje zadataka kada se datoteke mijenjaju 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(" image:build")); gulp.watch(path.watch.fonts, gulp.series("fontovi:build")); )); // zadani zadatak gulp.task("default", gulp.series("build", gulp.parallel("webserver","watch")));
Kôd datoteke "gulpfile.js" sadrži komentare. Pomoću njih se objašnjava što ovaj ili onaj fragment uputa izvodi.
Stvaranje zadatka u Gulp-u vrlo je jednostavno:
// kreiranje gulp zadatka (nametask je naziv zadatka) gulp.task("nametask", function() ( // radnje koje zadatak treba izvesti... ));
Zadaci u gutljaju izgrađeni su vrlo jednostavno. Njihov okvir djelovanja u većini slučajeva može se prikazati na sljedeći način:
- dobiti podatke iz izvornih datoteka;
- obraditi neobrađene podatke pomoću gulp dodataka;
- spremite rezultat (datoteke) u direktorij "build".
Ako koristite Gulp 3, tada bi sadržaj datoteke "gulpfile.js" trebao biti sljedeći:
"koristi strog"; /* opcije za gulp-autoprefixer */ var autoprefixerList = [ "Chrome >= 45", "Firefox ESR", "Edge >= 12", "Explorer >= 10", "iOS >= 9", "Safari >= 9", "Android >= 4.4", "Opera >= 30" ]; /* Putovi do izvornih datoteka (src), gotovih datoteka (build) i datoteka za praćenje promjena (watch) */ var path = ( build: ( html: "assets/build/", js: "assets/build/ js/", css: "assets/build/css/", img: "assets/build/img/", fontovi: "assets/build/fonts/" ), src: ( html: "assets /src/*. html", js: "assets/src/js/main.js", stil: "assets/src/style/main.scss", img: "assets/src/img/**/*. *", fontovi: "assets/src/fonts/**/*.*" ), gledajte: ( html: "assets/src/**/*.html", js: "assets/src/js/** /*.js" , css: "assets/src/style/**/*.scss", img: "assets/src/img/**/*.*", fontovi: "assets/srs/fonts/* */*.* " ), čisto: "./assets/build/*" ); /* postavke poslužitelja */ var config = ( server: ( baseDir: "./assets/build" ), notify: false); /* Uključi gulp i dodatke */ var gulp = require("gulp"), // Uključi Gulp web poslužitelj = require("browser-sync"), // Poslužitelj za pokretanje i automatsko ažuriranje stranica vodoinstalater = zahtijeva ("gulp-vodoinstalater) "), // modul za praćenje grešaka rigger = require("gulp-rigger"), // modul za uvoz sadržaja jedne datoteke u drugu sourcemaps = require("gulp-sourcemaps"), // modul za generiranje karte sass izvornih datoteka = require("gulp-sass"), // modul za kompajliranje SASS (SCSS) u CSS autoprefixer = require("gulp-autoprefixer"), // modul za automatsko postavljanje autoprefiksa cleanCSS = require("gulp- clean-css" ), // dodatak za umanjivanje CSS-a uglify = require("gulp-uglify"), // dodatak za umanjivanje JavaScript predmemorije = require("gulp-cache"), // dodatak za predmemoriju imagemin = require(" gulp-imagemin" ), // dodatak za kompresiju PNG, JPEG, GIF i SVG slika jpegrecompress = require("imagemin-jpeg-recompress"), // dodatak za kompresiju jpeg pngquant = require("imagemin-pngquant"), / / dodatak za kompresiju png rimraf = require("gulp-rimraf"), // dodatak za brisanje datoteka i direktorija rename = require("gulp-rename"); /* zadaci */ // pokretanje poslužitelja gulp.task("webserver", function () ( webserver(config); )); // izgraditi html gulp.task("html:build", function () ( return gulp.src(path.src.html) // odabrati sve html datoteke u navedenoj stazi. pipe(vodoinstalater()) // pratiti pogreške . pipe(rigger()) // uvoz privitaka. pipe(gulp.dest(path.build.html)) // upload gotovih datoteka. pipe(webserver.reload(( stream: true ))); // ponovno pokreni poslužitelj ) ) ; // prikupljanje stilova gulp.task("css:build", function () ( return gulp.src(path.src.style) // dobivanje main.scss .pipe(plumber()) // za praćenje grešaka.pipe( sourcemaps.init()) // inicijaliziraj izvornu kartu .pipe(sass()) // scss -> css .pipe(autoprefixer(( // dodaj prefikse preglednicima: autoprefixerList ))) .pipe(gulp.dest(path.build. css)) .pipe(preimenuj(( sufiks: ".min" ))) .pipe(cleanCSS()) // Umanji CSS .pipe(sourcemaps.write(". /")) // pisanje izvorne karte .pipe(gulp.dest(path.build.css)) // učitavanje za izgradnju .pipe(webserver.reload(( stream: true ))); // ponovno pokreni poslužitelj )); / / build js gulp.task("js:build", function () ( return gulp.src(path.src.js) // dohvaćanje datoteke main.js .pipe(plumber()) // za praćenje pogrešaka.pipe ( rigger()) // uvoz svih navedenih datoteka u main.js .pipe(gulp.dest(path.build.js)) .pipe(rename(( sufiks: ".min" ))) .pipe(sourcemaps.init / / stavite gotovu datoteku. pipe(webserver.reload(( stream: true ))); // ponovno pokrenite poslužitelj )); // prijenos fontova gulp.task("fonts:build", function () ( return gulp.src (path. src.fonts) .pipe(gulp.dest(path.build.fonts)); )); // obrada slika gulp.task("image:build", function () ( return gulp.src(path. src.img ) // putanja izvora slike. pipe(cache(imagemin([ // kompresija slike imagemin.gifsicle(( interlaced: true)), jpegrecompress(( progresivno: true, max: 90, min: 80 )), pngquant () , imagemin.svgo(( dodaci: [( removeViewBox: false )] )) ]))) .pipe(gulp.dest(path.build.img)); // upload gotovih datoteka )); // brisanje direktorija za izgradnju gulp.task("clean:build", function () ( return gulp.src(path.clean, ( read: false )) .pipe(rimraf()); )); // brisanje predmemorije gulp.task("cache:clear", function () ( cache.clearAll(); )); // build gulp.task("build", [ "clean:build", "html:build", "css:build", "js:build", "fonts:build", "image:build" ]); // pokretanje zadataka kada se datoteke mijenjaju 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(put .watch.fonts, ["fontovi:build"]); )); // zadani zadatak gulp.task("default", [ "build", "webserver", "watch" ]);
Gentleman's set Front-end programera
Nije tajna da moderan front-end programer mora imati jedan od alata za izgradnju projekta u svom arsenalu, kao što je gutljaj ili Roktati. Grunt je do nekog vremena držao monopol po ovom pitanju, ali je grupa programera koja se odvojila od Grunta odlučila stvoriti vlastiti lagani i brzi upravitelj zadataka Gulp.
U ovom ćemo članku pripremiti početni paket od nule za korištenje u budućim projektima.
Koje tehnologije koristimo
- Softverska platforma: Node.js
- CSS pretprocesor: igla
- Upravitelj zadataka: gutljaj
Zašto frontenderu treba upravitelj zadataka?
Donedavno sam se i sam pitao zašto trebam trošiti vrijeme na postavljanje konfiguracije upravitelja zadataka, ako sam već dobar u rasporedima izgleda, dok nisam počeo koristiti CSS predprocesore.
CSS predprocesori su stvarno zgodni i ubrzavaju stilove pisanja, ali kompajliranje koda napisanog u predprocesoru u regularni CSS nije trivijalan zadatak koji se može riješiti jednim gumbom. Tu nam u pomoć dolazi upravitelj zadataka. Pretvorba koda se ne događa pritiskom na gumb, sve se događa online bez vašeg sudjelovanja (naravno, ako je sve ispravno postavljeno).
Naravno, zadaci upravitelja zadataka daleko nadilaze procese povezane s pretvaranjem pretprocesorskog koda u čisti CSS. Asembler projekta također se bavi minifikacijom, ulančavanjem, provjerom pogrešaka u kodu, sastavljanjem slika u spriteove, optimizacijom slika za web itd. Vi jednostavno kreirate puno logički odvojenih datoteka u svom projektu, koje se zatim prikladno skupljaju u jedan direktorij, već obrađene i spremne za rad u pregledniku. Ali o tome više kasnije, a sada krenimo s pripremom.
Instalacija Node.js
Ako znate kako instalirati node.js na svoj sustav i koristiti ga, slobodno prijeđite na sljedeći naslov.
Želio bih odmah upozoriti da su sve opisane radnje relevantne za MacOS X, ali općenito primjenjivo na druge Unix sustava. Razvoj kroz upravitelj zadataka i naredbeni redak Windows nešto teže i neće biti opisano ovdje. Međutim, ako i dalje koristite Windows i niste ga se spremni odreći, mogu predložiti opciju korištenja virtualnog računala s instaliranim ubuntu, koristim ovu opciju na svom kućnom sustavu, što je općenito prilično zgodno.
Dakle, prva stvar koju moramo učiniti je preuzeti i instalirati paket node.js na naš sustav za rad s čvorom putem konzole. Idemo na službenu stranicu node.js i preuzimamo najnoviju stabilnu verziju za vaš sustav. Jednom instalirana, naredba čvor trebala bi biti dostupna u vašem naredbenom retku. Da biste provjerili radi li vaš čvor, unesite naredbu u naredbeni redak
verzija instaliranog node.js trebala bi se pojaviti kao odgovor. Ako je sve u redu, idemo dalje.
Struktura imenika projekta
U našim projektima koristit ćemo unificiranu verziju strukture:
Razviti - razvojni korijenski direktorij└─početi - imenik projekata├─graditi - građenje sastavljeno od strane upravitelja zadataka├─resurs - sve izvorne datoteke za razvoj (.psd, itd.)├─src - razvojni imenik│├─css - imenik za razvoj stilova││├─slike - sve statične slike││├─spriteovi - slika prikupljena u sprite││├─djelomično - datoteke prilagođenog stila│││├─mixins.style - prilagođeni miksini│││└─stilovi - prilagođeni stilovi││├─dobavljač - druge vanjske stilske datoteke││└─stilovi - glavna tablica stilova│├─fontovi - imenik fontova│├─sl - katalog dinamičkih slika│├─js - JavaScript razvojni imenik││├─_*.js - js bočne datoteke││├─_main.js - glavni običaj js││└─main.js - glavna js datoteka│├─.htaccess - konfiguracija za poslužitelj│├─*.html - datoteke za označavanje stranica│├─stranice.html - datoteka s vezama na sve stranice predloška│├─index.html - indeksna datoteka označavanja stranice│└─uključi - direktorij uključenih markup datoteka│ └─*.html - uključene datoteke za označavanje (header.html, itd.)├─package.json - konfiguracija upravitelja paketa npm├─gulpfile.js - Gulp konfiguracija├─olovka.predložak.brkovi - maska za čitanje spriteova├─OBAVEZA - popis obaveza└─.gitignoriraj - git konfiguracija
Montaža
U konzoli upotrijebite naredbu cd za odlazak u razvojni korijenski direktorij, kreirajte naš direktorij projekta mkdir start i idite na njega.
Postavimo našu strukturu za projekt putem konzole:
mkdir resurs za izgradnju src src/css src/css/slike src/css/sprites src/css/djelomični src/css/dobavljač src/js src/predložak src/predložak/uključi src/img src/fontovi
Kreirajmo početne datoteke u strukturi projekta:
dodir 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
Stvorite package.json
sva skočna pitanja mogu se kliknuti putem Enter, čvor će ih postaviti na zadane vrijednosti ili ispuniti predložena polja.
.gitignorirati
Kažemo git-u koje direktorije treba zanemariti i ne učitati u repozitorij:
/node_modules/ /build/ /resurs/
Direktorij node_modules pojavit će se kasnije nakon instaliranja dodataka i sadržavat će sve dodatke čvora projekta.
src/.htaccess
Postavite dodatnu gzip kompresiju i predmemoriju za poslužitelj:
AddOutputFilterByType DEFLATE tekst/html tekst/običan tekst/xml tekst/css tekst/javascript aplikacija/javascript
src/css/styles.style
Uključi datoteke prilagođenog stila u glavnu datoteku stila:
@import "djelomično/stilovi"
Imajte na umu da za uključivanje .styl datoteka ekstenzija nije navedena, prema semantici Stylus predprocesorskog koda. Za uključivanje stilova u drugu ekstenziju, kao što je .css, potrebna je potonja.
NAPRAVITI
Ova stranica sadrži popis zadataka za razvoj. Više o radu s ovom datotekom možete pročitati na stranici dodatka PlainTasks za Sublime Text.
Ovo dovršava instalaciju strukture.
Instaliranje dodataka s npm upraviteljem paketa
Node.js prema zadanim postavkama uključuje npm upravitelj paketa, koji u svojim spremištima ima mnogo dodataka s kojima moramo raditi.
Instaliranje dodatka Gulp
Prvo morate instalirati Gulp globalno (s -g prekidačem) na našem sustavu
npm instalirajte gulp -g
Morate ovo učiniti jednom, daljnja globalna instalacija nije potrebna.
Sada moramo instalirati Gulp lokalno u direktorij projekta
npm install gulp --save-dev
Ključ --save-dev kaže da će informacije o dodatku (ime u repozitoriju i njegova verzija) biti dodane u konfiguraciju package.json i da će ih zapamtiti za ovaj projekt. Budući da ne pohranjujemo tešku mapu s dodacima node_modules u git, informacije o instaliranim dodacima spremljene u konfiguraciji omogućit će nam da implementiramo sve potrebne dodatke u projektu sa samo jednom naredbom npm i.
Za svaku naredbu postoje kratice, tako da gornju naredbu možemo napisati u kraćem formatu.
Ubuduće ćemo koristiti i skraćeni oblik naredbe.
Stylus dodatak za Gulp
U našim projektima koristimo Stylus predprocesor koji radi odlično i kompajlira se na čvoru.
Instalirati:
npm i gutljaj-stylus -D
CSS dodaci za obradu
Automatski prefiks- automatski umeće prefikse -ms- -o- -moz- -webkit- u potrebna svojstva:
npm i gulp-autoprefixer -D
CSS minifikacija- dodatak minimizira izlaznu CSS datoteku uklanjanjem dodatnih razmaka i kartica iz nje:
npm i gulp-minify-css -D
Dodaci za obradu slika
Kombiniranje slika u spriteove- više ne morate trošiti sate dragocjenog vremena spajajući sve slike u spriteove, a zatim izračunavajući njihove koordinate, ovaj dodatak će automatski učiniti sve to za vas:
npm i gutljaj.spritesmith -D
Dodajte masku za izračunavanje položaja u spriteovima u prethodno stvorenu datoteku stylus.template.mustache:
((#items)) $((name)) = ((px.x)) ((px.y)) ((px.offset_x)) ((px.offset_y)) ((px.width)) (( px.height)) ((px.total_width)) ((px.total_height)) "(((escaped_image)))"; ((/stavke))
Dodajte prilagođene mixine u mixins.styl:
SpriteWidth($sprite) širina $sprite spriteHeight($sprite) visina $sprite spritePosition($sprite) pozicija pozadine $sprite $sprite spriteImage($sprite) url pozadinske slike($sprite) sprite($sprite) ako !match( "hover", selector()) && !match("active", selector()) spriteImage($sprite) spritePosition($sprite) spriteWidth($sprite) spriteHeight($sprite)
Spojite miksine i generiranu datoteku s koordinatama na glavnu stilsku datoteku src/css/styles.styl:
@import "djelomično/sprite" @import "djelomično/miksini"
Imajte na umu da datoteke sprite moraju biti uključene prije prilagođenih stilova @import "partial/styles"
Optimizacija slika za web- dodatak će automatski izrezati sve nepotrebne informacije iz vaših slika i smanjiti ih na optimalnu veličinu, što će u nekim slučajevima smanjiti veličinu slika do 90%:
npm i gulp-imagemin -D
Dodaci za obradu JavaScripta
JS minifikacija- dodatak smanjuje vaš JS kod što je više moguće, smanjujući vrijeme učitavanja:
npm ja gutljaj-uglify -D
JS praćenje grešaka- dodatak će temeljito provjeriti vaš JS kod kako bi identificirao sve nedosljednosti i prikazao ih u konzoli:
npm i jshint gutljaj-jshint -D
Dodaci za obradu HTML-a
Povezane datoteke- dodatak vam omogućuje pohranjivanje statičnih dijelova web stranice, kao što su zaglavlje, podnožje, strana itd., u zasebne datoteke i njihovo uključivanje u bilo koji dio druge datoteke. Nema više potrebe, u slučaju manjih promjena u zaglavlju, mijenjati desetke ili čak stotine html stranica predloška:
npm i gulp-rigger -D
Dodatak je također kompatibilan sa JS.
Uključite prilagođeni JS u glavnu JS datoteku src/js/main.js s konstrukcijom:
//= _main.js
Uključite datoteke header.html i footer.html u index.html
//= uključi/zaglavlje.html//= uključi/podnožje.html
Ostali dodaci
LiveReload- dodatak eliminira potrebu za ponovnim učitavanjem stranice u pregledniku svaki put da biste vidjeli promjene, sada se to događa automatski kada spremite izmijenjenu datoteku:
npm i gulp-connect -D
Sprječavanje rušenja Gulp-a- ponekad se dogodi da se Gulp može srušiti iz načina rada promatranja u slučaju kritičnih grešaka (uglavnom zbog JS-a). Ovaj dodatak pokušava održati Gulp procese pokrenutim kad god je to moguće:
npm i gutljaj-vodoinstalater -D
Preimenovanje datoteka- najčešći rad s nazivima datoteka. Dodatak vam omogućuje da potpuno preimenujete datoteke, promijenite ekstenziju, dodate prefikse i postfikse, na primjer, da dovedete datoteku prikaza style.styl u style.min.css:
npm gutljaj-preimenuj -D
Čistač- ponekad je potrebno potpuno očistiti direktorij za izgradnju, ovdje u pomoć dolazi dodatak:
Izvorna karta- kako bi vaše datoteke ostale čitljive kroz otklanjanje pogrešaka u pregledniku nakon smanjivanja, morate dodati izvornu mapu umanjenim datotekama:
npm i gulp-sourcemaps -D
Napredne značajke sata- dodatak čini sat pametnim, sada ne prepisuje sve datoteke u verziji kada se promijeni samo jedna datoteka, prepisuje određenu izmijenjenu datoteku, što štedi vrijeme i resurse:
npm i gutljaj-gledam -D
Provjerite package.json
Nakon što su svi dodaci instalirani, provjerimo naš package.json. Trebalo bi izgledati otprilike ovako:
( "name": "start", "version": "1.0.0", "description": "Start pack for Front-end development", "author": "Ivan Ivanov", "licence": "MIT", "dependencies": (), "devDependencies": ( "gulp": "najnovije", "gulp-autoprefixer": "najnovije", "gulp-connect": "najnovije", "gulp-imagemin": "najnovije", "jshint": "najnovije", "jshint-stylish": "najnovije", "gulp-jshint": "najnovije", "gulp-minify-css": "najnovije", "gulp-vodoinstalater": "najnovije", "gulp-rename": "najnovije", "gulp-rigger": "najnovije", "gulp-sourcemaps": "najnovije", "gulp-stylus": "najnovije", "gulp-uglify": "najnovije", "gulp-watch": "najnovije", "gulp.spritesmith": "najnovije", "rimraf": "najnovije" ) )
Umjesto najnovije, u vašem će slučaju biti napisane specifične verzije instaliranih dodataka. Jer Budući da gradimo naš početni paket koji će se koristiti u mnogim projektima, također se preporučuje da zamijenite vrijednosti verzije najnovijim kako biste uvijek instalirali ažurne verzije dodataka u projekt.
Direktorij node_modules također bi se trebao pojaviti u mapi projekta, u kojoj su pohranjene sve datoteke dodataka čvora. Svi potrebni dodaci su instalirani, možete prijeći na postavke Gulp config.
Postavljanje gulpfile.js
gulpfile.js- ovo je glavna konfiguracijska datoteka našeg upravitelja zadataka, u njoj ćemo pohraniti sve postavke i naredbe.
Sav Gulpov rad svodi se na zadatak ( Engleski zadatak). Zadatak je zasebna neovisna funkcija s imenom. Svaki zadatak se može zasebno pozvati.
Način kompatibilnosti s modernim standardima
Prvo, na početku datoteke spojit ćemo način kompatibilnosti samo prema modernim standardima:
"koristi strog";
Možete saznati više o ovoj direktivi.
Inicijalizacija dodatka
Dodaci se inicijaliziraju sljedećom konstrukcijom:
var initPlugin = require("naziv-dodatka");
U skladu s ovim dizajnom, inicijaliziramo sve naše dodatke:
Var gulp = require("gulp"), //glavni dodatak gulp stylus = require("gulp-stylus"), //predprocesor stylus prefixer = require("gulp-autoprefixer"), //sređivanje autoprefiksa cssmin = require(" gulp-minify-css"), //css minification uglify = require("gulp-uglify"), //js minification jshint = require("gulp-jshint"), //js error tracking rigger = require("gulp - rigger"), //rad s html i js uključuje imagemin = require("gulp-imagemin"), //minimiziranje slika spritesmith = require("gulp.spritesmith"), //kombiniranje slika u spriteove rimraf = require( "rimraf "), //očisti izvorne karte = zahtijevaj("gulp-sourcemaps"), //izvorne karte preimenuj = zahtijevaj("gulp-preimenuj"), //preimenuj datoteke vodoinstalater = zahtijevaj("gulp-vodoinstalater"), // spoji na stop gulp watch = require("gulp-watch"), //extending watch connect = require("gulp-connect"); //livereload
Konstante puta
Radi praktičnosti, odmah definiramo sve staze i maske:
Var path = ( build: ( //Ovdje ćemo odrediti gdje staviti datoteke spremne nakon izgradnje html: "build/", js: "build/js/", css: "build/css/", img: " build/css/ images/", fontovi: "build/fonts/", htaccess: "build/", contentImg: "build/img/", sprites: "src/css/images/", spritesCss: "src/css /partial/" ), src: ( //Putanje za dobivanje html izvora iz: "src/template/*.html", //Src/template/*.html sintaksa govori Gulp-u da želimo dobiti sve datoteke s . html ekstenzija js: "src/ js/[^_]*.js",//U stilovima i skriptama trebamo samo glavne datoteke jshint: "src/js/*.js", css: "src/css/styles .styl", cssVendor: "src /css/vendor/*.*", //Ako želimo odvojeno pohranjivati datoteke biblioteke, skinite komentar s img retka: "src/css/images/**/*.*", //Sintaksa img/**/*.* znači - uzeti sve datoteke svih ekstenzija iz mape i poddirektorija fontovi: "src/fonts/**/*.*", contentImg: "src/img/**/* .*", sprites: "src/css/ sprites/*.png", htaccess: "src/.htaccess" ), watch: ( //Ovdje određujemo koje datoteke želimo pratiti za promjene html: "src/template /**/*.html", js: "src/js/**/*.js", css: "src/css/**/*.*", img: "src/css/images/** /*.*", contentImg: "src/ img/**/*.*", fontovi: "src/fonts/**/*.*", htaccess: "src/.htaccess", sprites: "src/ css/sprites/*.png" ), clean : "./build", //direktorije koji se mogu obrisati outputDir: "./build" //početni korijenski direktorij za pokretanje miniservera );
Imajte na umu da možemo koristiti maske imena:
- *.js- sve datoteke s ekstenzijom js
- [^_]*.js- sve datoteke s ekstenzijom js, isključujući one koje počinju podvlakom
- *.* - sve datoteke s bilo kojim nastavkom unutar trenutnog direktorija
- /**/*.html- sve datoteke s nastavkom .html unutar trenutnog direktorija i svih podređenih direktorija
zadatak (zadaci)
Sada kada su sve konstante napisane, možete početi pisati zadatke. Svi zadaci imaju sljedeću strukturu:
Gulp.task("taskName", function()( //neke funkcije ));
Mini poslužitelj i LiveReload
Prije svega, postavit ćemo lokalni poslužitelj i LiveReload:
// Lokalni poslužitelj za razvoj gulp.task("connect", function()( connect.server(( //postavljanje konfiguracija poslužitelja root: , //pokretanje poslužitelja korijenski direktorij port: 9999, //koji ćemo port koristiti livereload : true //inicijaliziranje operacije LiveReload )); ));
Najvjerojatnije ćete često morati raditi istovremeno na nekoliko projekata odjednom. Poslužitelj vam omogućuje pokretanje više poslužitelja u isto vrijeme, dovoljno je registrirati svoj port za različite projekte.
Izgradite HTML
// zadatak za html izgradnju gulp.task("html:build", function () ( gulp.src(path.src.html) //Odaberite datoteke iz potrebnog path.pipe(rigger()) //Prođi kroz rigger .pipe(gulp.dest(path.build.html)) //učitajte ih u mapu za izgradnju .pipe(connect.reload()) //i ponovno pokrenite naš poslužitelj za ažuriranja));JS građenje
// provjera js-a za pogreške i njihovo ispisivanje u konzolu gulp.task("jshint:build", function() ( return gulp.src(path.src.jshint) //odaberite datoteke iz potrebnog path.pipe(jshint( )) //pokretanje kroz jshint .pipe(jshint.reporter("jshint-stylish")); //stilski izlaz pogrešaka na konzolu )); // javascript izgradnja gulp.task("js:build", function () ( gulp.src(path.src.js) //Pronađi našu glavnu datoteku.pipe(rigger()) //Prođi kroz rigger .pipe(sourcemaps .init()) //Inicijaliziraj izvornu kartu .pipe(uglify()) //Komprimiraj naš js .pipe(sourcemaps.write()) //Napiši mape.pipe(rename((sufiks: ".min")))) / /dodajte sufiks.min u izlaznu datoteku.pipe(gulp.dest(path.build.js)) //učitajte gotovu datoteku za izgradnju .pipe(connect.reload()) //I ponovno pokrenite poslužitelj ));Sprite građe
Sve slike za sprite dodaju se u direktorij src/css/sprites/ i, nakon prolaska kroz Gulp, postaju jedna slika spritea. Spriteovi ne bi trebali sadržavati logotipe i pozadine bez jasnih dimenzija.
// izgraditi sprite gulp.task("sprites:build", function () ( var spriteData = gulp.src(path.src.sprites) //odaberite gdje želite slike spojiti u sprite.pipe(spritesmith(( imgName) : " sprite.png", //ime slike spritea cssName: "sprite.styl", //ime stila gdje pohranjujemo položaje slike u spriteu imgPath: "images/sprite.png", //staza gdje je sprite leži cssFormat: "stylus", //format u kojem obrađujemo pozicije cssTemplate: "stylus.template.mustache", //datoteka maske cssVarMap: function(sprite) ( sprite.name = "s-" + sprite.name // ime svakog spritea sastojat će se od naziva datoteke i konstrukcija "s-" na početku naziva ) ))); spriteData.img.pipe(gulp.dest(path.build.sprites)); // staza gdje spremamo sliku spriteData.css.pipe(gulp.dest(path .build.spritesCss)); // staza gdje spremamo stilove ));
Da biste prikazali sprite, samo upotrijebite mixin. Na primjer, za datoteku lorem.png odabir iz spritea izgledat će ovako:
Lorem sprite ($s-lorem)
Sada će objekt .lorem uzeti dimenzije slike i samu sliku kao pozadinu.
Izrada statičnih slika
Statičke slike su slike koje se koriste u predlošku izgleda.
// izgraditi statične slike gulp.task("image:build", function () ( gulp.src(path.src.img) //Odaberite naše slike. pipe(imagemin(( //Komprimirajte ih progresivno: true, // compression.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg interlaced: true, //compression.gif optimizationLevel: 3 //razina kompresije od 0 do 7 ))) .pipe(gulp.dest(path. build.img)) //upload za izgradnju .pipe(connect.reload()) //ponovno pokretanje poslužitelja ));
Izgradite dinamične slike
Dinamičke slike su slike sadržaja koje će se mijenjati na stranici i uključene su na razini predloška samo u svrhu demonstracije. Na primjer, to mogu biti slike za vijesti itd.
// izrada dinamičkih slika gulp.task("imagescontent:build", function() ( gulp.src(path.src.contentImg) .pipe(imagemin(( //Komprimiraj ih progresivno: true, //compress.jpg svgoPlugins: [(removeViewBox: false)], //compression.svg interlaced: true, //compression.gif optimizationLevel: 3 //omjer kompresije od 0 do 7 ))) .pipe(gulp.dest(path.build.contentImg)) //istovar za izgradnju .pipe(connect.reload()) //ponovno pokretanje poslužitelja ));
Izgradite CSS
// izgraditi prilagođeni css gulp.task("cssOwn:build", function () ( gulp.src(path.src.css) //Odaberite našu glavnu tablicu stilova. pipe(sourcemaps.init()) //inicijalizirajte soucemap . pipe (stylus(( compress: true, "include css": true ))) //Kompiliraj stylus .pipe(prefixer(( preglednik: ["zadnje 3 verzije", "> 1%", "ie 8", "ie 7 "] ))) //Dodaj prefikse dobavljača.pipe(cssmin()) //Compress.pipe(sourcemaps.write()) //upiši izvornu kartu .pipe(rename((sufiks: ".min")))) / / dodaj sufiks.min u izlaz filename.pipe(gulp.dest(path.build.css)) //istovari za izgradnju .pipe(connect.reload()) //ponovno pokreni poslužitelj ));Zaseban zadatak za vanjske stilove:
// izgradnja dobavljača css gulp.task("cssVendor:build", function () ( gulp.src(path.src.cssVendor) // Dobivanje mape dobavljača .pipe(sourcemaps.init()) //inicijalizacija soucemap-a .pipe( cssmin()) //Compress.pipe(sourcemaps.write()) //upišite izvornu kartu .pipe(gulp.dest(path.build.css)) //upload za izgradnju .pipe(connect.reload() ) // ponovno pokrenite poslužitelj));
Dodajmo i zadatak za opću izgradnju CSS-a:
// izgraditi cijeli css gulp.task("css:build", [ "cssOwn:build", // "cssVendor:build" ]);
Ako želite obraditi vanjske stilove odvojeno od kućnih i učitati ih kao zasebne datoteke, trebate odkomentirati redak "cssVendor:build"
Izrada fonta
// izgraditi fontove gulp.task("fonts:build", function() ( gulp.src(path.src.fonts) .pipe(gulp.dest(path.build.fonts)) //dump to build ));Build.htaccess
// izgraditi htaccess gulp.task("htaccess:build", function() ( gulp.src(path.src.htaccess) .pipe(gulp.dest(path.build.htaccess)) //upload to build ));Opća građa
Kako ne bismo morali graditi svaki dio posebno, napišimo zadatak za opću izgradnju:
// izgraditi sve gulp.task("build", [ "html:build", "jshint:build", "js:build", "sprites:build", "css:build", "fonts:build", " htaccess:build", "image:build", "imagescontent:build" ]);
Čišćenje građevine
Ponekad je potrebno potpuno očistiti direktorij za izgradnju. Ovdje će nam u pomoć doći sljedeći zadatak:
// čista mapa za izgradnju gulp.task("clean", function (cb) ( rimraf(path.clean, cb); ));
Gledajte ili pratite promjene u stvarnom vremenu
Jedna od najvažnijih i najkorisnijih funkcija Gulpa je funkcija promatranja, koja vam omogućuje da u stvarnom vremenu pratite sve promjene proizvedenih datoteka i, ovisno o tome, izvršavate određene radnje:
// gledaj gulp.task("watch", function()( //izgradi html u slučaju promjene watch(, function(event, cb) ( gulp.start("html:build"); )); //izgradi sprites u slučaju promjene watch(, function(event, cb) ( gulp.start("sprites:build"); )); //izgradi kontekstne slike u slučaju promjene watch(, function(event, cb) ( gulp. start(" imagescontent:build"); )); //izgradi css u slučaju promjene watch(, function(event, cb) ( gulp.start("css:build"); )); //provjeri js u slučaju promjene watch(, ["jshint"]); //izgradi js u slučaju promjene watch(, function(event, cb) ( gulp.start("js:build"); )); //izgradi statične slike u slučaj promjene watch(, function (event, cb) ( gulp.start("image:build"); )); //izgradi fontove u slučaju promjene watch(, function(event, cb) ( gulp.start(" fontovi:build"); )) ; //izgradi htaccess u slučaju promjene watch(, function(event, cb) ( gulp.start("htaccess:build"); )); ));
Zadane radnje
Zadane radnje su zadaci koje će upravitelj zadataka izvršiti kada u konzolu unese naredbu gulp:
// zadane akcije gulp.task("default", ["build", "watch", "connect"]);
U našem slučaju, prema zadanim postavkama izgradit ćemo naš projekt, omogućiti način rada za gledanje i pokrenuti poslužitelj.
Naredbe za naredbeni redak
Sve galp naredbe za naredbeni redak sastoje se od dva dijela - same naredbe gulp i naziva zadatka odvojenog razmakom. Ovdje je popis naredbi primjenjivih na našu konfiguraciju:
- gulp - glavna naredba, pokreće zadani zadatak
- gutljaj graditi - graditi sve
- gutljaj gledati - početi gledati
- gulp clean - čisti direktorij za izgradnju
- gulp povezivanje - pokretanje poslužitelja
- gutljaj html:build - HTML build
- gulp jshint:build - provjeri JS za pogreške
- gulp js:build - JS build
- gutljaj sprites:build - sprite build
- gulp image:build - izgradnja statične slike
- gulp imagecontent:build - dinamička izgradnja slike
- gulp cssOwn:build - prilagođena css izgradnja
- gulp cssVendor:build - vanjska CSS izrada
- gulp css:build - opća CSS izrada
- gulp fontovi:build - izrada fonta
- gutljaj htaccess:build - build.htaccess
U ovom trenutku je konfiguracija gulpfile.js dovršena.
Kopirajte početni paket u projekt
Prvo prođimo kroz konzolu u folderu gdje razvijamo, npr. cd development/example i kopiramo sve iz direktorija start paketa u naš projekt cp -a ~/develop/start/. ~/razviti/primjer/
Ova metoda kopiranja je najprikladnija, jer. točno će kopirati sve, uključujući skrivene .gitignore datoteke itd.
Zaključak
Pomoću ovog vodiča pripremili smo početni paket za korištenje Gulp-a u našim projektima za Front-end razvoj.
Ovaj paket je također dostupan na GitHubu.
Postskriptum
Ovaj članak nije konačan i ažurirat će se ovisno o promjenama i poboljšanjima.