Cómo minimizar tu CSS con gulp

En este artículo, voy a mostrar una forma sencilla de minimizar automáticamente sus archivos CSS usando gulp. ?

Para empezar, ¿qué es gulp?

Gulp es un ejecutor de tareas de JavaScript que le permite automatizar tareas como ...

  • Agrupación y minimización de bibliotecas y hojas de estilo.
  • Actualizar su navegador cuando guarda un archivo.
  • Pruebas unitarias de ejecución rápida.
  • Ejecución de análisis de código.
  • Compilación Less / Sass to CSS.
  • ¡Y mucho más!

El flujo de trabajo de gulp funciona de la siguiente manera:

Podemos crear tareas que nos gustaría cumplir. En estas tareas cargamos archivos en los que queremos que trabaje gulp (modificándolos o no), luego los devolvemos a alguna carpeta de retorno.

Es simple.

En este pequeño tutorial, te enseñaré cómo crear una tarea para minimizar todos los archivos CSS de tu carpeta. Luego coloque los minificados en otra carpeta.

Empecemos

Para este tutorial, asegúrese de tener la última versión del paquete npm instalada en su máquina. Si no lo tiene, puede descargarlo aquí .

Una vez que tenga npm instalado, en el directorio base de su proyecto instalaremos gulp usando estos comandos:

npm install gulp-cli -g

npm install gulp -D

También usaremos un complemento de gulp para minimizar CSS llamado gulp-clean-css , así que instálelo en el tipo de proyecto:

npm install gulp-clean-css --save-dev

Muy bien, ahora con las dependencias instaladas en el proyecto, creemos un archivo llamado Gulpfile.js . Este archivo será el responsable de nuestras tareas.

También crearemos dos carpetas en este repositorio. Uno se llamará estilos donde permanecerán nuestros archivos de estilo, y otro se llamará dist, donde irán los archivos minificados.

Al final, nuestro proyecto tendrá esta estructura:

En Gulpfile.js

Al principio del archivo, hacemos las llamadas de los paquetes que usaremos.

Con los paquetes llamados, crearemos la tarea responsable minificando nuestros archivos.

Quizás se esté preguntando: ¿ya puede minificar sus archivos? Sí, ejecutando el comando gulp en la terminal seguido del nombre de la tarea.

Pero ejecutar este comando todo el tiempo es un poco molesto, ¿no? Podemos crear un método para observar cambios en los archivos de la carpeta de estilos.

De esta manera, ejecutar el comando gulp esperará cambios en los archivos seleccionados para activar la tarea minify-css.

Conclusión

Esta es solo una pequeña forma en que gulp puede ayudarnos en el desarrollo de nuestras aplicaciones.

Puede encontrar el código para este proyecto en este repositorio en GitHub.

Gracias por leer, no dude en hacerlo. y ayudar a otros a encontrarlo.

Te veo pronto. ?

Referencias

gulp.js

Al preferir el código a la configuración, las mejores prácticas de los nodos y una superficie API mínima, gulp simplifica las cosas como… gulpjs.com gulp-clean-css

Minimice css con clean-css. www.npmjs.com