Introdução ao Gulp 4

Gulp é uma ferramenta para automatizar tarefas que surgem frequentemente no desenvolvimento de sites: minificação de arquivos CSS e JavaScript, fusão de vários arquivos em um, conversão de LESS e SASS para CSS, conversão da linguagem TypeScript para JavaScript e tarefas semelhantes.

Seu princípio de operação é o seguinte: para o sistema Gulp, tarefas são escritas, e o Gulp executa essas tarefas em uma sequência especificada.

Vamos instalar o Gulp. Para isso, na linha de comando, execute o comando:

npm install --global gulp-cli

Agora, vamos criar um projeto onde o Gulp será usado. Para isso, na pasta do projeto, crie a seguinte estrutura de arquivos:

/src/
- /js/
  - script1.js
  - script2.js
  - script3.js
- /css/
  - styles1.css
  - styles2.css
- /img/
  - image1.png
  - image2.png
  - image3.png
- index.html

Também é necessário adicionar package.json à pasta do projeto. Depois disso, você pode instalar o Gulp no projeto. Para isso, na linha de comando, estando na pasta do projeto, execute o seguinte comando:

npm install --save-dev gulp

Crie um projeto e instale o Gulp nele.