Share
Ca designer de web există trei limbi pe care le poți garanta că funcționează într-un fel sau altul: CSS, HTML și JavaScript. În acest tutorial, veți utiliza linia de comandă pentru a face dezvoltarea dvs. cu aceste trei limbi mai puternică și mai eficientă.
Veți învăța cum să utilizați linia de comandă pentru a:
Notă: acest tutorial presupune că ați terminat deja tutorialele anterioare din această serie. Dacă nu ați făcut acest lucru, veți fi de ajutor să vă întoarceți și să o urmați înainte de a continua.
Dacă nu ați lucrat niciodată cu preprocesoarele CSS înainte de a renunța la totul imediat și încercați unul. Odată ce găsiți un preprocesor care vă place acest stil de codare, probabil că nu veți mai codifica din nou CSS brut.
Cele trei preprocesoare care sunt în general considerate a fi cele de a alege sunt Stylus, Sass / SCSS și LESS. Tuts + are o gamă minunată de tutoriale și cursuri care vă ajută să învățați cum să scrieți în sintaxa tuturor celor trei preprocesoare.
În acest tutorial ne vom referi la modul în care puteți utiliza linia de comandă pentru a compila codul pentru fiecare dintre cele trei.
Fiecare utilizator preprocesor are un favorit, iar al meu este Stylus. Folosește o sintaxă minimă care poate fi scrisă foarte rapid, are o funcționalitate foarte puternică și este susținută de mari biblioteci terțe părți precum Jeet și Kouto-Swiss.
Puteți citi totul despre Stylus la: http://stylus-lang.com/
Pentru a instala Stylus la nivel global, permițându-vă să-l utilizați pentru a compila fișierele ".styl" oriunde, executați această comandă:
[sudo] npm instalează stiloul -g
Cea mai ușoară modalitate de a compila cu Stylus este de a folosi această comandă de o singură linie:
stylus < example.styl > example.css
Această comandă va compila "example.styl" în "example.css" în același director.
Pentru ao desface stylus pentru a porni comanda. Apoi folosim a < example.styl pentru a indica fișierul de intrare Stylus, urmat de > example.css pentru a denumi numele fișierului CSS pe care dorim să-l creăm.
Aveți, de asemenea, opțiunea de a adăuga drapele suplimentare la această comandă, cum ar fi utilizarea --comprima steag pentru a elimina spațiul alb din fișierul CSS rezultat:
stylus -compress < example.styl > example.css
Ca alternativă la compilarea unui fișier la un moment dat, puteți compila toate fișierele Stylus într-un singur director în fișiere CSS dintr-un alt director. Pentru a face acest lucru, după stylus comanda, specificați folderul sursă, apoi utilizați --afară urmat de dosarul destinație.
De exemplu, pentru a compila toate fișierele Stylus dintr-un folder numit "source_files" în "assets / css" utilizați:
stylus source_files - out assets / css
Notă: dosarul în care compilați trebuie să existe deja înainte de a executa comanda, deoarece va eșua dacă nu poate găsi folderul specificat pentru a emite fișiere CSS în.
Există câteva alte opțiuni pe care le puteți utiliza atunci când utilizați Stylus prin linia de comandă. Pentru a citi totul despre acestea vizitați: http://stylus-lang.com/docs/executable.html
Sass este foarte probabil cel mai popular preprocesor în acest moment. Este incredibil de puternic în ceea ce puteți obține cu ea și are o comunitate foarte mare și activă. Este susținută de biblioteci cunoscute de terțe părți precum Compass, Bourbon și Susy.
Citiți mai multe despre Sass la: http://sass-lang.com/
Aveți două opțiuni atunci când este vorba despre compilarea Sass pe mașina dvs.: fie puteți folosi Ruby pentru al gestiona, fie puteți utiliza LibSass.
Sass a fost creat pentru prima dată pentru a rula pe Ruby și, ca atare, dacă doriți o completă și o susținere completă de 100%, este opțiunea pe care ați dori să o alegeți. De exemplu, dacă doriți să utilizați Compass, cea mai ușoară cale este să rămâneți la compilarea Ruby.
LibSass a fost creat ca o alternativă și una dintre opțiunile pe care le pune la dispoziție este compilarea sass printr-un pachet npm în schimb. Această abordare compilează mult mai rapid, generând un timp de compilare de aproximativ 5 secunde prin Ruby până la o jumătate de secundă prin LibSass. Cu toate acestea, puteți găsi anumite funcții și codul terță parte nu este suportat.
Ceea ce alegeți este complet în favoarea preferințelor personale, dar, ca regulă generală, aș sugera să merg cu LibSass pentru viteză, cu excepția cazului în care există ceva specific (cum ar fi Compass) pentru care aveți nevoie de compilație Ruby.
Indiferent de alegerea dvs., vom acoperi folosirea ambelor, astfel încât să fiți în toate cazurile.
Pentru a compila Sass via Ruby, va trebui mai întâi să ai Ruby instalat pe mașină.
Dacă sunteți pe Mac, aveți noroc ca Ruby vine deja preinstalat, deci nu trebuie să faceți nimic.
Dacă sunteți pe Windows, mergeți la http://rubyinstaller.org/ apoi descărcați și rulați programul de instalare pe care îl găsiți acolo. Apoi, instalați Sass executând această comandă:
[sudo] gem instalează sass
Sass ar trebui să fie descărcat și instalat automat pentru dvs. Pentru a verifica dacă instalarea a avut succes, executați comanda:
sass -v
Ar trebui să vedeți numărul de versiune și numele instalării dvs. Sass afișate în terminalul dvs.:
Pentru a compila un fișier folosind Ruby sass doar tastați Sass, urmată de numele fișierului de intrare, un spațiu, apoi numele pe care doriți ca fișierul dvs. CSS compilat să aibă:
sass source_file.scss compiled_file.css
Ruby Sass are, de asemenea, o funcție de "watch" încorporată (vom acoperi mai mult vizionarea mai târziu), care vă va urmări fișierele pentru modificări și le recompila automat de fiecare dată când sunt salvate.
Pentru ao folosi, adăugați --ceas semn de la comanda dvs., apoi separați numele sursei dvs. și fișierul compilat cu un colon în loc de un spațiu:
sass - vedeți source_file.scss: compiled_file.css
De asemenea, puteți specifica întregi directoare pentru a viziona și a le trimite în loc de fișiere unice, cum ar fi:
sass - vedeți sursa / sass: active / css
După ce ați vizionat programul, ar trebui să vedeți ceva de genul acesta în terminalul dvs.:
Pentru a citi despre toate opțiunile disponibile prin linia de comandă cu Ruby Sass rulați:
sass --help
În terminalul dvs. va fi afișată o citire a documentelor liniei de comandă:
Puteți folosi asta --Ajutor pentru a obține mai multe informații despre orice comandă pe care o utilizați. Doar tastați numele comenzii urmate --Ajutor și veți obține informații similare celor de mai sus în fiecare caz.
Dacă mergeți cu LibSass, puteți începe cu aceeași metodă pe care ați folosit-o pentru a instala pachetele npm mai devreme în această serie de tutori.
LibSass în sine este scris în C / C ++, dar există diverse implementări ale acestuia, inclusiv unele făcute pentru a lucra cu Node.js. În cazul nostru vom folosi nodul-pachet de pachete.
Pentru a instala node-sass global, rulați această comandă:
[sudo] npm instala nodul-sass -g
Pentru a compila un tip de fișier nod-Sass urmată de numele fișierului de intrare și de numele pe care doriți ca fișierul dvs. CSS compilat să aibă:
nodul-sass source_file.scss compiled_file.css
Pentru a controla directorul în care este compilat fișierul CSS, adăugați --producție semn și director de destinație între numele fișierelor de intrare și de ieșire:
node-sass source_file.scss - activele de ieșire / css compiled_file.css
Ca și Ruby Sass, node-sass utilizează de asemenea --ceas steag pentru a permite compilarea automată a fișierelor dvs. la schimbare:
node-sass - vizionează source_file.scss compiled_file.scss
De asemenea, puteți specifica întregi directoare pentru a viziona și pentru a le trimite în loc de fișiere unice:
node-sass - sursă / sursă de vizionare / * - ieșire active / css
Când utilizați node-sass pentru a viziona un întreg director, asigurați-vă că includeți / * la sfârșitul pentru a specifica doriți să toate fișierele din interiorul.
Când aveți un proces "ceas", puteți să îl opriți prin:
Preprocesorul LESS este, de asemenea, foarte popular și este probabil cel mai bine cunoscut pentru angajarea sa în cadrul de bootstrap Twitter. Mai putin este un prim preprocesor mare pentru a incepe sa lucrezi, deoarece este foarte asemanator cu scrierea in CSS drept.
Citiți mai multe despre LESS la: http://lesscss.org/
Pentru a instala mai puțin la nivel global, permițându-vă să-l utilizați pentru a compila fișiere ".less" oriunde, executați această comandă:
[sudo] npm instalează mai puțin -g
Deschideți un terminal din dosarul care conține fișierul LESS pe care doriți să îl compilați și să îl utilizați lessc urmată de numele dosarului, a > simbol, apoi numele pe care doriți ca fișierul dvs. CSS compilat să aibă:
lessc source_file.less> compiled_file.css
Autoprefixer este un pachet npm care verifică cu CanIUse.com să obțină informații actualizate despre proprietățile CSS care au nevoie de prefixele furnizorilor și care nu au. Apoi, acesta gestionează automat adăugarea prefixelor furnizate necesare în codul dvs..
Acesta poate fi incredibil pentru că, cu excepția cazului în care monitorizați actualizările browserului în mod constant, vă puteți găsi ușor, inclusiv prefixele de browser pe care nu mai aveți nevoie. De asemenea, înseamnă că puteți să vă scrieți toate CSS-urile fără a trebui să vă gândiți la prefixe și să lăsați Autoprefixer să aibă grijă de ele.
De exemplu, autoprefixer va transforma acest cod:
a display: flex;
... în acest sens:
a display: -webkit-box; afișare: -webkit-flex; afișare: -ms-flexbox; afișaj: flex;
Citiți mai multe despre Autoprefixer la: https://www.npmjs.com/package/autoprefixer
Instalați Autoprefixer la nivel global cu:
[sudo] npm instala autoprefixer -g
Pentru a autoprefixa un fișier CSS, utilizați următoarea comandă:
autoprefixer style.css
Spre deosebire de compilarea unui fișier preprocesor, acesta nu va crea un fișier secundar în mod implicit. Fișierul pe care îl vizați va fi actualizat, cu prefixele corecte adăugate direct.
daca tu do doriți ca Autoprefixer să genereze un al doilea fișier separat --producție urmat de un nume pentru fișierul dvs. css prefixat:
autoprefixer unprefixed.css - ieșire prefixed.css
Întotdeauna doriți ca CSS pe care le desfășurați pe site-urile dvs. să fie crăpate până la cea mai mică dimensiune posibilă. Pentru a realiza acest lucru puteți utiliza tehnici de optimizare a:
Stylus, Ruby Sass și node-sass au capacitatea de a comprima CSS în timpul compilării.
În Stylus, includeți --comprima steag:
stylus -compress < source_file.scss > compiled_file.css
În Ruby Sass include --stil steag, urmat de comprimat:
sass source_file.scss compiled_file.css - stil comprimat
În nod-sass adăugați --ieșire în stil steagul urmat de comprimat:
node-sass - tip de comprimat comprimat source_file.scss compiled_file.css
Dacă nu utilizați preprocesoarele CSS sau doriți optimizarea optimă a codului, puteți utiliza pachetul clean-css care va pune fișierele CSS prin procese de compresie mai profunde.
Procesele de compresie regulate elimină spațiul alb și comentariile din CSS. Pe de altă parte, pachetul clean-css poate face lucruri precum:
Îmbinarea selectorilor duplicat poate fi utilă, de exemplu, dacă doriți să aveți toate layout-ul pentru o anumită clasă inițial într-un fișier "layout.css", în timp ce culoarea pentru aceeași clasă este inițial într-un "colors.css".
Rotunjirea numerelor este excelentă când ați folosit o funcție preprocesor pentru a converti o valoare în unități rem și ați terminat cu ceva de genul 2.3649858573rem. Cu css-clean acest număr ar fi rotunjit la două zecimale, aducându-l la o valoare mult mai mică 2.36rem.
Puteți citi mai multe despre curățarea css la: https://github.com/jakubpawlowicz/clean-css
Instalați curat-css la nivel global cu comanda:
[sudo] npm instalați clean-css -g
Pentru a curăța un fișier CSS utilizați:
cleancss style.css
Notă: Chiar dacă numele pachetului "clean-css" are o liniuță în el, asigurați-vă că îl utilizați cleancss fără o cratimă pentru a porni comenzile.
Pentru a specifica un nou nume de fișier pentru css-clean pentru a genera utilizați -o urmat de noul nume de fișier, înainte de numele fișierului pe care îl vizați:
cleancss -o cleaned.css style.css
Există mai multe opțiuni de comandă disponibile pentru css-clean, despre care puteți citi totul despre: Cum se utilizează Clean CSS CLI.
Jade este un limbaj uimitor care se compilează în HTML și face posibilă atât scrierea codului dvs. în sintagmă, astfel încât dezvoltarea este mult mai rapidă și crearea propriilor sisteme de template-uri, astfel încât să vă puteți salva pe codul de rescriere.
Citiți mai multe despre Jade la: https://www.npmjs.com/package/jade
Pentru a instala Jade la nivel global, rulați comanda:
[sudo] npm instala jad -g
Jade, creat de aceeași persoană ca Stylus, folosește aceeași sintaxă de comandă de bază < și > semne pentru a compila un fișier:
jad < index.jade > index.html
Această comandă va compila "index.jade" în "index.html" în același director.
Pentru a compila toate fișierele Jade într-un anumit director, utilizați:
jade dir_name
Pentru a seta directorul pe care doriți ca fișierele HTML să fie scrise pentru a plasa --afară între numele directoarelor de intrare și de ieșire:
jade src_dir --out html_dir
Să folosești Jade ceas funcția pentru compilarea automată la salvare, treceți --ceas pavilion imediat după comanda de jad.
Pentru fișierele individuale:
jad - vizionează < index.jade > index.html
Sau pentru directoarele complete:
jade - vizionați dir_name
jade - vizionați dir_name --out html_dir
Așa cum dorim ca fișierele CSS pe care le implementăm să fie optimizate, și așa dorim să livrăm fișierele noastre JavaScript în cel mai eficient mod posibil.
Este comun pentru noi să avem mai multe fișiere JS care intră în proiectele noastre, cum ar fi nevoie de Modernizr, jQuery și propriul nostru cod personalizat, de exemplu, dar de asemenea, dorim să minimizăm numărul de solicitări HTTP create de site-urile noastre. În plus, vrem să asigurăm timpul de încărcare pentru că JavaScript este foarte rapid.
Cea mai bună modalitate de a gestiona ambele probleme este aceea de a concatena simultan fișierele noastre JavaScript într-un singur fișier, ceea ce înseamnă că vom avea nevoie doar de o solicitare de http pentru al încărca și de a minimiza fișierul rezultat astfel încât să fie la cea mai mică dimensiune posibilă.
Vom folosi pachetul UglifyJS pentru a avea grijă de acest proces.
Pentru a instala uglify-js la nivel global:
[sudo] npm instala uglify-js -g
Pentru a combina două fișiere JavaScript, apoi desprindeți spațiul alb și comentariile din fișierul rezultat, utilizați uglifyjs comanda urmată de numele fiecăruia dintre fișierele sursă cu spații între ele. După aceasta includeți --producție și numele pe care doriți ca noul fișier combinat și minimizat să aibă:
uglifyjs input1.js input2.js - intrare input.min.js
Pe lângă deconectarea implicită a spațiului alb și a comentariilor, puteți adăuga și compresie care va modifica de fapt codul pentru a reduce dimensiunea. Pentru a face acest lucru adăugați --comprima steag la sfârșitul comenzii:
uglifyjs input1.js input2.js - intrare input.min.js --compress
O altă opțiune de optimizare disponibilă este de a "mangaia" codul, ceea ce va face lucruri precum criptarea numelor variabile, a funcțiilor și a argumentelor până la caractere unice. Pentru a utiliza această opțiune, adăugați --calandru steag la sfârșitul comenzii:
uglifyjs input1.js input2.js - input input.min.js --mangle
Puteți utiliza, de asemenea, atât compresie, cât și mangling, trecând ambele steaguri:
uglifyjs input1.js input2.js - intrare input.min.js --mangle --compress
Citiți mai multe despre comenzile pe care le puteți rula cu UglifyJS la: https://www.npmjs.com/package/uglify-js
Dacă combinați și / sau minificați scripturi de la terțe părți, cum ar fi jQuery, Modernizr și așa mai departe, asigurați-vă că utilizați versiunile complete ale acestor fișiere. Este, în general, o idee proastă de a re-minifia fișierele care au fost deja minificate, deoarece le puteți întrerupe funcționalitatea.
Puteți identifica fișierele care au fost deja minificate, deoarece vor urma în mod obișnuit convenția de denumire a "name.min.js", în timp ce versiunea extinsă a fișierului va fi "name.js".
Acum știi cum să termini niște sarcini incredibil de utile cu diferite comenzi, dar dacă ar fi putut să îți completezi toate sarcinile pe care proiectul ți le dorește toate, în același timp, cu o singură comandă?
În următorul tutorial veți învăța cum să faceți exact acest lucru, folosindu-i pe alergătorii de sarcină pentru a configura toate sarcinile de care are nevoie proiectul, astfel încât compilația, autoprefixarea, combinarea și optimizarea să se facă imediat și în doar câteva secunde.
Ne vedem în tutorialul următor!
Accentsconagua