Share
En el último tutorial analizamos cómo configurar un proyecto PostCSS con Gulp. En este tutorial lograremos los mismos fines, usando Grunt. Al final de este tutorial, sabrá cómo configurar un proyecto PostCSS + Grunt con cualquier selección de complementos que elija.
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..
Como trabajaremos con Grunt, asumiremos que ya tiene instalados los requisitos previos para su uso:
Si no está seguro de tener estos instalados, siga el tutorial La línea de comandos para el diseño web: control de paquetes de terceros.
Asegúrese de tener Grunt CLI instalado globalmente y entienda su uso básico siguiendo la línea de comandos para diseño web: Automatización con Grunt. Además, siga las instrucciones en la sección "Proyecto de configuración para Grunt" del tutorial. Antes de continuar, debe tener una carpeta de proyecto con:
En la carpeta de su proyecto, agregue dos subcarpetas, una llamada "src" y la otra llamada "dest". La carpeta "src" mantendrá sus archivos CSS sin procesar, y PostCSS escribirá sus archivos CSS compilados en la carpeta "dest".
Lo siguiente que deberá hacer es instalar el complemento Grunt para PostCSS en su proyecto: usaremos grunt-postcss para manejar la compilación.
En un terminal / indicador de comando apuntado a su carpeta de proyecto, ejecute el comando:
npm instala grunt-postcss --save-dev
En este punto, la estructura de su proyecto debería verse así:
Abra su Gruntfile para editar y comience agregando el shell básico de código que todos los Gruntfiles requieren:
module.exports = function (grunt) ;
Dentro de eso, vamos a usar el grunt.loadNpmTasks () Función para cargar en nuestro gruñido-postcss plugin como tal:
Accentsconagua
module.exports = function (grunt) grunt.loadNpmTasks ('grunt-postcss'); ;Ahora estamos listos para comenzar a configurar la tarea Grunt que usaremos para ejecutar postcss. Primero, agregue el grunt.initConfig () función por encima de la línea que acabamos de añadir:
module.exports = function (grunt) grunt.initConfig (); grunt.loadNpmTasks ('grunt-postcss'); ;Dentro de eso, configura un objeto llamado postcss al igual que:
module.exports = function (grunt) grunt.initConfig (postcss: ); grunt.loadNpmTasks ('grunt-postcss'); ;Dentro de lo nuevo postcss objeto agregaremos dos objetos anidados más, uno llamado opciones y uno llamado dist:
module.exports = function (grunt) grunt.initConfig (postcss: options: , dist: ); grunt.loadNpmTasks ('grunt-postcss'); ;los opciones objeto mantendrá la configuración para PostCSS, y el dist El objeto tendrá información sobre dónde se deben leer nuestros archivos CSS. desde y escrito a.
Avance ahora y cree un archivo CSS llamado "style.css" en la carpeta "src" de su proyecto. Agregue un código de prueba, como:
.prueba fondo: negro;
Ahora actualiza el dist objeto para especificar "src / style.css" como nuestro archivo de origen, y "dest / style.css" como el archivo que queremos generar:
dist: src: 'src / style.css', dest: 'dest / style.css'
Luego, dentro de la opciones objeto, agregue una matriz vacía llamada procesadores. Aquí es donde configuraremos los complementos de PostCSS para su uso un poco más tarde. Por ahora, solo actualízalo a:
opciones: procesadores: [],
Tu básico postcss La tarea ya está lista. Para probarlo, con su terminal / indicador de comando aún apuntando a su carpeta de proyecto, ejecute el comando:
Grueso Postcss
En tu terminal deberías ver este mensaje:
Ejecutando la tarea "postcss: dist" (postcss) >> 1 hoja de estilo procesada creada.
Y ahora, en su carpeta "dest", debe encontrar un nuevo archivo "style.css", que contenga el mismo código que el archivo "style.css" en su carpeta "src".
A continuación, agregaremos una selección de complementos y paquetes PostCSS: Autoprefixer (agrega prefijo de proveedor), cssnext (habilita la sintaxis futura) y precss (se extiende con la funcionalidad de Sass).
Ejecute los siguientes comandos para instalar cada uno 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.
Ahora estamos listos para cargar cada uno de los complementos a través de procesadores matriz que creamos anteriormente. Actualice esa matriz a lo siguiente:
procesadores: [require ('autoprefixer') (), require ('cssnext') (), require ('precss') ()]Continuemos ahora, agregue un código de prueba a nuestro archivo fuente "style.css" y compruebe que nuestros complementos de PostCSS recién configurados están funcionando como se espera.
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 Grueso Postcss 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
Lo verás en el .autoprefixer clase, los prefijos de proveedores han sido agregados por Autoprefixer. En el .csssiguiente clase, una rgba () el color ha sido generado por csssiguiente. Y finalmente en el .precss clase, la @if @else condicional ha sido evaluado por PreCSS.
Tenga en cuenta que si desea configurar opciones para un complemento, pase sus opciones a través del segundo par de corchetes después de exigir() Función para ese plugin. Por ejemplo, puede especificar la lista de navegadores en la que desea que funcione Autoprefixer, así:
procesadores: [require ('autoprefixer') (browsers: ['last 1 version']), require ('cssnext') (), require ('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.
En resumen de todo lo expuesto anteriormente:
grunt.loadNpmTasks ('grunt-postcss'); opciones objeto que contiene un procesadores formacióndist Objeto que especifica sus archivos de origen y el destino de los archivos compiladosA partir de ahí, puede seguir los mismos pasos esenciales para habilitar cualquier complemento de PostCSS en su proyecto:
npm instalar --save-dev preprocesadores array utilizando la función require ()exigir('') () .Echa un vistazo al repositorio de Github para ver los archivos de inicio y los ejemplos completados..
Ahora sabe cómo usar Gulp o Grunt para usar PostCSS con cualquier complemento que elija. Lo siguiente que necesita es una manera de explorar el ecosistema de complementos de PostCSS y encontrar excelentes complementos que sean perfectos para el tipo de proyectos que desea crear..
Veremos exactamente cómo puede hacerlo en el siguiente tutorial; “Guía de inicio rápido: explorando complementos”.
