PostCSS

Buen día queridos Invencers el día de hoy tenemos un tema muy relacionado con los preprocesadores CSS que hemos visto últimamente y es que ademas de estos existe PostCSS que es una herramienta para transformar código CSS mediante plugins de JavaScript sin más preámbulo comencemos.

¿Qué es PostCSS?

PostCSS es una herramienta que te ayuda a transformar los estilos CSS mediante plugins de JavaScript transformándolo primero en un formato de datos (árbol CSS) el cual puede ser más manipulado fácilmente mediante JavaScript.
Actualmente existe más de 2000 plugins que te ayudan a hacer todo lo que tu quieras y optimizar el código CSS

Es importante recalcar que no es un preprocesador aunque pueda actuar como uno tiene muchas más funcionalidades gracias a sus plugins también y aunque tenga el prefijo Post no es es un postprocesador

Plugins para PostCSS

Siempre que sepas escribir código en JavaScript, puedes crear plugins para PostCSS. Esta es una cualidad muy interesante porque permite a la comunidad nutrirse de innumerables plugins.
En github Stack Overflow hay infinidad de plugins para trabajar con PostCSS que invitan a utilizar esta herramienta.

Configuraciones Gulp

Primordialmente necesitaremos tener instalados:

  • NodeJS
  • NPM
  • Git

Para la instalación de Gulp necesitaremos realizar este comando:

 npm install -g -gulp 

Ahora seguiremos estos pasos parar crear nuestro proyecto con PostCSS

  1. Crear y nombrar la carpeta del proyecto.
  2. Agregar el archivo package.json.
npm init

3. Instalar Gulp Package en la carpeta de nuestro proyecto.

npm install gulp --save-dev

4. Agregar gulpfile.js al directorio raíz de tu proyecto.
5. Crear dos carpetas en nuestro directorio raíz:
-src
-dist
6. Configuración básica de Gulp PostCSS

npm install --save-dev gulp-postcss

7. Editamos el archivo gulpfile.js
8. Creación de archivo style.css dentro de la carpeta src.

Referencias

PensandoEnWeb

Openwebinars

Devcode

Comparte este Post
  • 2
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    2
    Shares

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *