Share
En el último tutorial explicamos cómo puede comenzar a usar PostCSS al instante con CodePen o Prepros. Estas opciones son excelentes, pero son restrictivas porque no puede controlar qué complementos están disponibles para su uso..
En este tutorial veremos cómo puede usar PostCSS con el ejecutor de tareas Gulp, permitiéndole decidir por sí mismo qué complementos desea utilizar y, por lo tanto, aprovechar el ecosistema de complementos..
Nota: Si nunca ha trabajado con la línea de comandos o los corredores de tareas, le recomiendo que antes de comenzar este tutorial, consulte nuestra serie gratuita: La línea de comandos para el diseño web..
Dado que trabajaremos con Gulp, asumiremos que ya tiene instalados los requisitos previos para su uso:
Si no está seguro de tenerlos instalados, siga el tutorial La línea de comandos para el diseño web: control de paquetes de terceros, ya que le ayudará a implementar estos requisitos previos..
Asegúrese también de comprender los conceptos básicos del uso de Gulp siguiendo el tutorial La línea de comandos para el diseño web: Automatización con Gulp. Además, siga las instrucciones en la sección "Proyecto de configuración para Gulp" del tutorial. Antes de continuar, debe tener una carpeta de proyecto con:
Dentro de la carpeta de su proyecto, cree dos subcarpetas, una llamada "src" y otra llamada "dest". La carpeta "src" mantendrá sus archivos CSS sin procesar, mientras que la carpeta "dest" tendrá sus archivos procesados PostCSS escritos en ella.
Lo siguiente que deberá hacer es instalar el complemento gulp-postcss en su proyecto: lo usaremos para manejar nuestro procesamiento PostCSS.
En un terminal / indicador de comando apuntado a su carpeta de proyecto, ejecute el comando:
npm install --save-dev gulp-postcss
Una vez completada la instalación, la estructura de su proyecto debe tener este aspecto:
Ahora abra su Gulpfile para editar y cree variables para llamar a los módulos "gulp" y "gulp-postcss" agregando el siguiente código:
Accentsconagua
var gulp = require ('gulp'); var postcss = require ('gulp-postcss');Ahora podemos configurar una tarea para leer un archivo CSS de origen y procesarlo a través de PostCSS.
Agregue lo siguiente:
gulp.task ('css', function () var processors = []; devolver gulp.src ('./ src / *. css') .pipe (postcss (processors)) .pipe (gulp.dest ('. / dest ')););Vamos a desglosar lo que tenemos en el código de arriba..
En la primera línea hemos configurado una tarea trillada llamada css. Esta tarea ejecuta una función, y dentro de esa función hemos creado una matriz llamada procesadores. En este momento, la matriz está vacía, pero en un momento la rellenaremos con los complementos de PostCSS que queremos usar.
Después de la procesadores array hemos especificado los archivos que queremos segmentar para su procesamiento: cualquier archivo CSS en la carpeta "src".
En la primera de las dos líneas utilizando la tubo() función, estamos configurando PostCSS para ejecutar a través de la función postcss (). Como argumento a través de esa función estamos pasando nuestra procesadores array, que, más adelante, le dirá a PostCSS qué complementos queremos utilizar.
Finalmente, con el segundo de los dos. tubo() funciones, tenemos nuestro código procesado escrito en un nuevo archivo CSS en nuestra carpeta "dest".
Continúe y cree un nuevo archivo "style.css" en su carpeta "src" y agregue algunos CSS de prueba como:
.prueba fondo: negro;
Ahora en su terminal / indicador de comando, aún apuntando a su carpeta de proyecto, ejecute el comando:
trago css
Esto ejecutará la tarea que acaba de configurar, y como resultado, ahora debería encontrar un nuevo archivo "style.css" dentro de su carpeta "dest".
Cuando abra este nuevo archivo, verá un código idéntico al de su archivo fuente. El código no ha cambiado porque aún no hemos utilizado ningún complemento de PostCSS, y como sabrás en un tutorial anterior, son los complementos los que realizan las manipulaciones reales de CSS.
Ahora agregaremos una selección de complementos y paquetes PostCSS: Autoprefixer (agrega prefijos de proveedores), cssnext (habilita la sintaxis futura) y precss (se extiende con la funcionalidad similar a Sass).
Ejecute los siguientes comandos para instalar cada complemento en su proyecto:
npm install autoprefixer --save-dev npm install cssnext --save-dev npm install precss --save-dev
Nota: Los csssiguiente y precss Las instalaciones pueden tardar un poco, ya que son paquetes de varios complementos.
A continuación definiremos las variables para cargar en cada una de ellas en nuestro proyecto. Agregue el siguiente código debajo de las dos variables existentes en la parte superior de su Gulpfile:
var autoprefixer = require ('autoprefixer'); var cssnext = require ('cssnext'); var precss = require ('precss');Luego agregaremos estos tres plugins a la procesadores matriz en nuestra tarea trilla. Actualice la matriz a lo siguiente:
procesadores var = [autoprefixer, cssnext, precss];
Con los tres complementos agregados a nuestra matriz de procesadores, PostCSS sabrá que deseamos aplicar cada uno a nuestra fuente CSS.
Ahora estamos listos para agregar un código de prueba a nuestro archivo "src / style.css" y verificar que todo esté funcionando. Borre lo que ya tiene en el archivo y agregue este CSS en su lugar:
/ * Probar autoprefixer * / .autoprefixer display: flex; / * Prueba de csssiguiente * / .cssnext fondo: color (rojo alfa (-10%)); / * Prueba precss * / .precss @if 3 < 5 background: green; @else background: blue;
Ejecutar el trago css Coméntelo de nuevo ahora, y el archivo resultante en su carpeta "dest" debe tener el siguiente contenido:
/ * Probando autoprefixer * / .autoprefixer display: -webkit-box; pantalla: -webkit-flex; pantalla: -ms-flexbox; pantalla: flexión; / * Prueba de csssiguiente * / .cssnext fondo: rgba (255, 0, 0, 0.9); / * Prueba de precss * / .precss background: green
De acuerdo con lo anterior, debería ver que los prefijos de proveedores se agregaron a la primera clase por Autoprefixer, un rgba () el color ha sido emitido por cssnext en la segunda clase, y el @if @else cheque ha sido evaluado por PreCSS en la tercera clase.
Nota: si desea configurar las opciones para un complemento, agregue un par de corchetes después de su nombre en la matriz de preprocesadores y pase las opciones allí. Por ejemplo, puede especificar la lista de navegadores en la que desea que funcione Autoprefixer, así:
procesadores var = [autoprefixer (browsers: ['last 1 version']), cssnext, precss];
La belleza de PostCSS está en su capacidad de configurarse con cualquier combinación de complementos. Sin embargo, el desafío que esto presenta es garantizar que otras personas que deseen trabajar en un proyecto tengan la misma configuración de los complementos de PostCSS. Gracias a npm, este desafío se maneja a través de su sistema de gestión de dependencias..
Porque estás usando el --save-dev Cada vez que instale un complemento en su proyecto, se agregará a su archivo "project.json" como una dependencia de desarrollo. Esto significa que si desea compartir su proyecto con otros, ellos pueden ejecutar el comando npm instalar en el paquete que compartes con ellos y tienes todos los mismos complementos instalados automáticamente.
Para obtener más información sobre cómo funciona la administración de dependencias con NPM, consulte el tutorial La línea de comandos para el diseño web: control de paquetes de terceros.
Para resumir lo anterior:
procesadores formaciónpostcss () función, con la procesadores matriz pasada como un argumentoA partir de ahí, puede seguir los mismos pasos esenciales para habilitar cualquier complemento de PostCSS en su proyecto:
npm instalar --save-dev var autoprefixer = require ('autoprefixer'); preprocesadores formación.Echa un vistazo al repositorio de Github para ver los archivos de inicio y los ejemplos completados..
En el siguiente tutorial, veremos cómo configurar un proyecto PostCSS en el otro de los dos grandes ejecutores de tareas: Grunt. Te veo allí!
