Share
Numărul de instrumente de proiectare și dezvoltare pe care le avem la dispoziție crește cu fiecare lună care trece. Cu toate acestea, unii dintre noi sunt destul de confortabil cu instrumentele actuale și cu un flux de lucru care nu mai poate fi la fel de șold cum a fost odată.
De exemplu, în timp ce alții se scufundă în PostCSS sau Gulp, mă bucur încă de CodeKit, deoarece mă duc la aplicații pentru proiecte personale; proiecte pe care le lucrez fără alți dezvoltatori implicați. CodeKit este livrat cu un număr de instrumente cum ar fi JSHint, Uglify, Bower, Autoprefixer și compilatoarele obișnuite ale CSS-Processor. Toate acestea au fost suficiente și mi-au servit bine. Până atunci, este necesar să folosesc RTLCSS, care nu face parte din CodeKit implicit.
În acest sfat rapid vă voi arăta cum să utilizați Coduri de hârtie pentru a extinde CodeKit și a adăuga instrumente suplimentare în fluxul de lucru.
RTLCSS face CSS flipping pentru un sistem de scriere dreapta-la-stânga, cum ar fi scriptul arab, o briza. Este disponibil pentru Gulp, Grunt, PostCSS sub formă de plugin și CLI (Interface Line Command). Ultima opțiune de acolo deschide posibilitatea integrării sale cu CodeKit Hooks.
Mai sus, veți vedea un exemplu de script arabic scris de la dreapta la stânga cu două fonturi diferite de la Fonturile Google Web. Creditul îi revine lui Michael Jasper.
Notă: Lucrăm cu RTLCSS în acest exemplu, dar principiul poate fi folosit pentru multe alte instrumente.
Hooks au fost disponibile pentru utilizare de la CodeKit 2, însă mulți oameni nu știu că această caracteristică există, lăsând-o masiv subutilizată. Hooks ne permit să rulați scripturile - scripturile AppleScript sau Shell (bash) - de fiecare dată când CodeKit compilează fișiere într-un proiect. CodeKit expune, de asemenea, două variabile care pot fi utilizate în cadrul unor astfel de scripturi în cadrul Hooks. Vom analiza mai târziu.
Accentsconagua
CK_INPUT_PATHS: Lista surselor din fișierul compilat, inclusiv cele importate.CK_OUTPUT_PATHS: Lista traseelor fișierelor compilate.În primul rând, vom avea nevoie de rtlcss comandă instalată. Instalați comanda prin NPM la nivel global, astfel încât acesta să fie accesibil oriunde în sistemul nostru.
npm instalare rtlcss -g
Nu știți ce se întâmplă aici? Verifică:
Presupunând că ați adăugat directorul proiectului în CodeKit (dacă nu, trageți folderul în fereastra CodeKit pentru a începe), mergeți la Setările proiectului și derulați în jos până la Hooks Tab.
Faceți clic pe pictograma plus pentru a crea un nou Cârlig, pentru a le redenumi numele de cârlig pentru claritate și selectați Shell Script unde vedeți Rulați următoarele.
Selectați condițiile pentru care să rulați scriptul Shell. În acest caz, ne-ar plăcea să ruleze când ieșirea se termină .css de aceea am stabilit condiția pentru:
În caseta goală, adăugați următorul script.
$ CK_OUTPUT_PATHS: = "" CK_OUTPUT_PATHS = ($ CK_OUTPUT_PATHS //: /) pentru i în "$ CK_OUTPUT_PATHS [@] "$ i" "$ o" terminat
Prima linie a scriptului inițializează CK_OUTPUT_PATHS variabilă ca șir gol. A doua linie va împărți căile într-o matrice. Dacă ne uităm în pagina Ajutor, putem vedea că CodeKit poate traversa căile separate de fișiere în fișierul variabil. De exemplu:
/Users/thoriq/Sites/www/wp/style.css:/Users/thoriq/Sites/www/wp/admin.css
Acest lucru se poate întâmpla dacă am importat un fișier în două sau mai multe fișiere simultan, de unde rezultă matricea. Așadar, vom putea rula linia de comandă la fiecare fișier compilat prin pentru buclă.
În cele din urmă, o = "$ i / .css / .rtl.css" line stabilește ieșirea fișierelor noastre procesate cu rtlcss comanda. În acest caz, vom adăuga foile de stil cu .rtl.css.
Adăugați câteva modificări în foile de stil SCSS, LESS sau Stylus. Salvați, după ce aceste fișiere sunt compilate, ar trebui să găsiți o nouă foaie de stil compilate cu .rtl.css extensie.
În cazul nostru, regulile de stil din aceste fișiere au fost de asemenea convertite pentru a răspunde direcției de scriere RTL.
Exemplu de cod de către creatorul lui Mohammad Younes al RTLCSSAcesta a fost doar un sfat rapid, pentru a vă face conștienți de posibilitățile pe care le pot oferi Hooks. Încearcă acest exemplu și vezi cum te descurci sau încerci un alt instrument, cum ar fi CSSNano. Cum altfel ați alege să extindeți CodeKit? Lăsați sfaturile și ideile dvs. în comentarii!
