Share
Como diseñador web, hay tres idiomas en los que está garantizado que trabajará de una u otra forma: CSS, HTML y JavaScript. En este tutorial, aprovechará la línea de comandos para hacer que su desarrollo con estos tres idiomas sea más poderoso y más eficiente..
Aprenderá cómo usar la línea de comandos para:
Nota: este tutorial asume que ya ha completado los tutoriales anteriores en esta serie. Si no lo ha hecho, le resultará útil volver atrás y seguirlos antes de continuar..
Si nunca ha trabajado con preprocesadores de CSS, elimine todo inmediatamente y pruebe uno. Una vez que encuentre un preprocesador que le guste y que se ajuste a su estilo de codificación, es probable que nunca vuelva a codificar en CSS sin formato.
Los tres preprocesadores que generalmente se consideran los elegidos son Stylus, Sass / SCSS y LESS. Tuts + tiene una increíble variedad de tutoriales y cursos para ayudarte a aprender cómo escribir en la sintaxis de los tres preprocesadores..
En este tutorial vamos a cubrir cómo puede usar la línea de comandos para compilar el código para cada uno de los tres.
Cada usuario de preprocesador tiene un favorito, y el mío es Stylus. Utiliza una sintaxis mínima que puede escribirse muy rápidamente, tiene una funcionalidad muy potente y es compatible con excelentes bibliotecas de terceros como Jeet y Kouto-Swiss.
Puede leer todo sobre Stylus en: http://stylus-lang.com/
Para instalar Stylus globalmente, permitiéndole usarlo para compilar archivos ".styl" en cualquier lugar, ejecute este comando:
[sudo] npm install stylus -g
La forma más fácil de compilar con Stylus es usar este comando de una línea:
aguja < example.styl > example.css
Este comando compilará "example.styl" en "example.css" en el mismo directorio.
Para descomponerlo tenemos aguja para iniciar el comando. Entonces usamos un < example.styl para indicar el archivo de entrada del Stylus, seguido de > example.css para denotar el nombre del archivo CSS que queremos haber creado.
También tiene la opción de agregar marcas adicionales a este comando, como usar el --comprimir bandera para eliminar los espacios en blanco del archivo CSS resultante:
lápiz --comprimir < example.styl > example.css
Como alternativa a compilar un archivo a la vez, puede compilar todos los archivos Stylus en un directorio en archivos CSS en otro directorio. Para ello, después de la aguja comando, especifique la carpeta de origen, luego use la --afuera bandera seguida de la carpeta de destino.
Por ejemplo, para compilar todos los archivos Stylus de una carpeta llamada "source_files" en el uso de "asset / css":
stylus source_files --out assets / css
Nota: la carpeta en la que está compilando ya debe existir antes de ejecutar el comando, ya que fallará si no puede encontrar la carpeta especificada para generar archivos CSS.
Hay varias otras opciones que puede aprovechar al usar Stylus a través de la línea de comandos. Para leer todo sobre ellos visite: http://stylus-lang.com/docs/executable.html
Sass es muy probablemente el preprocesador más popular en este momento. Es increíblemente poderoso en lo que puedes lograr con él y tiene una comunidad muy grande y activa. Es compatible con bibliotecas de terceros conocidos como Compass, Bourbon y Susy.
Lea más sobre Sass en: http://sass-lang.com/
Tienes dos opciones para compilar Sass en tu máquina: puedes usar Ruby para manejarlo o puedes usar LibSass.
Sass se creó por primera vez para ejecutarse en Ruby, y como tal, si está buscando un servicio completo y completo, es la opción que puede desear. Por ejemplo, si desea utilizar Compass, la forma más sencilla es seguir con la compilación de Ruby..
LibSass se creó como una alternativa, y una de las opciones que pone a su disposición es compilar Sass a través de un paquete npm. Este enfoque compila Sass mucho más rápido, reduciendo el tiempo de compilación de unos 5 segundos a través de Ruby a menos de medio segundo a través de LibSass. Sin embargo, es posible que ciertas funciones y el código de terceros no sean compatibles.
La elección que elija es completamente dependiente de las preferencias personales, pero como regla general sugeriría ir con LibSass para obtener velocidad a menos que haya algo específico (como Compass) para el que necesite la compilación de Ruby.
Independientemente de su elección, cubriremos el uso de ambos para que esté todo listo en cualquier evento.
Para compilar Sass a través de Ruby, primero debes tener Ruby instalado en tu máquina.
Si estás en Mac, estás de suerte, ya que Ruby ya viene preinstalado, así que no tienes que hacer nada..
Si está en Windows, diríjase a http://rubyinstaller.org/, luego descargue y ejecute el instalador que encuentre allí. A continuación, instale Sass ejecutando este comando:
[sudo] gema instalar sass
Sass se debe descargar e instalar automáticamente para usted. Para verificar que la instalación haya sido exitosa ejecute el comando:
sass -v
Debería ver el número de versión y el nombre de su instalación de Sass en su terminal:
Para compilar un archivo usando Ruby sass solo escribe hablar con descaro a, seguido del nombre del archivo de entrada, un espacio, luego el nombre que le gustaría que tuviera su archivo CSS compilado:
sass source_file.scss compiled_file.css
Ruby Sass también tiene una función incorporada de "observación" (veremos más sobre cómo verla más adelante) que vigilará los archivos en busca de cambios y los recompilará automáticamente cada vez que se guarden.
Para usarlo, agrega el --reloj marque su comando, luego separe los nombres de su fuente y el archivo compilado con dos puntos en lugar de un espacio:
sass --watch source_file.scss: compiled_file.css
También puede especificar directorios enteros para ver y enviar, en lugar de archivos individuales, así:
sass --watch source / sass: asset / css
Una vez que se inicia la observación, debería ver algo como esto en su terminal:
Para leer sobre todas las opciones disponibles a través de la línea de comandos con Ruby Sass:
sass - ayuda
Se mostrará una lectura de la línea de comandos en su terminal:
Puedes usar esto --ayuda para obtener más información sobre cualquier comando que use. Simplemente escriba el nombre del comando seguido de --ayuda y obtendrás información similar a la anterior en cada caso..
Si elige LibSass, puede comenzar con el mismo método que utilizó para instalar los paquetes npm anteriormente en esta serie de tutoriales..
El propio LibSass está escrito en C / C ++ pero hay varias implementaciones de este, incluyendo algunas hechas para trabajar con Node.js. En nuestro caso usaremos el paquete node-sass..
Para instalar node-sass globalmente, ejecute este comando:
[sudo] npm install node-sass -g
Para compilar un tipo de archivo nodo-sass seguido del nombre del archivo de entrada y el nombre que desea que tenga su archivo CSS compilado:
node-sass source_file.scss compiled_file.css
Para controlar el directorio de su archivo CSS se compila en agregar el --salida bandera y directorio de destino entre los nombres de sus archivos de entrada y salida:
node-sass source_file.scss --output assets / css compiled_file.css
Al igual que Ruby Sass, node-sass también usa el --reloj bandera para permitir la compilación automática de sus archivos en el cambio:
node-sass --watch source_file.scss compiled_file.scss
También puede especificar directorios completos para ver, y para enviar a, en lugar de archivos individuales:
node-sass --watch source / sass / * --output activo / css
Cuando use node-sass para ver un directorio completo, asegúrese de incluir / * al final para especificar que desea todos los archivos dentro de.
Cuando tiene un proceso de "observación" en ejecución, puede detenerlo mediante:
El preprocesador LESS también es muy popular, y es probablemente más conocido por su empleo en el marco de Twitter Bootstrap. LESS es un excelente primer preprocesador para comenzar a trabajar ya que es muy similar a escribir en CSS directo.
Lea más sobre LESS en: http://lesscss.org/
Para instalar LESS globalmente, permitiéndole usarlo para compilar archivos ".less" en cualquier lugar, ejecute este comando:
[sudo] npm instala menos -g
Abra un terminal en la carpeta que contiene el archivo MENOS que desea compilar y use el comando menos seguido del nombre del archivo, un > símbolo, luego el nombre que desea que tenga su archivo CSS compilado:
lessc source_file.less> compiled_file.css
Autoprefixer es un paquete npm que verifica con CanIUse.com para obtener información actualizada sobre qué propiedades CSS necesitan los prefijos de los proveedores y cuáles no. Luego, automáticamente se encarga de agregar los prefijos de proveedores requeridos en su código.
Esto puede ser increíblemente útil, a menos que esté supervisando las actualizaciones del navegador constantemente, puede encontrarse fácilmente incluyendo los prefijos del navegador que ya no necesita. También significa que puede escribir todo su CSS sin tener que pensar en los prefijos, y dejar que Autoprefixer se encargue de ellos por usted..
Por ejemplo, autoprefixer convertirá este código:
a display: flex;
… dentro de esto:
a display: -webkit-box; pantalla: -webkit-flex; pantalla: -ms-flexbox; pantalla: flexión;
Lea más sobre Autoprefixer en: https://www.npmjs.com/package/autoprefixer
Instale Autoprefixer globalmente con:
[sudo] npm install autoprefixer -g
Para corregir automáticamente un archivo CSS use el siguiente comando:
autoprefixer style.css
A diferencia de compilar un archivo de preprocesador, esto no creará un segundo archivo de forma predeterminada. El archivo al que se dirige se actualizará, con los prefijos correctos agregados directamente.
Si tu hacer desea que Autoprefixer genere un segundo archivo separado, agregue el --salida bandera seguida de un nombre para su archivo css con prefijo:
autoprefixer unprefixed.css --output prefixed.css
Siempre desea que el CSS que implementa en sus sitios se reduzca al tamaño más pequeño posible. Para lograrlo puedes utilizar técnicas de optimización de:
Stylus, Ruby Sass y node-sass tienen la capacidad de comprimir su CSS durante la compilación.
En Stylus, incluye el --comprimir bandera:
lápiz --comprimir < source_file.scss > archivo_compilado.css
En Ruby Sass incluir el --estilo bandera, seguido de comprimido:
sass source_file.scss compiled_file.css - estilo comprimido
En node-sass agregar el --estilo de salida bandera seguida de comprimido:
node-sass - estilo de salida comprimido fuente_archivo.scss compiled_file.css
Si no está utilizando preprocesadores de CSS, o simplemente desea la máxima optimización de código, puede usar el paquete clean-css que pondrá sus archivos CSS en procesos de compresión más profundos.
Los procesos de compresión regulares generalmente solo eliminan los espacios en blanco y los comentarios de su CSS. El paquete clean-css por otro lado también puede hacer cosas como:
La combinación de selectores duplicados puede ser útil, por ejemplo, si desea tener todo el diseño de una clase determinada inicialmente en un archivo "layout.css", mientras que la coloración de la misma clase está inicialmente en un "colors.css".
Redondear números es excelente cuando has usado una función de preprocesador para convertir un valor en unidades rem y terminas con algo así como 2.3649858573rem. Con clean-css, ese número se redondearía a dos lugares decimales, llevándolo a un valor mucho más ordenado de 2.36rem.
Puede leer más sobre clean-css en: https://github.com/jakubpawlowicz/clean-css
Instala clean-css globalmente con el comando:
[sudo] npm install clean-css -g
Para limpiar un archivo CSS use:
cleancss style.css
Nota: A pesar de que el nombre del paquete "clean-css" tiene un guión, asegúrese de usar limpios sin Un guión para iniciar tus comandos..
Para especificar un nuevo nombre de archivo para que clean-css genere use el -o indicador seguido del nuevo nombre de archivo, antes del nombre del archivo al que se dirige:
cleancss -o clean.css style.css
Hay varias otras opciones de comando disponibles para clean-css, que puede leer en: Cómo usar Clean CSS CLI.
Jade es un lenguaje asombroso que se compila en HTML y le permite escribir su código en taquigrafía para que el desarrollo sea mucho más rápido y crear sus propios sistemas de plantillas para que pueda ahorrarse en el código de reescritura.
Lea más sobre Jade en: https://www.npmjs.com/package/jade
Para instalar Jade globalmente ejecuta el comando:
[sudo] npm install jade -g
Jade, creado por la misma persona que Stylus, usa la misma sintaxis de comando básica de < y > Señales para compilar un archivo:
jade < index.jade > index.html
Este comando compilará "index.jade" en "index.html" en el mismo directorio.
Para compilar todos los archivos de Jade en un directorio determinado use:
jade dir_name
Para configurar el directorio en el que desea que se escriban sus archivos HTML para colocar el --afuera Bandera entre el nombre de los directorios de entrada y salida:
jade src_dir --out html_dir
Para usar de jade reloj Función de compilación automática al guardar, pasar el --reloj bandera justo después del comando de jade.
Para archivos individuales:
jade - reloj < index.jade > index.html
O para directorios completos:
jade --watch dir_name
jade --watch dir_name --out html_dir
Así como queremos que se optimicen los archivos CSS que implementamos, también queremos entregar nuestros archivos JavaScript de la manera más eficiente posible.
Es común que tengamos múltiples archivos JS en nuestros proyectos, como la necesidad de Modernizr, jQuery y nuestro propio código personalizado, por ejemplo, pero también queremos minimizar el número de solicitudes http que realizan nuestros sitios. Además, queremos garantizar que el tiempo de carga de nuestro JavaScript sea súper rápido..
La mejor manera de manejar ambos problemas es concatenar simultáneamente nuestros archivos JavaScript en un solo archivo, lo que significa que solo necesitaremos una solicitud http para cargarlo y minimizar el archivo resultante para que tenga el tamaño más pequeño posible..
Usaremos el paquete UglifyJS para encargarnos de este proceso.
Para instalar uglify-js ejecutado globalmente:
[sudo] npm install uglify-js -g
Para combinar dos archivos JavaScript, luego elimine los espacios en blanco y los comentarios del archivo resultante, use el uglifyjs comando seguido de los nombres de cada uno de sus archivos de origen con espacios en medio. Después de eso incluye el --salida la bandera y el nombre que desea que tenga su nuevo archivo combinado y minimizado:
uglifyjs input1.js input2.js --output input.min.js
Además de la eliminación predeterminada de espacios en blanco y comentarios, también puede agregar compresión que realmente modificará el código para reducir su tamaño. Para hacer esto agrega el --comprimir bandera al final del comando:
uglifyjs input1.js input2.js --output input.min.js --compress
Otra opción de optimización disponible es "destrozar" el código, que hará cosas como los nombres de variables, funciones y argumentos a partir de caracteres individuales. Para usar esta opción agrega el --mutilar bandera al final del comando:
uglifyjs input1.js input2.js --output input.min.js --mangle
También puedes usar tanto la compresión como la mutación pasando ambas banderas:
uglifyjs input1.js input2.js --output input.min.js --mangle --compress
Lea más sobre los comandos que puede ejecutar con UglifyJS en: https://www.npmjs.com/package/uglify-js
Si está combinando y / o minimizando scripts de terceros como jQuery, Modernizr, etc., asegúrese de usar las versiones expandidas completas de esos archivos. En general, es una mala idea volver a minimizar los archivos que ya se han minimizado, ya que puede romper su funcionalidad..
Puede identificar los archivos que ya se han minimizado, ya que normalmente seguirán la convención de nomenclatura de "name.min.js", mientras que la versión ampliada del archivo será "name.js".
Ahora sabe cómo completar algunas tareas increíblemente útiles con varios comandos, pero ¿qué sucedería si pudiera completar todas las tareas que su proyecto necesita al mismo tiempo con un solo comando??
En el siguiente tutorial, aprenderá a hacer exactamente eso, utilizando los ejecutores de tareas para configurar todas las tareas que su proyecto necesita, de modo que toda su compilación, revisión automática, combinación y optimización puedan realizarse al mismo tiempo y en solo unos segundos..
Te veré en el siguiente tutorial.!
Accentsconagua