Share
Un lucru este sigur: ori sigur s-au schimbat. Nu cu mult timp în urmă, dezvoltarea front-end, deși nu era simplă, era ușor de gestionat. Aflați HTML, un pic de CSS și sunteți pe drum. Aceste zile, cu toate acestea, pentru lipsa de cuvinte mai bune, există mult mai multe variabile pentru a jongla.
Procesoarele, tuning-ul de performanță, testarea, optimizarea imaginii și minificarea reprezintă doar câțiva dintre factorii-cheie pe care trebuie să le țină cont dezvoltatorul modern de zi cu zi.
De exemplu, deși este ușor de utilizat, CSS cu siguranță nu scade bine. Și, în timp ce este puternic, JavaScript poate fi uneori un limbaj urât și dificil de utilizat. Apoi este aspectul performanței; nu mai suntem doar proiectarea pentru Internet Explorer și Firefox. Nu, în aceste zile, avem o multitudine de browsere, dispozitive, rezoluții și viteze de conectare care trebuie luate în considerare la elaborarea de noi aplicații.
A spune că a noastră este o industrie incredibil de dură ar fi subestimarea secolului.
Progresul este că, pentru fiecare bloc de drumuri, soluțiile au fost cu siguranță furnizate.
Progresul este că, pentru fiecare bloc de drumuri, soluțiile au fost cu siguranță furnizate de membrii comunității. Luați în considerare problema scalării CSS; bine, preprocesoarele, cum ar fi Sass, Less și Stylus, au fost introduse pentru a ne ușura drastic viața. Ce se intampla cu problema de prefixare a browserului CSS3? Compasul are grijă de asta! Și dilema JavaScript? Încă o dată, CoffeeScript și, acum, TypeScript la salvare! Singura problemă este că fiecare soluție nouă necesită propriul sistem și proces. Așa cum s-ar putea aștepta, în timp, acest lucru vă poate complica semnificativ fluxul de lucru. Acum, avem mai multe tab-uri Terminal deschise, fiecare monitorizând un subset de fișiere din cadrul proiectelor noastre, ascultând pentru schimbări. Și asta e doar vârful aisbergului. Nu am atins încă fluxul de lucru, codarea celor mai bune practici, optimizarea imaginilor, testarea și dezvoltarea unui proces de construire automată. Chiar și scrierea despre toți acești pași îmi scurtează respirația! Nu ar fi fantastic dacă cineva a încheiat toate aceste preprocesoare și cele mai bune practici într-un pachet ușor de folosit?
Creat de unii dintre prietenii prietenoși de la Google (inclusiv Paul Irish și Addy Osmani), Yeoman este soluția pentru problemele dvs. După cum o pune echipa de bază, Yeoman oferă un flux de lucru încrezător pentru a vă ajuta să vă desfășurați cu noi proiecte cât mai repede posibil. Dar ce înseamnă cu adevărat acest lucru? Oferă posibilitatea de a construi noi proiecte, precum și cadrele și instrumentele necesare. Ceea ce se traduce, în esență, este configurația mai puțin obositoare și mai multă creație.
Pentru a începe cu Yeoman, trebuie mai întâi să îl instalăm din linia de comandă. Rulați următoarea comandă:
curl -L get.yeoman.io | bash
Acest script va efectua o varietate de lucruri, inclusiv instalarea bibliotecilor necesare pentru Yeoman pentru a-și face treaba. Veți găsi probabil că este nevoie de câțiva pași din partea dvs., dar nu vă faceți griji; vă va spune exact ce trebuie făcut!
După finalizarea instalării, executați răzeș pentru a vedea ce este disponibil. Veți găsi o varietate de opțiuni, cum ar fi init, pentru inițializarea unui nou proiect, construi, pentru crearea unui mod special, optimizat dist dosar pentru desfășurare, și instalare, ceea ce face procesul de gestionare a pachetelor cât mai ușor posibil.
Pentru a afla mai multe despre ceea ce fac fiecare opțiune, adăugați
--Ajutorla comanda:yeoman init - ajutor.
Să creăm un nou proiect cu Yeoman. Creați un nou director pe desktop, CD la Terminal și rulați:
yeoman init
În acest moment, veți primi câteva întrebări.
Aceste întrebări vă oferă posibilitatea de a vă configura noul proiect direct din cutie. Pentru moment, alegeți "Nu" la fiecare întrebare.
Dacă preferați să ocoliți aceste întrebări în viitor, rulați-vă
yeoman init rapid. Aceasta va pregăti o nouă aplicație, în care sunt coapte Modernizr, jQuery și HTML5 Boilerplate.
Cu singura comandă singură, Yeoman face instantaneu un nou proiect pentru tine. Nu fiți copleșiți de toate aceste fișiere; dacă nu au fost generate pentru dvs., le-ați crea în cele din urmă manual. Gândește-te la Yeoman ca robot de ajutor, care face toată munca manuală pentru tine.
"Salut omule; du-te la mine jQuery și Modernizr! "
Acum, că avem un nou proiect, să lansăm un server de previzualizare și să începem să monitorizăm aplicația pentru modificări.
server server
Imediat, Google Chrome va fi lansat, afișând proiectul dvs. (de asemenea, nu mai există erori de securitate). Ei bine, asta e la îndemână, dar, așa cum veți găsi rapid, sunt multe, mult mai multe pentru a vedea. Plasați browserul și editorul în paralel și încercați următoarele lucruri:
Schimba h1 eticheta și urmăriți-o actualizată instantaneu în browser, fără o reîmprospătare. Yeoman la serviciul tău! Acest lucru este realizat prin extensia LiveReload Google Chrome, dar dacă nu este instalat, va fi utilizat un proces de reîncărcare.
Schimbare main.css la main.sass (sau main.scss, dacă aceasta este preferința dvs.) și bucurați-vă de compilarea și actualizarea instantanee în browser. Pentru a le testa, încercați să creați și să utilizați o variabilă.
// main.sass $ textColor: # 666 culoarea caroseriei: $ textColor
Frumos! Este necesară o configurare zero. Acum puteți separa foile de stil, după cum este necesar, și le puteți importa main.sass.
// main.sass @import 'grid' @import 'butoane' @import 'modul'
De fiecare dată când un fișier este salvat, Yeoman va re-compila automat Sass-ul dvs. în CSS obișnuit și va reîmprospăta browser-ul.
Dacă sunteți un fan Sass, atunci este probabil că preferați și cadrul excelent al Compass. Fără griji; Yeoman este fericit să oblige. Suportul pentru compas este deja disponibil; pur și simplu importați modulele aplicabile și continuați ca de obicei.
// main.sass @import 'compass / css' * + dimensiunea casetei (border-box) .box width: 200px + tranziție (lățime 1s) &: hover width: 400px
Dacă nu sunteți încă un convertor preprocesor, trebuie să recunoașteți: aceasta este semnificativ mai bună decât alternativa:
* -webkit-box-size: box-border; -moz-box-size: caseta de margine; box-size: caseta de margine; .box width: 200px; -webkit-transition: width 1s; -moz-tranziție: lățimea 1s; -ms-tranziție: lățimea 1s; -o-tranziție: lățimea 1s; tranziție: lățimea 1s; .box: hover width: 400px;
JavaScript este bine și dandy, dar unii cred că CoffeeScript oferă o sintaxă mult mai curată care umple multe dintre lacunele din limbaj (cel puțin vizual).
În cadrul script-uri / , creați opțional un folder nou, cafea/, și adăugați primul fișier CoffeeScript: person.coffee.
# scripturi / cafea / person.coffee clasa Person
Salvați fișierul și, ca și magia, Yeoman îl compilează imediat în JavaScript de vanilie și plasează noul fișier direct în părinte script-uri / director. Convinge-te singur:
// scripts / person.js var Persoana; Persoana = (funcția () funcția Persoană () returnează Persoana;) ();
Perfect și, mai important, fără efort!
Dacă trebuie să modificați în orice mod structura directorului, consultați secțiunea
gruntfile.jsfișier în cadrul aplicației dvs. În spatele scenei, instrumentul Grunt al lui Ben Alman este ceea ce configurează compilația.
Numai în acest moment, Yeoman ne-a oferit o mare flexibilitate. Cu acel single yeoman init comanda, puteți să vă stilizați acum site-urile cu Sass, să codificați în CoffeeScript și, pe măsură ce faceți modificări, să vedeți instantaneu actualizările reflectate în browser. Dar nu am terminat încă! Nici măcar pe aproape.
Yeoman utilizează un manager puternic de pachete pentru web, numit Bower. Ce este un manager de pachete? Dacă descărcați manual, de exemplu, biblioteca Underscore de la underscorejs.org, atunci faceți greșit. Ce se întâmplă când biblioteca este actualizată câteva luni mai târziu? Veți reîncarca manual biblioteca din nou? Timpul inseamna bani; așa că Yeoman să facă lucrul pentru tine.
Să lăsăm Underscore în proiectul nostru.
yeoman instala underscore
Yeoman va răspunde la această comandă prin descărcarea ultimei versiuni a bibliotecii și plasarea acesteia într-o nouă furnizor director. Acum, este gata să fie folosit!
Dar dacă nu suntem siguri care este numele activului pe care îl solicităm? În aceste situații, ne putem referi la căutare geană. Fără să transmită niciun argument, Yeoman va returna o listă a tuturor activelor disponibile pentru instalare. Să căutăm popularul normalize.css proiect, de Nicolas Gallagher.
Rețineți: Bower nu este exclusiv pentru active JavaScript.
Căutare geană normalizează
La momentul acestei scrieri, ar trebui returnate două proiecte:
Arată ca normaliza-css este cea pe care o dorim.
yeoman instala normalize-css
Acum, importați-o în același mod pe care l-ați avea în mod normal:
Alternativ, redenumiți fișierul la normalize.scss, și să le importați în dvs. main.sass fişier.
// main.sass @import '... / scripts / vendor / normalize-css / normalize'
Există o varietate de alte comenzi specifice Bower pe care veți dori să le rețineți:
Accentsconagua
yeoman dezinstala jquery - Dezinstalați un pachet.yeoman update jquery - Actualizați biblioteca la cea mai recentă versiune.Listă de listă - Afișează toate pachetele instalate în prezent.Dacă testarea nu face încă parte din fluxul de lucru, ar trebui să fie! Ce ar putea fi mai bine decât un robot care vă verifică automat munca după fiecare salvare? Din fericire, Yeoman face incredibil de ușor să vă testeze aplicațiile. În afara casetei, sunt disponibile cadrele populare Mocha și PhantomJS (Webkit fără cap), deși este ușor de configurat, dacă preferați un instrument diferit, cum ar fi Jasmine. În plus, oferă biblioteca de afirmare Chai, pe care o veți îndrăgi rapid.
Deschide Teste / index.html fişier. În partea de jos, veți vedea câteva teste de probă furnizate. Mergeți mai departe și ștergeți-le și creați un nou fișier de testare: spec / person.js. Iată un test pentru a începe.
// test / spec / person.js descrie ('A Person', function () it (ar trebui să aibă o vârstă peste 0 ', funcția () var person = new Numele persoanei:' Jeffrey ' (person.age) .to.be.above (0););); Dacă preferați să utilizați Chai (o bibliotecă de afirmații) ar trebui să interfață, reveniți la index.html, și schimbare așteptați = chai.expect la ar trebui să = chai.should (). Acum, puteți să vă actualizați spec., Astfel încât să scrie:
person.age.should.be.above (0);
Ce metodă alegeți depinde în întregime de dvs. Nu există o alegere corectă; doar preferințele.
Pentru a executa acest test, reveniți la Terminal și introduceți:
testul testului
Așa cum era de așteptat, testul ar trebui să nu reușească cu mesajul: "Nu se poate găsi variabila: Person."Este un test nereușit, dar, mai important, funcționează - testează! Deoarece Yeoman folosește instrumentul excelent PhantomJS (Webkit fără cap), aceste teste pot fi executate chiar fără browser.
Dacă preferați să vă scrieți testele în CoffeeScript, va trebui să faceți o pereche de trucuri pentru dvs. gruntfile.js. Începeți prin adăugarea unui nou compila obiecte față de busolă sarcină. În acest obiect, specificați fișierele care trebuie urmărite. În acest caz, instruim Grunt să compileze toate fișierele CoffeeScript înăuntru testare / spec / cafea.
// cafea pentru a compila JS cafea: dist: src: 'app / scripts / ** / * coffee', dest: 'app / scripts', compilați: files: "test / spec / test / spec / cafea / cafea "
Ultimul pas este să-i spuneți lui Grunt să păstreze un ochi pe acel director. Când un fișier este salvat, acesta trebuie recompilat, în consecință.
Găsi ceas sarcină și actualizați cafea obiect, cum ar fi:
# Tweet.text 