Este repositorio es un ejemplo de cómo juntar distintas herramientas usadas para la programación web de front-end, basado en la presentación de @ManzDev. Se trata de una implementación cercana al ecosistema Gulp de esta diapositiva.
La tarea de Gulp build realiza distintas transformaciones a nuestro código. A continuación se enumeran los plugins que se usan.
gulp-pug: Convierte pug.js a HTML.gulp-ga: Añade el código de Google Analitycs al fichero HTML.gulp-htmlmin: Minifica los ficheros.
gulp-less: Convierte less a CSS.gulp-postcss: Procesa CSS mediante varios plugins.autoprefixer: Plugin para PostCSS que añade los profejios de los navegadores.cssnano: Plugin para PostCSS que realiza distintas optimizaciones a nuestro código.postcss-csscomb: Plugin para PostCSS que formatea el estilo de código.gulp-cleancss: Minifica los ficheros.
gulp-webpack: Llama a Webpack desde el gulpfile.- Webpack nos permite requerir módulos de npm que luego se incluirán en el fichero final.
babel-loader: Plugin para Webpack que usa babel para transpilar nuestro código a ES5.
gulp-image: Transforma nuestras imágenes para que ocupen menos espacio.
clean: Elimina el directoriodistlint: Pasa el lint a los scripts y las hojas de estilo, usandostandardylesshintrespectivamente.serve: Abre un servidor usandobrowser-syncpara la actualización automática del navegador cuando se guarden los ficheros.deploy: Despliega el contenido del directoriodisten las Github Pagesall: Limpia el repo, construye la página y la despliega en Github Pages.
Se usa Gulp 4, por lo que se recomienda usarlo a través de las tareas npm start y npm run build para no tener que instalarlo de forma global.