Share
Il numero di strumenti di progettazione e sviluppo che abbiamo a nostra disposizione cresce con il passare dei mesi. Tuttavia, alcuni di noi sono abbastanza a proprio agio con i nostri strumenti attuali e un flusso di lavoro che potrebbe non essere più alla moda come una volta.
Ad esempio, mentre altri si immergono in PostCSS o Gulp, mi sto ancora divertendo con CodeKit come app per i progetti personali; progetti su cui lavoro senza altri sviluppatori coinvolti. CodeKit viene fornito con un numero di strumenti come JSHint, Uglify, Bower, Autoprefixer e i soliti compilatori di CSS-Processor. Tutto ciò è stato sufficiente e mi ha servito bene. Finché, cioè, avevo bisogno di usare RTLCSS, che non fa parte di CodeKit per impostazione predefinita.
In questo suggerimento rapido ti mostrerò come usare Hook CodeKit per estendere CodeKit e aggiungere strumenti extra al tuo flusso di lavoro.
RTLCSS rende flipping CSS per un sistema di scrittura da destra a sinistra, come la scrittura araba, un gioco da ragazzi. È disponibile per Gulp, Grunt, PostCSS sotto forma di plug-in e CLI (Command Line Interface). L'ultima opzione ci dà la possibilità di integrarla con CodeKit attraverso ganci.
In alto vedrai un esempio di script arabo scritto da destra a sinistra con due tipi di carattere diversi da Google Web Fonts. Il merito va a Michael Jasper.
Nota: Stiamo lavorando con RTLCSS in questo esempio, ma il principio può essere utilizzato per molti altri strumenti.
ganci sono stati disponibili per l'uso da CodeKit 2, tuttavia molte persone non sono a conoscenza dell'esistenza di questa funzionalità, lasciandola sottoutilizzata in modo massivo. Gli hook ci consentono di eseguire script: script AppleScript o Shell (bash), ogni volta che CodeKit compila file in un progetto. CodeKit espone anche due variabili che possono essere utilizzate all'interno di tali script all'interno di Hooks. Daremo un'occhiata a questi in seguito.
Accentsconagua
CK_INPUT_PATHS: Elenco dei sorgenti del file compilato inclusi quelli importati.CK_OUTPUT_PATHS: Elenco dei percorsi dei file compilati.Per cominciare, avremo bisogno del rtlcss comando installato. Installa il comando attraverso npm a livello globale, quindi sarà accessibile ovunque sul nostro sistema.
npm install rtlcss -g
Non sei sicuro di cosa sta succedendo qui? Check-out:
Supponendo di aver aggiunto la cartella del progetto in CodeKit (in caso contrario, trascina la cartella nella finestra di CodeKit per iniziare), vai al Impostazioni del progetto e scorrere verso il basso ganci linguetta.
Fare clic sull'icona più per creare un nuovo Hook, rinominare il nome di Hook per chiarezza e selezionare Script di Shell dove vedi Esegui quanto segue.
Selezionare le condizioni per quando eseguire lo script Shell. In questo caso, vorremmo che venisse eseguito al termine dell'output .css quindi abbiamo impostato la condizione per:
All'interno della casella vuota, aggiungi il seguente script.
$ CK_OUTPUT_PATHS: = "" CK_OUTPUT_PATHS = ($ CK_OUTPUT_PATHS //: /) per i in "$ CK_OUTPUT_PATHS [@]" do o = "$ i / .css / .rtl.css" rtlcss "$ i" "$ o" fatto
La prima riga dello script inizializza il CK_OUTPUT_PATHS variabile come una stringa vuota. La seconda riga dividerà i percorsi in una matrice. Se guardiamo nella pagina di aiuto, possiamo vedere che CodeKit può passare i due punti separati di file nella variabile. Per esempio:
/Users/thoriq/Sites/www/wp/style.css:/Users/thoriq/Sites/www/wp/admin.css
Questo può accadere se abbiamo importato un file all'interno di due o più file contemporaneamente, quindi l'array. Quindi saremo in grado di eseguire la riga di comando in ognuno dei file compilati attraverso il per ciclo.
Infine, il O = "$ i / css / .rtl.css" line imposta l'output dei nostri file elaborati con rtlcss comando. In questo caso, aggiungeremo i fogli di stile con .rtl.css.
Aggiungi alcune modifiche ai fogli di stile SCSS, LESS o Stylus. Salva, una volta che questi file sono stati compilati, dovresti trovare un nuovo foglio di stile compilato con .rtl.css estensione.
Nel nostro caso, anche le regole di stile all'interno di questi file sono state convertite per soddisfare la direzione della scrittura RTL.
Esempio di codice di Mohammad Younes creatore di RTLCSSQuesto è stato solo un suggerimento per farti conoscere le possibilità che gli Hooks possono darci. Prova questo esempio e vedi come vai avanti, o magari prova un altro strumento come CSSNano. In quale altro modo sceglieresti di estendere CodeKit? Lascia i tuoi suggerimenti e idee nei commenti!
