Boilerplate

Frontend projektiem, kur nepieciešams veidot tikai HTML daļu ir izveidots speciāls boilerplate, ko vari lejupielādēt šeit. Tā uzdevums ir samazināt izstrādes laiku piedāvājot jau gatavu sākuma projektu, kuru var pielāgot projekta vajadzībām. Tajā iekļauti arī dažādi rīki, kas palīdz izstrādes laikā, kā arī biežām izmantotie moduļi, piemēram cookies consent paziņojums, novecojuša pārlūka paziņojums, utt.

Lai sāktu darbu ar šo boilerplate tev būs nepieciešams uzinstalēt Node.js savā datorā, jo projektā tiek izmantots Node Package Manager. Kad tas ir uzinstalēts, atarhivē boilerplate uz sava datora sev vēlamā vietā.

Šajā boilerplate iekļauti šādi papildus resursi:

  • Bootstrap 3 grid
  • jQuery
  • normalize un reset CSS

Darba uzsākšana

Lai uzsāktu darbu ar šo boilerplate atver sevis izvēlētu komandrindas rīku un dodies uz mapi, kur atrodas šis projekts un palaid komandu "npm install". Piemēram, ja atarhivēji mapē C:\projects\mans-projekts, tad izmantojot Windows Command Prompt raksti:

cd c:\projects\mans-projekts [Enter]
npm install [Enter]

Pēc tam sagaidi, kad tiks sainstalēti visi nepieciešamie moduļi.

Komandas

Darbam ar šo boilerplate tev ir pieejamas 3 komandas, kuras var palaist no tā paša komandrindas rīka un tajā pašā mapē:

  • npm run dev - visi CSS, JS, bilžu un fonta faili, kas atrodas /src mapē tiks apstrādāti un pārcelti uz mapi /dist/assets. HTML faili tiks apstrādāti un pārcelti uz mapi /dist
  • npm run prod - tas pats, kas "npm run dev", tikai CSS un JS faili tiks minificēti. HTML faili tiks apstrādāti un pārcelti uz mapi /dist. Šo komandu izmanto pirms projekta nodošanas
  • npm run watch - tas pats, kas "npm run dev", tikai pēc visa apstrādes skripts turpinās vērot izmaiņas failos, kas atrodas /src mapē un automātiski visu pārnesīs uz /dist/assets, vai /dist ( HTML failiem ) pie katras veiktās izmaiņas. Šo komandu izmanto strādājot pie projekta, lai pie katras veiktās izmaiņas nebūtu jāraksta "npm run dev" komanda

Failu un mapju struktūra

Atarhivējot boilerplate mapē būs jau sagatavota failu un mapju struktūra, kas jāievēro visa projekta laikā.

Mape /dist

Šajā mapē atradīsies visa gala faili, kas paredzēti nodošanai tālāk. Vienīgā vieta, kur mapē /dist liksi iekšā kaut ko manuāli pats ir /uploads.

  • Apakšmape /assets - te atradīsies viss CSS, JS, bildes, kas iekļautas CSS failos un fonti. Šī mape ģenerējas automātiski no failiem, kas atrodas /src mapē, tāpēc šajā mapē neko manuāli iekšā neliec.
  • Apakšmape /uploads - te liksi visas bildes u.c. failus, kas nav daļa no dizaina ( dizaina elementi, fons, utt. ). Te liec piemēram rakstu, vai produktu bildes, PDF dokumentus utt.

Bez šīm 2 mapēm te vēl glabāsies uzģenerētie HTML faili no mapes /src/html, tātad tos arī manuāli šeit neliec.

Mape /src

Šajā mapē atrodas visi izejas faili - lielākā daļa darba notiek šajā mapē ( izņemot mapi /dist/uploads, kur failus liec manuāli ).

  • Apakšmape /css - te atrodas papilds CSS faili, kas tiek iekļauti iekš SASS ( piemēram reset un normalize )
  • Apakšmape /fonts - te atradīsies fontu faili, ja tādi būs nepieciešami
  • Apakšmape /html - te atradīsies tavi veidotie HTML faili. Te atrodas arī apakšmape /partials, kur atrodas dažādas HTML daļas, kuras atkārtojas, piemēram header, footer, breadcrumbs, utt. Par to, kā šīs daļas iekļaut savā HTML lasi tālāk
  • Apakšmape /img - te atradīsies visas bildes, kas iekļautas CSS ( dizaina elementi, fona bildes, utt. )
  • Apakšmape /js - te atrodas tavs rakstītais JS kods, kas pēc tam tiek pārveidots uz JS gala failu /dist/assets/main.js
  • Apakšmape /scss - te atrodas visi SASS faili, kas pēc tam tiek pārveidoti uz CSS gala failu /dist/assets/css/main.css
  • Apakšmape /vendor - te atrodas visi ārējie faili, piemēram JS spraudņi, vai citi faili. Viss, kas atrodas šajā mapē tiek automātiski pārvietots uz /dist/assets/vendor/ mapi

