Agora que concedemos o suficiente,
é hora de Gulp.
Tentaremos executar o mesmo tipo de
tarefas que realizamos com Scripts NPM e Grunt,
mas agora vamos tentar fazer o mesmo usando Gulp e Gulp Plug-ins.
Para começar, vamos primeiro instalar Gulp como um módulo global.
Então, para fazer isso, no prompt,
digite npm -g install gulp,
isso irá instalar Gulp como um módulo global e
torná-lo disponível para uso na linha de comando.
Depois de concluirmos isso,
o próximo passo é instalar Gulp localmente em nosso projeto.
Então, para fazer isso, no prompt,
digite npm install gulp —save-dev.
Uma vez concluídos estes dois,
é hora de ir em frente e configurar nossas tarefas Gulp.
Antes de fazer isso, nosso próximo passo,
vamos instalar o plug-in Gulp Sass para que possamos
configurar o Sass para ver como tarefa de conversão em nosso arquivo Gulp.
Então, para ir em frente e fazer isso,
digite npm install
gulp sass —save-dev. Além
disso,
podemos também instalar o Browser Sync Gulp Task também,
para que possamos configurar ambos um após o outro.
Então, vou instalar, npm install browser-sync —save-dev.
Uma vez que esses dois estão instalados,
então vamos em frente e criar nosso arquivo Gulp e, em seguida, configurar nossas tarefas Gulp aqui.
Indo para a nossa pasta de projeto,
vamos criar um novo arquivo e,
em seguida, nomeá-lo gulpfile.js, e neste arquivo, vamos configurar nossas tarefas Gulp.
Então, uma vez que o gulpfile.js está pronto,
bem configurar as tarefas Gulp aqui primeiro começando
com 'use strict' e, em seguida, var gulp.
Então, precisamos exigir os módulos de nó gulp,
e também enquanto estamos nisso,
vamos exigir o módulo de nó sass.
Como mencionei no exercício anterior,
ficará mais claro para você por que o código é escrito assim,
uma vez que você entenda mais sobre módulos de nó em um curso posterior.
BrowserSync, então o que temos feito é incluir os
módulos de nó Gulp Contrast e BowserSync em nosso arquivo Gulp.
E uma vez que você tenha feito
isso, é hora de configurar nossas Tarefas Gulp.
Como aprendemos anteriormente,
Gulp é um código baseado na forma de configurar
tarefas ao contrário do Grunt que depende mais da configuração das tarefas.
Então, no caso de Gulp,
o bebê irá configurar nossas tarefas para digitar
gulp.task e, em seguida, vamos configurar um nome de tarefa 'sass',
e então para esta tarefa,
vamos configurar isso como uma função,
e é assim que o código é preparado.
Então, Gulp Tasks função Sass e aqui,
estamos configurando o Gulp Tasks,
então vamos digitar return gulp.src ('. /css/ *.scss') Como aprendemos,
Gulp é uma ferramenta baseada em código sobre configuração.
Então, vamos preparar esta tarefa como tal.
Então, você vê que temos especificado Gulp fonte pipe sass on,
e, em seguida, aqui, erro.
Então, se ocorrer um erro,
vamos usar a maneira Sass para registrar o erro e, em seguida, canalizar isso
através gulp.dest ('. /css '), e que
conclui a configuração das tarefas Gulp Sass.
Deve estar se perguntando por que escrevemos o código assim.
Diz fonte de gole e, em seguida, especificar algo lá,
e em seguida, o próximo diz tubo e, em seguida, o próximo diz tubo.
Vamos entender a maneira Gulp de fazer as coisas com um pouco mais de detalhes.
Para ajudar a explicar por que configuramos Tarefas como essa,
tenho uma explicação do que chamamos Gulp Streams.
A maneira como Gulp funciona é como você tomar um conjunto de arquivos e você especificar o conjunto
de arquivos, dizendo fonte gulp como fizemos com as tarefas Sass lá.
Então aqui, esta é a função que leva os arquivos.
Você pode até especificar os arquivos usando os padrões de globbing que aprendemos no Grunt,
e então ele cria um fluxo de objetos que representa esses arquivos.
Agora, uma vez que o fluxo é criado,
então o fluxo pode ser canalizado através de um conjunto de
funções uma após a outra, a fim de transformar esses arquivos.
E, finalmente, os arquivos transformados resultantes podem ser colocados em um local de destino.
Então é por isso que especificamos fonte Gulp,
então especificamos pipe.
Então, o tubo permite que o fluxo seja canalizado através de uma função,
e então, é por isso que dissemos pipe ponto,
e então dissemos gole.
E depois dissemos “insolência”.
E o próximo diz “Pipe Gulp Dest”.
E assim, o gulp dest especifica o destino dos arquivos que foram processados.
Então, é assim que uma tarefa típica é especificada em gulp porque mas gulp opera em fluxos.
Então, seus arquivos de fluxo através dos pipes até que eles
são transferidos e, em seguida, eles serão depositados no destino especificado.
Então, você vai ver estrutura semelhante para muitas das tarefas gulp que
iria configurar neste exercício e no próximo exercício.
Agora que você entendeu um pouco sobre como gulp funciona com fluxos e como
a tarefa gulp usa o pipe para processar arquivos através de um conjunto de funções,
e torna-se mais claro para você por que nós configuramos essa tarefa sass como visto neste código aqui.
A próxima tarefa que vamos configurar é chamado gulp,
e vamos configurar esta tarefa como sass watch.
Então, esta é uma tarefa de observação que estamos indo para configurar,
e então você iria especificar função.
E então aqui,
a tarefa de observação gole sass,
o que fazemos é especificar os arquivos que vamos estar assistindo.
Então, usamos a tarefa de observação gulp para assistir o arquivo.
Então, o relógio já está embutido em gole.
Então, ele vai levar gulp relógio e, em seguida, nós especificar os arquivos lá*.SCSS.
Então, como você pode ver, o relógio gulp irá assistir
esses arquivos e, em seguida, quando quaisquer alterações nesses arquivos ocorrerem,
em seguida, ele irá executar essa tarefa sass,
que nós especificamos anteriormente.
Então, é assim que essa tarefa de relógio é configurada.
Agora que fizemos esses dois,
vamos configurar essa tarefa de sincronização do navegador a seguir.
Então, feche isso com o ponto-e-vírgula e, em seguida, a
próxima tarefa que vamos configurar é a tarefa de sincronização do navegador.
Então, vou especificar tarefa de sincronização do navegador lá.
E, em seguida, para a tarefa de sincronização do navegador,
eu especificarei essa função.
Novamente, observe a estrutura em que escrevemos o código,
tarefa gulp e, em seguida, você especificar algo que seguiu, mas com uma função.
Agora, novamente, como eu disse,
nós aprendemos módulos de nó no último curso desta especialização,
ele vai se tornar mais claro para você por que não módulos escritos com esta estrutura,
e por que as funções são escritas assim.
Então, dizemos Gulp Task Browser sync.
Aqui, eu vou definir uma variável,
uma variável JavaScript chamada arquivos,
que não é nada mais do que na matriz,
e que dentro desses arquivos eu especificaria todos os arquivos que,
se modificado, a sincronização do navegador
precisa causar o recarregamento ou o arquivo.
Então, arquivos html, os arquivos CSS na pasta CSS
e, em seguida, da mesma forma, eu também observarei os arquivos de imagem,
e os arquivos JavaScript.
Todos esses arquivos se algum deles mudar.
Então, depois disso, vou configurar a sincronização do navegador aqui.
Então, vou dizer sincronização do navegador.
Nós já definimos essa variável chamada sincronização do navegador anteriormente.
Então, temos que inicializar a sincronização do navegador,
e assim, o primeiro parâmetro para isso
é os arquivos que precisarão ser observados,
e então o segundo parâmetro especifica as opções que estamos dando ao navegador.
Então, a opção que estou especificando é para o servidor.
Eu especificarei o diretório base como o diretório atual,
e então isso conclui a especificação da tarefa de sincronização do navegador.
Então, com isso, concluímos especificando a tarefa de sincronização do navegador aqui.
Então, você pode ver que como configuramos tarefa de sincronização do navegador,
nós especificamos os arquivos e,
em seguida, salvar sincronização do navegador nele e fornecer os arquivos como o primeiro parâmetro.
O segundo parâmetro são as opções para o plugin de sincronização do navegador.
Então, finalmente, vamos agendar ou
vamos configurar a tarefa chamada padrão.
Assim como eu tenho a tarefa padrão em Grunt,
nós também pode ter uma tarefa padrão semelhante definida para gulp.
Então, aqui dizemos gulp tarefa sincronização padrão do navegador
e, em seguida, especificar a função.
E lá dentro vamos especificar o começo do gole.
Então, isso especifica que eu deveria iniciar
essa outra tarefa que a tarefa de relógio sass. A tarefa de observação sass precisa ser iniciada.
Certifique-se de que a tarefa de sincronização do navegador está em execução antes que a tarefa de observação sass seja iniciada.
Então, esta é a sintaxe para especificar isso em gulp.
Então, com isso, configuramos tudo o que precisamos no arquivo gulp.
Então, novamente voltando,
há passos que fizemos.
Nós primeiro usado exigem para incluir todos os seus plugins gulp lá,
em seguida, configuramos a tarefa sass,
e, em seguida, especificado sass watch tarefa.
Este é o lugar onde usamos o relógio gulp que está disponível para nós como a partir de gole.
Em seguida, especificamos a tarefa de sincronização do navegador e, finalmente,
reprogramar a tarefa padrão com o navegador Sync e o gole começar com relógio sass.
Agora, vamos ver as alterações,
e então vamos em frente e executar o arquivo gulp add,
eo prompt tipo gulp.
Você verá que gulp inicia com a sincronização do navegador e a tarefa de exibição sass iniciando
e, em seguida, sua sincronização do navegador começará a servir os arquivos.
Se você visualizar seu site usando um navegador,
você poderá ver o site sendo disponibilizado no navegador.
Permitam-me também ilustrar o funcionamento da tarefa de vigilância.
Então, eu vou puxar o style.css e
apenas tentar salvar a alteração e você notará que, no lado esquerdo,
a tarefa sass é imediatamente invocada e ele
irá recompilar o arquivo style.scss nos arquivos CSS.
E então esse navegador vai recarregar neste ponto.
Com isso, completamos a primeira parte do exercício de gole.
Na segunda parte, vamos preparar a pasta de distribuição.
Este é um bom momento para você fazer um git-commit com a mensagem Gulp part 1.