Share
La cantidad de herramientas de diseño y desarrollo que tenemos a nuestra disposición aumenta con cada mes que pasa. No obstante, algunos de nosotros nos sentimos muy cómodos con nuestras herramientas actuales y con un flujo de trabajo que puede que ya no sea tan moderno como antes..
Por ejemplo, mientras otros se sumergen en PostCSS o Gulp, todavía estoy disfrutando de CodeKit como mi aplicación para proyectos personales; Proyectos en los que trabajo sin otros desarrolladores involucrados. CodeKit se suministra con una serie de herramientas como JSHint, Uglify, Bower, Autoprefixer y los compiladores habituales del procesador CSS. Todo esto fue suficiente y me sirvió bien. Hasta que, es decir, necesitaba usar RTLCSS, que no es parte de CodeKit por defecto.
En este consejo rápido te mostraré cómo usar CodeKit Hooks para extender CodeKit y agregar herramientas adicionales a su flujo de trabajo.
RTLCSS hace que el cambio de CSS para un sistema de escritura de derecha a izquierda, como el script árabe, sea muy fácil. Está disponible para Gulp, Grunt, PostCSS en forma de un complemento y una CLI (interfaz de línea de comandos). La última opción abre la posibilidad de integrarlo con CodeKit a través de Manos.
Arriba verá un ejemplo de un script en árabe escrito de derecha a izquierda con dos fuentes diferentes de Google Web Fonts. El crédito es para Michael Jasper.
Nota: Estamos trabajando con RTLCSS en este ejemplo, pero el principio puede usarse para muchas otras herramientas.
Manos han estado disponibles para su uso desde CodeKit 2, pero muchas personas no son conscientes de que esta característica existe, dejándola infrautilizada de forma masiva. Los ganchos nos permiten ejecutar scripts (scripts de AppleScript o Shell (bash)) cada vez que CodeKit compila archivos en un proyecto. CodeKit también expone dos variables que pueden usarse dentro de dichos scripts dentro de Hooks. Vamos a echar un vistazo a estos más adelante..
Accentsconagua
CK_INPUT_PATHS: Lista de las fuentes del archivo compilado incluyendo las importadas..CK_OUTPUT_PATHS: Lista de rutas de los archivos compilados.Para empezar, necesitaremos la rtlcss comando instalado. Instale el comando a través de npm a nivel mundial, por lo que será accesible en cualquier parte de nuestro sistema.
npm instalar rtlcss -g
¿No estás seguro de lo que está pasando aquí? Revisa:
Suponiendo que tiene la carpeta del proyecto agregada en CodeKit (si no, arrastre su carpeta a la ventana de CodeKit para comenzar), vaya a Ajustes del proyecto y desplácese hasta el Manos Lengüeta.
Haga clic en el icono más para crear un nuevo Gancho, cambie el nombre del nombre del Gancho para mayor claridad y seleccione Shell Script donde ves Ejecutar el siguiente.
Seleccione las condiciones para cuándo ejecutar el script de Shell. En este caso, nos gustaría que se ejecute cuando la salida finalice con .css Por lo tanto, establecemos la condición a:
Dentro del cuadro vacío, agregue el siguiente script.
$ CK_OUTPUT_PATHS: = "" CK_OUTPUT_PATHS = ($ CK_OUTPUT_PATHS //: /) para i en "$ CK_OUTPUT_PATHS [@]" do o = "$ i / .css / .rtl.css" rllcss "$ i" "$ o" hecho
La primera línea del script inicializa el CK_OUTPUT_PATHS variable como una cadena vacía. La segunda línea dividirá las rutas en una matriz. Si nos fijamos en la página de Ayuda, podemos ver que CodeKit puede pasar dos puntos separados de los archivos en la variable. Por ejemplo:
/Users/thoriq/Sites/www/wp/style.css:/Users/thoriq/Sites/www/wp/admin.css
Esto puede suceder si hemos importado un archivo dentro de dos o más archivos a la vez, por lo tanto, la matriz. Así podremos ejecutar la línea de comando para cada uno de los archivos compilados a través de en bucle.
Por último, la o = "$ i / .css / .rtl.css" línea establece la salida de nuestros archivos procesados con el rtlcss mando. En este caso, adjuntaremos las hojas de estilo con .rtl.css.
Agregue algunos cambios a sus hojas de estilo SCSS, LESS o Stylus. Guarde, luego, una vez compilados estos archivos, debería encontrar una nueva hoja de estilo compilada con el .rtl.css extensión.
En nuestro caso, las reglas de estilo dentro de estos archivos también se han convertido para atender la dirección de escritura RTL.
Ejemplo de código por Mohammad Younes creador de RTLCSSEsto fue solo una sugerencia rápida, para informarle de las posibilidades que Hooks puede brindarnos. Pruebe este ejemplo y vea cómo le va, o tal vez pruebe con otra herramienta como CSSNano. ¿De qué otra forma elegirías extender CodeKit? Deja tus consejos e ideas en los comentarios.!