Darbs ar HTML

Darbs ar HTML failiem notiek mapē /src/html. Kā piemēri tur atrodas 2 HTML faili ( index un 404 ), kurus vari pārveidot pēc vajadzības. Papildus ir iekļautas arī pāris HTML daļas, ko var izmantot atkārtoti, kas atrodas /partials mapē, šos visus failus vari izmantot, kā piemērus, vvai pārveidot pēc savām vajadzībām.

Ņem vērā, ka failiem, kas atrodas /partials mapē jāsākas ar apakš svītru, lai tie netiktu pārkopēti uz /dist mapi, jo to mērķis ir tiks iekļautiem galvenajos HTML failos, lai nevajadzētu atkārtoti rakstīt vienu un to pašu kodu vairākās vietās.

Lai iekļautu kādu HTML daļu galvenajā HTML failā izmanto šo funkciju ( iekļauts arī piemēru failos ):

${require('./partials/_header.html')}

Ņem vērā, ka iekļaujamajā daļā nevar iekļaut vēlvienu daļu - tā vietā tiks izvadīts "Undefined".

Lai HTML failus apstrādātu un pārvietotu uz /dist mapi no komandrindas palaid atbilstošu komandu ( komandas aprakstītas šīs lapas augšā ).

Darbs ar assets failiem

Līdzīgi, kā ar HTML, arī darbs ar assets ( CSS, JS, utt. ) notiek /src mapē. Projekts ir sadalīts apakšmapēs, kur tad attiecīgi katrs failu veids atrodas.

JS

Savas JS funkcijas raksti failā /src/js/main.js. Ja gribi savus skriptus sadalīt vairākos failos, lai vieglāk orientēties, vari pievienot papildus failus mapē /src/js un tad iekļaut tos failā /src/index.js līdzīgi, kā tas ir izdarīts ar /src/js/main.js failu. Visi JS faili, kas iekļauti iekš /src/index.js faila tiks apvienoti un bigās izvadīti /dist/assets/main.js failā.

Ja gribi pievienot kādu JS spraudni, vai vienkārši atsevišķu JS failu, kas netiek sakombinēts kopā ar pārējo JS vari to ievietot mapē /src/vendor. Šīs mapes saturs netiks apstrādāts, bet gan vienkārši pārkopēts uz mapi /dist/assets/vendor.

Ņem vērā, ka mapes /src/vendor saturs netiks apstrādāts, tas nozīmē arī to, ka tas netiks minificēts, tāpēc šajā mapē centies likt tikai minificētu kodu, ja tas ir iespējams.

CSS

Viss stilu ( CSS ) rakstīšana notiek /src/scss mapes failos. Par SCSS vari vairāk palasīt šeit. Faili ir sadalīti loģiskās daļās ( site content, header, utt. ), tāpēc centies pie šīs struktūras pieturēties - header un footer stilus raksti _header-footer.scss failā utt. Ja ir nepieciešams un tas ir loģiski, vari pievienot vēl jaunus SCSS failus un iekļaut tos /src/scss/main.scss failā, kā tas ir izdarīts ar pārējiem failiem.

Viss kods, kas atrodas /src/scss mapē un ir iekļauts main.scss failā tiks apstrādāts un pārkopēts uz mapi /dist/assets/css/main.css.

Papildus ir mape /src/css, kurā glabā CSS failus, kuri tiek iekļauti SCSS failā. Boilerplate standartā šajā mapē atrodas normalize.css un reset.css faili, bet, ja ir vajadzība vari šeit pievienot papildus savus CSS failus, pēc tam tos iekļaujot /src/scss/main.scss failā, kā tas ir izdarīts ar abiem iepriekšminētajiem failiem. Šādā veidā šie faili tiks iekļauti gala failā /dist/assets/css/main.css.

Bildes un fonts

Bildes, kas tiek izmantotas CSS ( dizaina elementi, foni, utt. ) glabā mapē /src/img tad SCSS failā to vari izmantot vienkārši ar background-image: url( '../img/bilde.jpg' );. Šīs bildes tiks pārkopētas attiecīgi uz /dist/assets/img mapi. Tieši tā pat jārīkojas ar fontu, ja tāds nepieciešams - saglabā mapē /src/fonts un tad SCSS failā vari referencēt ar ../fonts/font-name.ttf ceļu.