Share
Web Starter Kit este o nouă inițiativă Google; o parte din misiunea lor de a raționaliza fluxul de lucru al dezvoltării web, susținând în același timp cele mai bune practici pe care le sugerează în Bazele Web Google.
La momentul redactării, Kitul Web Starter a fost în jur de câteva zile, lansat ca un repo public pe Github. Acesta a câștigat imediat tracțiunea în cadrul comunității de dezvoltare web, lovind repede punctul de top al depozitelor trending ale Github.
Există o mulțime de biblioteci și cadre în jurul acestor zile, dar Web Starter Kit este destul de interesant și merită explorat. În acest post, vă voi uita prin câteva dintre caracteristicile sale cheie și, de asemenea, demonstrați cum să îl utilizați pentru următorul nou proiect. Fără să mai vorbim, să începem!
După cum sugerează și numele, Web Starter Kit este un set de instrumente de dezvoltare conceput ca un punct de plecare pentru noi proiecte. Google, în depozitul său Github, o descrie ca fiind:
Un punct de plecare pentru dezvoltarea web-urilor cu mai multe dispozitive
După inspecție, puteți observa că Web Starter Kit se inspiră de cele de la HTML5 Boilerplate și Yeoman (combină cele mai bune dintre cele două instrumente populare). Kitul de pornire web este livrat cu șabloane de pornire care sunt optimizate atât pentru viteză, cât și pentru dispozitive multiple.
Lucrăm în mod activ la obținerea celei mai bune scoruri și a ratei cadrelor de tip PageSpeed Insights.
În plus, acesta include și o serie de instrumente pentru a facilita dezvoltarea, inclusiv un instrument de testare sincronizat, reloader live browser, linter JavaScript, compilator Sass, miniatură CSS și un optimizator de imagine. La fel ca în Yeoman, aceste instrumente sunt preconfigurate, astfel încât să putem începe dezvoltarea fără să pierdem timpul configurarea.
Puteți lua fișierele din repo-ul Google și pur și simplu le puteți descărca, însă pentru a putea utiliza în întregime Web Starter Kit pentru noul dvs. proiect, vă recomandăm să instalați următoarele instrumente în sistemul dvs.:
git: după cum sa menționat mai sus, proiectul Web Starter Kit este găzduit pe Github. Veți găsi mai ușor să luați depozitul prin git clone decât să descărcați pachetul Zip. Dacă utilizați aplicația Github, apăsați pe Clona în spațiul de lucru de pe pagina repo:
Nu sunteți sigur despre ce este vorba? verificați Git pentru designeri pe Tuts + Code.
Node.js: multe dintre instrumentele pe care le veți întâlni în Web Starter Kit, cum ar fi JSLinter, sunt construite pe partea de sus a Node.js. Și vor fi instalate prin Node Package Manager (NPM). Puteți consulta Instalarea nodului și NPM pentru asistență suplimentară.
Ruby și Sass: Web Starter Kit utilizează gulp-ruby-sass pentru a compila Sass în CSS, care necesită atât Ruby cât și Sass să funcționeze. Pentru utilizatorii OS X și Linux, veți avea deja instalat Ruby. Utilizatorii Windows; utilizați RubyInstaller pentru a instala Ruby. Odată ce Ruby este instalat, rulați gem instalare sass din linia de comandă pentru a instala Sass.
Pentru mai multe informații despre instalarea Ruby și Sass, aruncați o privire la Mastering Sass: Lecția 1.
Înghiţitură: folosind Gulp pentru a gestiona multe dintre sarcinile necesare în timpul dezvoltării va ajuta cu adevărat. Cu Node.js deja în sistemul dvs., instalați Gulp cu următoarea comandă:
npm instalează -g gulp
În cele din urmă, asigurați-vă git și NPM comenzile sunt accesibile. Introduceți comanda de mai jos pentru a testa dacă git și NPM funcționează.
git --versiune && npm -v
Aceste comenzi ar trebui să răspundă cu git și NPM versiuni, după cum urmează.
Ok, pentru a începe, navigați la directorul în care doriți să aveți proiectul (navigați fie folosind comenzi, fie tastați "cd" apoi trageți folderul ales în fereastra terminalului înainte de a apăsa "enter"), apoi rulați următoarea comandă pentru a clona proiectul Web Starter Kit:
git clone https://github.com/google/web-starter-kit.git
Apoi, schimbați directorul curent în directorul "web-starter-kit" unde se află fișierele Web Starter Kit.
cd web-starter-kit
În acest dosar, web-starter-kit /, tu vei gasi:
Accentsconagua
app /; acesta este dosarul în care se află întregul cod sursă neimminat.package.json; să învețe dependențele.gulpfile.js; care conține configurația pentru a executa sarcina Gulp.
Așa cum am menționat, Web Starter Kit se bazează pe un număr de pachete Node, inclusiv pluginurile Gulp, pentru a executa mai multe procese de construire. Deci, următorul lucru pe care trebuie să-l faceți este să instalați pachetele Node specificate în fișierul "package.json". Faceți acest lucru pur și simplu introducând următoarea comandă:
npm install
O multitudine de pachete Node vor fi apoi instalate într-un folder numit node_modules.
Pe scurt, Gulp, este similar cu Grunt. Ambii sunt "alergatori" care automatizează anumite sarcini în timpul dezvoltării, având drept scop să se ocupe de munca grea pentru dvs. În mod normal, ar trebui să specificăm și să configuram sarcinile Gulp în cadrul unui gulpfile.js, dar din moment ce Web Starter Kit ne-a făcut această slujbă, putem executa imediat sarcinile Gulp fără să atingem nimic.
În timpul procesului de dezvoltare, tastați această comandă de mai jos.
gulp servi
Această comandă va permite BrowserSync care a fost încorporat și configurat îngulpfile.js. BrowserSync este un instrument util, care ne permite să testați site-ul în mod sincronizat în mai multe browsere. Cu ajutorul aplicației BrowserSync, interacțiunea cu utilizatorul, cum ar fi derularea, clicul și completarea intrărilor, se va reflecta în timp real prin toate dispozitivele conectate. Acest lucru ne permite să prindem orice discrepanță care se poate întâmpla în fiecare dispozitiv conectat, deoarece interacțiunea se întâmplă. BrowseSync este, de asemenea, armat cu server HTTP. Când executați această comandă, vi se va da gazdă locală adresa unde puteți accesa site-ul.
În plus, BrowserSync va monitoriza modificările efectuate în cadrul fișierelor specificate, inclusiv codul HTML, foile de stil și imaginile. Când modificăm aceste fișiere, BrowserSync va executa imediat sarcina specificată în gulpfile.js
Ori de câte ori sunteți gata să publicați site-ul dvs., puteți rula pur și simplu înghiţitură. Această comandă va executa toate sarcinile Gulp, va compila proiectul într-un pachet distribuabil într-un folder nou numit dist / care este gata pentru a fi predat clientului.
O listă detaliată a sarcinilor Gulp poate fi găsită la Instrumentele Rezumat ale Instrumentului Web Starter Kit.
Web Starter Kit oferă un ghid de stil, care pornește stilul de bază al elementelor și componentelor comune, cum ar fi tipografia, butoanele, link-urile, pesmeturile, tabelele, pictogramele și grila. Privind prin sursă, veți găsi și selectorii utilizați pentru a produce stilurile.
Ghidul de stil poate fi găsit în app / styleguide și este interconectat cu foile de stil, pentru a vedea că Ghidul de stil evoluează în timp ce foaia de stil este actualizată. Sclipitor!
Stilul de bază al pictogramelor recomandate în Ghidul de stil Web pentru Starter KitNotă: Asigurați-vă că verificați seria noastră Ghidul stilului All About Style.
Foarte bine! Am descărcat și setat Kitul Web Starter împreună cu dependențele sale, astfel încât acum ar trebui să puteți lucra la proiectul dvs..
În întregime, Web Starter Kit este destul de solid - chiar și în versiunea beta actuală. Șablonul și instrumentele sunt bine configurate; ei lucrează din cutie. Și văzând că acest proiect este susținut de Google cu dezvoltatori briliți în spatele lui, Web Starter Kit ar putea deveni rapid atât de popular ca Bootstrap sau Foundation. Aștept cu nerăbdare să văd cum va evolua acest proiect în viitor.
