Share
Până acum ați învățat cum să utilizați linia de comandă pentru gestionarea pachetelor de la terți, alimentând codul frontal, automatizarea cu alergători de sarcină, reîncărcarea live și sincronizarea browser-ului.
În acest tutorial final al seriei veți învăța cum să utilizați linia de comandă pentru a vă lansa proiectele la un început de execuție, schemând noi proiecte care au toate codurile de terță parte pe care le solicită, precum și gestionarea sarcinilor Grunt sau Gulp deja configurate , în doar câteva momente.
Există peste o mie de tipuri diferite de proiecte pe care le puteți construi în prezent folosind linia de comandă, dar în acest tutorial vom trece prin patru dintre ele pentru proiecte bazate pe:
Fundația are propriul CLI (interfață de linie de comandă), care este excelentă pentru schelele din cadrul proiectelor de fundație. Hai să vedem cum să folosești fundația CLI pentru a crea un proiect care utilizează Compass.
Prima parte a schelei pentru un nou proiect al Fundației este de a instala CLI-ul necesar. Înainte de a face acest lucru, va trebui să vă asigurați că aveți cinci condiții prealabile instalate pe sistemul dvs.:
Am acoperit instalarea NodeJS, Git și Bower în Taming 3rd Party Packages, instalarea lui Ruby a fost acoperită în Powering Up Front End Code, iar instalarea de grunt-cli a fost acoperită în Automation with Task Runners.
După ce ați asigurat că ați instalat Ruby, va trebui să instalați bijuteriile Compass și Bundler cu următoarele comenzi:
gem instala busola
gem instalează pachetul
Acum, puteți continua și instalați CLI Foundation cu această comandă:
gem instala fundație
Acum, ori de câte ori doriți să începeți un nou proiect al Fundației, deschideți un terminal unde doriți să îl creați și să executați comanda
fundație new project_name
Apoi, veți vedea structura noului dvs. director de proiect generat, cum ar fi:
De aici, va trebui să aveți un terminal în interiorul dosarului actual al proiectului, de ex. în interiorul "project_name".
Bijuteria "bundler" pe care ați instalat-o mai devreme va fi utilizată aici pentru a vă asigura că toate bibliotecile necesare au fost instalate. Obțineți tot ceea ce trebuie să faceți, executați comanda:
pachet
Trebuie să faceți acest lucru o singură dată când creați pentru prima dată proiectele Fundației Compass.
În browser, noul dvs. proiect va arăta astfel:
Sunteți gata să începeți dezvoltarea pe proiectul dvs. Există un compilator Sass încorporat care va viziona fișierele ".scss" din bibliotecă pentru modificări, apoi recompilați-le la css pentru tine. Activați-l cu comanda:
bundle ceas compass exec
Yeoman este un instrument creat în mod expres pentru schele de noi proiecte. Funcționează în partea de sus a NodeJS, integrează Bower pentru gestionarea pachetelor și utilizează Grunt sau Gulp pentru executarea sarcinilor.
După instalarea Yeoman, procesul de bază pentru schele se face prin:
Accentsconagua
yo pentru a genera un nou proiect, de ex. yo h5bp Citiți mai multe despre Yeoman la: http://yeoman.io/
Pentru a utiliza Yeoman, va trebui să aveți instalat la nivel mondial, pe care ar trebui să-l aveți în acest moment atâta timp cât ați urmat toate tutorialele din seria de până acum.
Instalați Yeoman la nivel global cu comanda:
npm instalare -g yo
Acum sunteți gata să mergeți și să găsiți generatoare și proiecte noi.
Pentru a construi un proiect Bootstrap, vom folosi generatorul-gulp-bootstrap. Printre altele, acest generator vă pune la dispoziție cadrul Bootstrap, jQuery & Modernizr, BrowserSync, compilația automată Sass prin LibSass, lustruirea automată JS și optimizarea imaginii.
Instalați generatorul global cu:
[sudo] npm instalați -g generator-gulp-bootstrap
Punctați terminalul oriunde v-ați dori să faceți un nou proiect și rulați:
yo gulp-bootstrap
Veți obține un mic afișaj de genul acesta în terminalul dvs. și veți putea verifica dacă doriți să utilizați Bootstrap și Modernizr:
După ce generatorul se termină, veți avea o structură de foldere precum:
Pentru a construi proiectul, folosiți comanda:
înghiţitură
Pentru a transforma o previzualizare locală cu o compilare automată și o reîncărcare:
ceas de gulp
Într-un browser, noul dvs. proiect Bootstrap va arăta astfel:
Pentru a proiecta un nou proiect HTML5 Boilerplate, vom folosi generatorul h5bp.
Instalați generatorul global cu:
[sudo] npm instala generatorul-h5bp -g
Decupați noul proiect cu următoarea comandă:
yo h5bp
Veți avea opțiunea de a alege dacă doriți sau nu documente incluse în proiect, atunci generatorul va rula.
Veți avea apoi un nou proiect HTML5 Boilerplate structurat astfel:
Într-un browser, tot ce veți vedea este un simplu mesaj "Hello world!", Dar dacă vedeți codul veți vedea că aveți tot ce aveți nevoie pentru a vă lansa site-ul HTML5:
Web Starter Kit este un proiect al companiei Google, proiectat ca "boilerplate & tooling for multi-device development". Puteți citi totul despre caracteristicile sale la: https://developers.google.com/web/starter-kit/
Pentru a le scana, vom folosi generatorul mobil.
Instalați generatorul global cu:
[sudo] npm instalați yeoman / generator-mobile -g
Proiectați-vă proiectul GWSK cu comanda:
yo mobile
În terminalul dvs. veți răspunde la o serie de întrebări pe baza cărora proiectul dvs. va fi generat:
Când generatorul a terminat de funcționat, noul dvs. proiect va avea următoarea structură:
Pentru a deschide o previzualizare localhost powered by BrowserSync, executați această comandă:
gulp servi
Previzualizarea site-ului dvs. va arăta astfel:
Notă: După rularea comenzii de servire a gulpului, este posibil să vedeți un mesaj de eroare prin care s-ar putea să nu se găsească sincronizarea browser-ului. Dacă da, instalați-l manual în dosarul dvs. cu următoarea comandă:
[sudo] npm instala browser-sync
Pentru a construi întregul proiect rulați această comandă:
înghiţitură
Pentru a obține feedback despre viteza proiectului:
gulp pagespeed
Această comandă vă va oferi o citire a datelor "pagespeed" în terminalul dvs., astfel:
Și dacă ați ales una dintre opțiunile de găzduire în timp ce vă schemați proiectul, publicați site-ul cu:
gulp desfășura
Asta e doar despre acest tutorial - acum aveți un număr de instrumente la sfaturile degetului dvs. pentru a te ridica și a alerga cu câteva cadre comune front-end, toate prin puterea liniei de comandă!
