Share
Die Anzahl der uns zur Verfügung stehenden Entwicklungs- und Entwicklungswerkzeuge wächst mit jedem Monat. Dennoch sind einige von uns mit den aktuellen Tools und einem Workflow, der möglicherweise nicht mehr so hip ist wie früher, ziemlich vertraut.
Während andere beispielsweise in PostCSS oder Gulp eintauchen, gefällt mir CodeKit immer noch als meine Go to App für persönliche Projekte. Projekte, an denen ich ohne Beteiligung anderer Entwickler arbeite. CodeKit wird mit einer Reihe von Tools wie JSHint, Uglify, Bower, Autoprefixer und den üblichen CSS-Prozessor-Compilern geliefert. All dies war ausreichend und hat mir gut gedient. Bis dahin musste ich RTLCSS verwenden, das standardmäßig nicht Bestandteil von CodeKit ist.
In diesem kurzen Tipp zeige ich Ihnen, wie Sie es verwenden CodeKit-Haken um CodeKit zu erweitern und Ihrem Workflow zusätzliche Werkzeuge hinzuzufügen.
RTLCSS macht das Umdrehen von CSS für ein Right-to-Left-Schreibsystem, wie arabische Schrift, zum Kinderspiel. Es ist für Gulp, Grunt, PostCSS in Form eines Plugins und einer CLI (Command Line Interface) verfügbar. Die letzte Option dort bietet die Möglichkeit, sie mit CodeKit zu integrieren Haken.
Oben sehen Sie ein Beispiel für ein arabisches Skript, das von rechts nach links mit zwei verschiedenen Schriftarten von Google Web Fonts geschrieben wurde. Dank geht an Michael Jasper.
Hinweis: Wir arbeiten in diesem Beispiel mit RTLCSS, das Prinzip kann jedoch für viele andere Werkzeuge verwendet werden.
Haken Es steht seit CodeKit 2 zur Verfügung, doch viele Leute wissen nicht, dass diese Funktion vorhanden ist. Mit Hooks können wir jedes Mal, wenn CodeKit Dateien in einem Projekt kompiliert, Skripts ausführen (AppleScript oder Shell (bash) -Skripts). CodeKit macht auch zwei Variablen verfügbar, die in solchen Skripten in Hooks verwendet werden können. Wir werden uns diese später ansehen.
Accentsconagua
CK_INPUT_PATHS: Liste der Quellen der kompilierten Datei einschließlich der importierten.CK_OUTPUT_PATHS: Liste der Pfade der kompilierten Dateien.Zunächst brauchen wir die RTLCSS Befehl installiert. Installieren Sie den Befehl über npm global, so dass es überall auf unserem System verfügbar ist.
npm install rtlcss -g
Nicht sicher, was hier los ist? Auschecken:
Vorausgesetzt, Sie haben den Projektordner in CodeKit hinzugefügt (wenn dies nicht der Fall ist, ziehen Sie Ihren Ordner in das CodeKit-Fenster, um zu beginnen) Projekt Einstellungen und scrollen Sie nach unten Haken Tab.
Klicken Sie auf das Plus-Symbol, um einen neuen Hook zu erstellen, benennen Sie den Hook-Namen zur Verdeutlichung um und wählen Sie Shell-Skript Wo siehst du Führen Sie folgendes aus.
Wählen Sie die Bedingungen aus, wann das Shell-Skript ausgeführt werden soll. In diesem Fall möchten wir, dass es läuft, wenn die Ausgabe mit endet .css Daher setzen wir die Bedingung auf:
Fügen Sie in dem leeren Feld das folgende Skript hinzu.
$ CK_OUTPUT_PATHS: = "" CK_OUTPUT_PATHS = ($ CK_OUTPUT_PATHS //: /) für i in "$ CK_OUTPUT_PATHS [@]" do o = "$ i / .css / .rtl.css" rtlcss "$ i" "$ o" fertig
Die erste Zeile des Skripts initialisiert die CK_OUTPUT_PATHS Variable als leere Zeichenfolge. Die zweite Zeile teilt die Pfade in ein Array auf. Wenn wir die Hilfeseite betrachten, können wir sehen, dass CodeKit durch Doppelpunkte getrennte Pfade von Dateien in der Variablen übergeben kann. Zum Beispiel:
/Users/thoriq/Sites/www/wp/style.css:/Users/thoriq/Sites/www/wp/admin.css
Dies kann passieren, wenn wir eine Datei in zwei oder mehr Dateien gleichzeitig importiert haben, daher das Array. So können wir die Befehlszeile für jede der kompilierten Dateien über den Befehl ausführen für Schleife.
Zuletzt die o = "$ i / .css / .rtl.css" Zeile legt die Ausgabe unserer Dateien fest, die mit der Datei bearbeitet werden RTLCSS Befehl. In diesem Fall hängen wir die Stylesheets mit an .rtl.css.
Fügen Sie den SCSS-, WENIGER- oder Stylus-Stylesheets einige Änderungen hinzu. Speichern Sie, und sobald diese Dateien kompiliert sind, sollten Sie ein neues Stylesheet finden, das mit der .rtl.css Erweiterung.
In unserem Fall wurden die Stilregeln in diesen Dateien auch für die RTL-Schreibrichtung konvertiert.
Code-Beispiel von Mohammad Younes, Schöpfer von RTLCSSDies war nur ein kurzer Tipp, um Sie auf die Möglichkeiten aufmerksam zu machen, die Hooks uns bieten kann. Probieren Sie dieses Beispiel aus und sehen Sie, wie es Ihnen geht, oder probieren Sie ein anderes Tool wie CSSNano. Wie würden Sie CodeKit sonst noch erweitern? Hinterlassen Sie Ihre Tipps und Ideen in den Kommentaren!
