Gulp - Básico

Neste capítulo, você vai se familiarizar com alguns princípios básicos relacionados ao Gulp.

O que é um Build System?

Um Build System é conhecido como coleção de tarefas (chamadas coletivamente como task runners), que automatizam o trabalho repetitivo.

A seguir está uma lista de algumas das tarefas que podem ser realizadas usando o sistema de compilação -

  • Compilação de CSS e JavaScript de pré-processamento.
  • Minificação de arquivos para reduzir seu tamanho.
  • Concatenação de arquivos em um.
  • Acionando o servidor para recarregamento automático.
  • Criação de compilações de implantação para armazenar os arquivos resultantes em um local.

No fluxo de trabalho front-end moderno, o sistema de compilação funciona com 3 componentes -

  • Gerenciadores de pacotes
  • Preprocessors
  • Executores de tarefas e ferramentas de construção

Gestores de Pacotes

É usado para automatizar a atualização da instalação, remoção das dependências necessárias, limpar bibliotecas e pacotes usados ​​no ambiente de desenvolvimento. Exemplos de gerenciadores de pacotes sãobower e npm.

Pré-processadores

Os pré-processadores são muito úteis para um fluxo de trabalho moderno e eficiente, adicionando uma sintaxe otimizada e recursos adicionais que compilam em seu idioma nativo.

Alguns dos pré-processadores populares são -

  • CSS - SASS, LESS e Stylus.

  • JS - CoffeeScript, LiveScript, TypeScript, etc.

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

Executores de tarefas

Os executores de tarefas automatizam tarefas como a conversão de SASS para CSS, reduzem os arquivos, otimizam imagens e muitas outras tarefas usadas no fluxo de trabalho de desenvolvimento. Gulp é um dos executores de tarefas no ambiente de trabalho front-end moderno e é executado no Node.

Configurando Seu Projeto

Para configurar seu projeto em seu computador, crie uma pasta chamada “trabalho” por exemplo. A pasta de trabalho contém as seguintes subpastas e arquivos -

  • Src - Localização de arquivos e pastas de origem HTML pré-processados.

    • Images - Contém imagens que não estão compactadas.

    • Scripts - Contém vários arquivos de script pré-processados.

    • Styles - Contém vários arquivos CSS pré-processados.

  • Build - Esta pasta será criada automaticamente contendo os arquivos de produção.

    • Images - Contém imagens compactadas.

    • Scripts - Arquivo de script único que contém códigos minificados.

    • Styles - Arquivo CSS único que contém códigos reduzidos.

  • gulpfile.js - É o arquivo de configuração, que é usado para definir nossas tarefas.