Gulp - Conceptos básicos

En este capítulo, se familiarizará con algunos conceptos básicos relacionados con Gulp.

¿Qué es un sistema de compilación?

Un sistema de compilación se conoce como una colección de tareas (denominada colectivamente como task runners), que automatizan el trabajo repetitivo.

A continuación se muestra una lista de algunas de las tareas que se pueden manejar con el sistema de compilación:

  • Compilación de preprocesos CSS y JavaScript.
  • Minificación de archivos para reducir su tamaño.
  • Concatenación de archivos en uno.
  • Activación del servidor para recarga automática.
  • Creación de compilaciones de implementación para almacenar los archivos resultantes en una ubicación.

En el flujo de trabajo de front-end moderno, el sistema de compilación funciona con 3 componentes:

  • Administradores de paquetes
  • Preprocessors
  • Corredores de tareas y herramientas de compilación

Gestores de paquetes

Se utiliza para automatizar la actualización de la instalación, la eliminación de las dependencias necesarias, las bibliotecas limpias y los paquetes utilizados en el entorno de desarrollo. Ejemplos de administradores de paquetes sonbower y npm.

Preprocesadores

Los preprocesadores son muy útiles para un flujo de trabajo moderno eficiente al agregar una sintaxis optimizada y características adicionales que se compilan en su idioma nativo.

Algunos de los preprocesadores populares son:

  • CSS - SASS, LESS y Stylus.

  • JS - CoffeeScript, LiveScript, TypeScript, etc.

  • HTML - Markdown, HAML, Slim, Jade, etc.

Corredores de tareas

Los ejecutores de tareas automatizan tareas como la conversión de SASS a CSS, minimizan los archivos, optimizan las imágenes y muchas otras tareas que se utilizan en el flujo de trabajo de desarrollo. Gulp es uno de los ejecutores de tareas en el entorno de trabajo de front-end moderno y se ejecuta en Node.

Configuración de su proyecto

Para configurar su proyecto en su computadora, cree una carpeta llamada "trabajo", por ejemplo. La carpeta de trabajo contiene las siguientes subcarpetas y archivos:

  • Src - Ubicación de carpetas y archivos de origen HTML preprocesados.

    • Images - Contiene imágenes sin comprimir.

    • Scripts - Contiene varios archivos de script preprocesados.

    • Styles - Contiene varios archivos CSS preprocesados.

  • Build - Esta carpeta se creará automáticamente que contiene los archivos de producción.

    • Images - Contiene imágenes comprimidas.

    • Scripts - Archivo de script único que contiene códigos minimizados.

    • Styles - Archivo CSS único que contiene códigos minimizados.

  • gulpfile.js - Es el archivo de configuración, que se utiliza para definir nuestras tareas.