Share
Het aantal ontwerp- en ontwikkelingstools dat we tot onze beschikking hebben groeit met elke voorbijgaande maand. Niettemin, sommigen van ons zijn redelijk comfortabel met onze huidige tools en een workflow die misschien niet meer zo hip is als dat het ooit was.
Terwijl anderen bijvoorbeeld in PostCSS of Gulp duiken, geniet ik nog steeds van CodeKit als mijn go-to-app voor persoonlijke projecten; projecten waar ik aan werk zonder andere betrokken ontwikkelaars. CodeKit wordt geleverd met een aantal hulpmiddelen zoals JSHint, Uglify, Bower, Autoprefixer en de gebruikelijke CSS-processorcompilers. Dit was allemaal voldoende en heeft me goed gediend. Totdat, dat is, moest ik RTLCSS gebruiken, dat standaard geen deel uitmaakt van CodeKit.
In deze snelle tip laat ik je zien hoe te gebruiken CodeKit Hooks om CodeKit uit te breiden en extra hulpmiddelen toe te voegen aan uw workflow.
RTLCSS maakt CSS voor een schrijfsysteem van rechts naar links, zoals Arabisch schrift, een fluitje van een cent. Het is beschikbaar voor Gulp, Grunt, PostCSS in de vorm van een plug-in en een CLI (Command Line Interface). De laatste optie daar opent de mogelijkheid om het met CodeKit te integreren haken.
Hierboven ziet u een voorbeeld van een Arabisch schrift geschreven van rechts naar links met twee verschillende lettertypen uit Google Web Fonts. Krediet gaat naar Michael Jasper.
Notitie: We werken in dit voorbeeld met RTLCSS, maar het principe kan voor veel andere hulpprogramma's worden gebruikt.
haken zijn al beschikbaar sinds CodeKit 2, maar veel mensen weten niet dat deze functie bestaat, waardoor ze massaal onderbenut blijven. Met hooks kunnen we scripts uitvoeren - AppleScript of Shell (bash) -scripts - telkens wanneer CodeKit bestanden in een project compileert. CodeKit legt ook twee variabelen bloot die binnen dergelijke scripts binnen Hooks kunnen worden gebruikt. We zullen deze later bekijken.
Accentsconagua
CK_INPUT_PATHS: Lijst met de bronnen van het gecompileerde bestand, inclusief de geïmporteerde bestanden.CK_OUTPUT_PATHS: Lijst met de paden van de gecompileerde bestanden.Om te beginnen hebben we de rtlcss opdracht geïnstalleerd. Installeer het commando via NPM globaal, dus het zal overal op ons systeem toegankelijk zijn.
npm install rtlcss -g
Weet je niet zeker wat hier aan de hand is? Uitchecken:
Ervan uitgaande dat u de projectmap hebt toegevoegd in CodeKit (als dat niet het geval is, sleept u uw map naar het venster CodeKit om aan de slag te gaan), gaat u naar Project instellingen en scrol omlaag naar de haken tab.
Klik op het plus-pictogram om een nieuwe haak te maken, geef de haaknaam een andere naam voor duidelijkheid en selecteer Shell Script Waar je ziet Voer het volgende uit.
Selecteer de voorwaarden voor wanneer het Shell-script moet worden uitgevoerd. In dit geval willen we dat het wordt uitgevoerd wanneer de uitvoer eindigt .css daarom hebben we de voorwaarde gesteld om:
Voeg in het lege vak het volgende script toe.
$ CK_OUTPUT_PATHS: = "" CK_OUTPUT_PATHS = ($ CK_OUTPUT_PATHS //: /) voor i in "$ CK_OUTPUT_PATHS [@]" do o = "$ i / .css / .rtl.css" rtlcss "$ i" "$ o" gedaan
De eerste regel van het script initialiseert de CK_OUTPUT_PATHS variabele als een lege string. De tweede regel verdeelt de paden in een array. Als we naar de Help-pagina kijken, kunnen we zien dat CodeKit dubbel gescheiden paden van bestanden in de variabele kan passeren. Bijvoorbeeld:
/Users/thoriq/Sites/www/wp/style.css:/Users/thoriq/Sites/www/wp/admin.css
Dit kan gebeuren als we een bestand in twee of meer bestanden tegelijk hebben geïmporteerd, vandaar de array. Dus we kunnen de opdrachtregel naar elk van de gecompileerde bestanden uitvoeren via de for loop.
Ten slotte, de o = "$ i / CSS / .rtl.css" regel stelt de uitvoer van onze bestanden in verwerkt met de rtlcss commando. In dit geval zullen we de stylesheets toevoegen .rtl.css.
Voeg enkele wijzigingen toe aan uw SCSS-, LESS- of Stylus-stylesheets. Sla op en als deze bestanden eenmaal zijn gecompileerd, zou u een nieuwe stylesheet moeten vinden die is gecompileerd met de .rtl.css uitbreiding.
In ons geval zijn de stijlregels binnen deze bestanden ook geconverteerd om rekening te houden met RTL-schrijfrichting.
Codevoorbeeld door Mohammad Younes maker van RTLCSSDit was slechts een korte tip, om u bewust te maken van de mogelijkheden die Hooks ons kan bieden. Probeer dit voorbeeld en zie hoe u het doet, of probeer misschien een andere tool zoals CSSNano. Hoe anders zou u ervoor kiezen om CodeKit uit te breiden? Laat uw tips en ideeën in de commentaren!
