Agora é hora de passar para a segunda parte do exercício Gulp.
Continuaremos fazendo etapas semelhantes às que fizemos na
segunda parte do exercício de script NPM e no exercício atual.
Então, vamos organizar para excluir a pasta de distribuição e, em seguida, copiar as fontes e,
em seguida, reconstruir a pasta de distribuição,
usando módulos de nó semelhantes
como o que usamos para Grant e também os scripts NPM.
Nosso próximo passo é configurar as tarefas para excluir
a pasta de distribuição e também copiar as fontes para a pasta de distribuição.
Então vamos configurar alguns módulos de nó.
O primeiro que vamos configurar é chamado del.
Este modelo de nó permite excluir uma pasta.
E vamos em frente e configurar as tarefas Gulp.
Com Gulp, felizmente, não precisamos instalar outro módulo para copiar
porque os fluxos Gulp nos permitem fazer a cópia dos arquivos com pouco esforço.
Indo para o arquivo Gulp,
Eu vou apresentar o módulo Gulp misto,
que eu vou dizer, del.
E, em seguida, exigir o módulo del aqui.
Então, uma vez que exigimos o módulo del lá,
podemos ir em frente e configurar as tarefas.
Então, vamos configurar primeiro a tarefa limpa aqui.
Então, logo após a tarefa padrão,
vou configurar a tarefa limpa.
Então eu vou dizer, tarefa Gulp limpa.
E como você pode ver,
isso é configurado como a função lá.
E dentro que nós diríamos, retorno del.
E, em seguida, o parâmetro fornecido é a pasta de distribuição aqui.
Então isso irá configurar a tarefa limpa.
E uma vez que esta tarefa é executada,
em seguida, a pasta de distribuição será excluída.
Nossa próxima tarefa é copiar as fontes em sua pasta de distribuição.
Então, eu diria, copie fontes.
E como você pode ver,
nós configuramos a função lá e, em seguida, fechamos a função.
E então aqui, eu simplesmente diria,
fonte Gulp e
módulos de nó, fonte impressionante, fontes.
Você pode me ver usando os padrões de globbing, bem ali.
E então, uma vez que selecionamos todos os arquivos de origem,
nós apenas os canalizamos para o arquivo de destino.
Então, você percebe que não precisamos de
um módulo específico para organizar a cópia dos arquivos.
Nós simplesmente usamos os fluxos de origem e destino Gulp para ser capaz de
canalizar os arquivos do local de origem para o local de destino.
Então, esses dois irá configurar a tarefa de limpar e copiar fontes.
Em seguida, vamos configurar o módulo NPM para a tarefa imagemin.
Assim, o tamanho e a compressão das imagens.
Então, para fazer isso, adicione o prompt digite Gulp imagemin.
Este é o plugin Gulp correspondente ao módulo do nó imagemin.
Então nós instalamos como Gulp plugin,
que também é módulo nó.
Assim que a instalação estiver concluída,
vamos configurar essa tarefa imagemin.
Indo para o nosso arquivo Gulp,
vamos configurar a tarefa imagemin aqui.
Então vamos configurar a tarefa imagemin como função.
Como você pode ver, a estruturação do código para
a definição de tarefa Gulp é praticamente padrão.
Então, você diria fonte Gulp.
Nós especificamos os arquivos de origem lá e os arquivos de origem
na pasta de imagem os
arquivos JPG, GIF e PNG de lá.
E, em seguida, canalizá-los através da tarefa imagemin.
E então eu vou configurar alguns parâmetros aqui.
Então, vou configurar
o nível de otimizações para três, progressivo como verdadeiro.
Então, isso os transformará em imagens progressivas e entrelaçadas.
Então, uma vez que isso é configurado,
então o próximo passo é canalizá-los para o seu destino.
E o destino aqui, como você pode ver, é a pasta de imagens na pasta de distribuição.
Então, com isso, a tarefa imagemin agora está configurada.
Agora, vamos construir a tarefa de construção aqui.
Então, deixe-me configurar a tarefa de construção.
Assim, para construir a tarefa,
o que você gostaria de fazer é
executar primeiro a tarefa limpa antes que
as tarefas restantes sejam executadas
porque queremos primeiro limpar a pasta de distribuição.
E isso tem que ser concluído antes que as tarefas restantes sejam feitas.
Com Gulp, as tarefas são executadas em paralelo automaticamente.
E assim pode acontecer que,
se você executar a tarefa limpa em paralelo com a tarefa restante,
a tarefa limpa pode acabar terminando mais tarde e,
em seguida, excluindo parte do trabalho que foi feito pelas tarefas restantes.
Então, é por isso que quando você especifica a tarefa Gulp,
se você especificar clean como o primeiro em,
como o segundo parâmetro aqui,
então isso significa que essa tarefa será concluída primeiro.
E então as tarefas restantes serão executadas.
Então, eu diria que o Gulp começa.
Com o início Gulp,
todas as tarefas que especificamos aqui serão executadas em paralelo.
Então, eu vou executar a tarefa de copiar fontes e também a tarefa imagemin juntos.
Mais tarde, vamos configurar a tarefa usemin e, em seguida,
executar isso também juntamente com as fontes de cópia e imagemin.
Uma última coisa que eu preciso adicionar antes de irmos em frente e executar
as tarefas é subir aqui e, em seguida, exigir a imagemin.
Eu diria que imagemin requer Imagemin Gulp.
E, em seguida, salve as alterações.
Vamos agora ir em frente e verificar a tarefa de compilação.
No prompt, se o seu tipo Gulp construir,
então ele deve realizar todas as três tarefas.
Assim, você verá que ele inicia a tarefa limpa e
conclui e, em seguida, ele inicia a tarefa de compilação real.
Então, você pode ver que especificando
a limpeza deve ser concluída antes que a compilação real aconteça,
então você certifique-se de que você primeiro limpar a pasta de distribuição, em
seguida, a tarefa de compilação que compreende as fontes
de cópia e a imagemin, todos eles completando em paralelo serão executados depois disso.
Indo para o editor,
você verá que na pasta de distribuição,
vemos que as fontes foram copiadas e as imagens foram copiadas corretamente.
A última etapa é definir a tarefa usemin para construir a pasta de distribuição.
Para configurar eles usemin tarefa,
Eu vou instalar alguns plugins Gulp para que eu diria NPM instalar.
E então eu iria instalar o plugin de arquivo Gulp feio,
que obviamente também é um módulo de nó.
E então vou instalar o módulo do nó usemin e, em seguida, o módulo do nó rev.
O módulo de nó Gulp rev é como o plugin de concessão de rev gráfico de arquivo que vimos anteriormente.
É um pouco diferente do arquivo rev que vimos antes,
mas serve o mesmo propósito.
Então, Gulp rev, então eu vou configurar Gulp limpo CSS e, em seguida, Gulp flatmap.
Você verá a razão para isso como nós
configuramos nossa tarefa usemin, assim,
e gulp-html min e vamos em frente e instalar esses módulos aqui.
Uma vez que os módulos são instalados,
vamos em frente e exigir esses módulos em nosso gulpfile e, em seguida, configurar a tarefa usemin.
Indo para o nosso gulpfile bem no topo,
vou exigir os módulos que acabei de instalar.
Então, o gole feio feio.
Então, a tarefa feia, em seguida,
a tarefa usemin gulp usemin, em
seguida,
o reverendo em seguida,
esqueceu lá, vírgula lá.
Tenha muito cuidado para não perder essas vírgulas lá.
Então exigem gulp clean-css, depois flatmap, e htmlmin.
Então estes são os módulos gulp
que instalamos,
então vamos salvar as alterações e então vamos descer e configurar a tarefa usemin.
Chegando ao fundo do gulpfile,
bem ali vou configurar a tarefa Usemin.
Então, o que a tarefa Usemin faz?
Assim, a tarefa usemin leva
os arquivos htmle, em seguida, procura os blocos CSS e JavaScript nos arquivos
html, combina, concatena e minifies e nuglifies os arquivos e, em seguida,
substitui-los usando o arquivo concatenado na pasta de distribuição.
Então, para começar,
eu começaria primeiro especificando fonte gulp.
Então, onde estão os arquivos fonte?
Assim, os arquivos fonte são os arquivos htmlna pasta atual.
Então gole. /start.html, então eu vou
canalizar este gulpfiles através deste módulo gulp chamado como flatmap.
O que o flatmap faz?
Flatmap leva esses vários arquivos htmle, em seguida,
inicia pipelines paralelos para cada um desses arquivos html.
Cada um deles passando pelo mesmo conjunto de etapas e, finalmente,
convergindo e copiando para a pasta de destino.
Então, como você pode ver em nossa pasta atual,
temos contactus.html, aboutus.html e index.html.
Todos os três precisam ser processados.
Então, o mapa plano nos permite processar estes em paralelo,
iniciando o mesmo conjunto de pipe para cada um desses arquivos,
então é por isso que estou fazendo uso do mapa plano lá.
Então, flatmap e, em seguida, dentro do flatmap eu preciso especificar a função,
os dois parâmetros; fluxo, arquivo.
Então, o arquivo basicamente leva cada um desses arquivos de origem que nós especificamos lá,
e então os trata para o mesmo conjunto de funções aqui,
e então inicia seu fluxo separado para cada um deles.
Então, eu vou retornar fluxo,
e então eu vou canalizar cada um destes
através da tarefa usemin que em si,
compreende do css
e feio JavaScript e html tarefa.
Então, para o css, eu vou executar a parte de revisão.
Então, a parte css obviamente fará a concatenação e minificação e assim por diante,
e então aplica o rev para que ele atue
essa string de 20 bits para o arquivo main.css lá.
Então, para css eu configurei isso,
e então para html,
porque eu tenho vários arquivos html,
eu preciso especificar isso como uma função,
e dentro desta função eu diria retorno htmlmin.
E, em seguida, dentro lá eu vou dar-lhe parâmetro CollapseWhitespace,
e esse parâmetro seria definido como true.
E assim isso essencialmente completa a parte html dele.
E então a próxima é a parte js dela,
a parte JavaScript dela,
que eu preciso fazer o feio e, em seguida, a revisão para ele.
E então, se eu tiver
qualquer código javascript embutido, então eu preciso aplicar
a tarefa feia para isso,
e então para o código inlinecss,
eu usarei a tarefa CleanCSS lá com concat como o parâmetro lá.
Então, com isso, eu configurei minha tarefa de usemin.
Por isso, irá atender a todas essas diferentes ações em meu nome.
E, em seguida, uma vez que eles são feitos finalmente,
os fluxos resultantes serão
canalizados para a pasta de distribuição.
Então, com isso, a tarefa usemin agora é toda configuração definida.
Deixe-me salvar as alterações.
E então eu vou descer para a tarefa de construção e, em seguida, depois imagemin eu vou também
adicionar usemin como uma das tarefas a serem executadas pela tarefa de compilação.
Então, com essas alterações, então,
modificamos a tarefa de compilação,
vamos em frente e, em seguida, verificar se a pasta de distribuição é construída corretamente ou não.
Indo para o prompt, deixe-me digitar
compilação gulp e, em seguida, esperar por gole para construir todas as tarefas diferentes.
Levará um pouco de tempo para que o usemin conclua seu trabalho,
e quando terminar a transformação,
então minha pasta de distribuição deve estar pronta para ser visualizada.
Indo para o editor agora você pode ver que a pasta de distribuição foi
preparada aqui e você pode ver o índice, contato e aboutus.htmlfile.
Você pode ver que quando você abre o arquivo index.html,
ele foi compactado.
E o htmlmin foi feito,
em particular note como o arquivo css foi
substituído por css/main- e então você verá uma longa string there.css.
Então isso é exatamente como o arquivo rev que você viu em grunhido com o módulo gulp rev,
isso é o que ele faz com o nome do arquivo.
Então, se você olhar para o css você pode ver que o nome do arquivo é hífen principal e
, em seguida, alguma string lá dot css e semelhante para o javascriptfile.
Então, isso é o que o módulo gulp rev faz,
e então todos esses três arquivos são preparados.
Vamos dar uma olhada nesses arquivos no navegador.
Indo para o navegador eu posso ver que há arquivos de origem estão sendo salvos corretamente.
Deixe-me verificar a pasta de distribuição.
Então, na pasta de distribuição,
o index.html que foi preparado
pela tarefa de compilação gulp parece estar funcionando corretamente.
Deixe-me também verificar a página sobre,
e podemos ver que sobre página também é construído corretamente,
e também a página de contato.
Então agora você pode ver que nossa tarefa de gole está concluída.
Então, com isso, completamos este exercício.
Neste exercício, configuramos a limpeza e a
cópia dos arquivos de fonte para nossa pasta de distribuição,
fizemos a tarefa imagemin e, finalmente, configuramos
a tarefa usemin para construir nossa pasta de distribuição.
Com isso, completamos este exercício.
Este pode ser um bom momento para você fazer um bom comentário com a mensagem Gulp parte dois.