Share
Le nombre d'outils de conception et de développement à notre disposition augmente chaque mois. Néanmoins, certains d’entre nous sont assez à l'aise avec nos outils actuels et avec un flux de travail qui n'est peut-être plus aussi branché qu'avant..
Par exemple, pendant que d'autres plongent dans PostCSS ou Gulp, je profite toujours de CodeKit pour aller à l'application pour des projets personnels. projets sur lesquels je travaille sans autres développeurs impliqués. CodeKit est livré avec un certain nombre d'outils comme JSHint, Uglify, Bower, Autoprefixer et les compilateurs habituels des processeurs CSS. Tout cela était suffisant et m'a bien servi. Jusque-là, j'avais besoin d'utiliser RTLCSS, qui ne fait pas partie de CodeKit par défaut.
Dans cette astuce, je vais vous montrer comment utiliser Crochets CodeKit afin d'étendre CodeKit et ajouter des outils supplémentaires à votre flux de travail.
RTLCSS permet de basculer les CSS pour un système d’écriture de droite à gauche, comme l’écriture arabe, en un tournemain. Il est disponible pour Gulp, Grunt, PostCSS sous la forme d'un plugin et d'une CLI (interface de ligne de commande). La dernière option ouvre la possibilité de l’intégrer à CodeKit via Crochets.
Vous trouverez ci-dessus un exemple de script arabe écrit de droite à gauche avec deux polices différentes de Google Web Fonts. Le mérite en revient à Michael Jasper.
Remarque: Nous travaillons avec RTLCSS dans cet exemple, mais le principe peut être utilisé pour de nombreux autres outils.
Crochets sont disponibles depuis CodeKit 2, mais de nombreuses personnes ne sont pas au courant de l'existence de cette fonctionnalité, la laissant ainsi massivement sous-utilisée. Les points d'ancrage nous permettent d'exécuter des scripts - scripts AppleScript ou Shell (bash) - à chaque fois que CodeKit compile des fichiers dans un projet. CodeKit expose également deux variables pouvant être utilisées dans de tels scripts dans Hooks. Nous verrons cela plus tard.
Accentsconagua
CK_INPUT_PATHS: Liste des sources du fichier compilé, y compris celles importées.CK_OUTPUT_PATHS: Liste des chemins des fichiers compilés.Pour commencer, nous aurons besoin de rtlcss commande installée. Installez la commande via npm globalement, il sera donc accessible partout sur notre système.
npm installe rtlcss -g
Vous ne savez pas ce qui se passe ici? Check-out:
En supposant que le dossier du projet soit ajouté à CodeKit (si ce n’est pas le cas, faites-le glisser dans la fenêtre CodeKit pour commencer), accédez au Paramètres du projet et faites défiler jusqu'au Crochets Languette.
Cliquez sur l'icône plus pour créer un nouveau crochet, renommez le nom du crochet pour plus de clarté et sélectionnez Script shell où tu vois Exécutez ce qui suit.
Sélectionnez les conditions pour l'exécution du script Shell. Dans ce cas, nous aimerions qu’il s’exécute lorsque la sortie se termine par .css Par conséquent, nous posons la condition à:
Dans la case vide, ajoutez le script suivant.
$ CK_OUTPUT_PATHS: = "" CK_OUTPUT_PATHS = ($ CK_OUTPUT_PATHS //: /) pour i dans "$ CK_OUTPUT_PATHS [@]" do o = "$ i / .css / .rtl.css" "$ i" "$ o" fait
La première ligne du script initialise le CK_OUTPUT_PATHS variable sous forme de chaîne vide. La deuxième ligne divisera les chemins en un tableau. Si nous examinons la page d'aide, nous pouvons voir que CodeKit peut transmettre des chemins d'accès séparés aux deux points des fichiers de la variable. Par exemple:
/Users/thoriq/Sites/www/wp/style.css:/Users/thoriq/Sites/www/wp/admin.css
Cela peut arriver si nous avons importé un fichier dans deux ou plusieurs fichiers à la fois, d'où le tableau. Nous pourrons donc exécuter la ligne de commande sur chacun des fichiers compilés via le pour la boucle.
Enfin, le o = "$ i / .css / .rtl.css" ligne définit la sortie de nos fichiers traités avec le rtlcss commander. Dans ce cas, nous allons annexer les feuilles de style avec .rtl.css.
Ajoutez des modifications à vos feuilles de style SCSS, LESS ou Stylus. Enregistrer, puis une fois ces fichiers compilés, vous devriez trouver une nouvelle feuille de style compilée avec le .rtl.css extension.
Dans notre cas, les règles de style de ces fichiers ont également été converties pour prendre en charge la direction d'écriture RTL..
Exemple de code de Mohammad Younes créateur de RTLCSSC’était juste un petit conseil, pour vous faire prendre conscience des possibilités que les Hooks peuvent nous donner. Essayez cet exemple et voyez comment vous en sortez, ou essayez peut-être un autre outil tel que CSSNano. Sinon, comment choisiriez-vous d'étendre CodeKit? Laissez vos conseils et idées dans les commentaires!
