Vamos continuar com nossos grunhidos.
Como fizemos na segunda parte do exercício de scripts NPM,
nesta segunda parte desse exercício grunhido,
vamos configurar exatamente as mesmas tarefas.
Nós vamos fazer a limpeza da pasta de distribuição,
copiando as fontes para a pasta de distribuição,
então nós também vamos fazer a minificação de nossas imagens usando imagemin,
e, finalmente, usar a tarefa usemin para construir e preparar nossa pasta de distribuição.
Continuando com nosso exercício,
vou instalar um par de módulos grunhidos.
Então, vamos instalar o NPM, install-grunt-contrib-copy.
Isso é usado para copiar os arquivos e, em seguida, grunt-contrib-clean,
e menos save-dev.
E uma vez que esses dois são instalados,
então vamos em frente e configurar as tarefas correspondentes.
Indo para o seu arquivo grunhido,
adicionaremos a configuração para a cópia e as tarefas limpas.
Então, começando com a vírgula,
lembre-se sempre de não esquecer a vírgula.
Vai voltar a morder-te nos momentos errados se fizeres isso.
Então vamos configurar a tarefa de cópia.
Para a cópia, usemin espera que também
mantenhamos nossos arquivos HTML copiados para a pasta de distribuição para
que ele possa fazer a manipulação sobre isso.
Então, neste caso,
vamos primeiro copiar
os arquivos HTML da nossa pasta do projeto para a pasta de distribuição.
Então, para fazer a cópia,
eu vou configurar a parte HTML dele.
Então, este é o lugar onde vamos usar alguns
da sintaxe grunhido para especificar os arquivos que precisam ser copiados.
Então, eu digo arquivos e também especificar as
chaves direita, esquerda e direita lá para dentro disso,
eu preciso especificar agora determinada configuração.
Então, eu diria, expanda true e dot true, então CWD,
o diretório de trabalho atual é dot slash,
e depois disso,
vamos configurar o próximo que é SRC, os arquivos fonte,
e então os arquivos fonte são star.html,
todos os arquivos HTML,
e então nós vamos copiá-los para a pasta dist.
Então é por isso que o destino está definido para a pasta de distribuição aqui.
Então, com esta configuração,
minha tarefa de cópia irá copiar todos os arquivos HTML para a pasta de distribuição.
Agora, junto com isso, também precisamos copiar as fontes.
Então, vou configurar o segundo para as fontes.
Então, eu especificar fontes e, em seguida, aqui também eu preciso especificar
os arquivos que precisam ser copiados e assim dizemos arquivos,
e então esses são
alguns parâmetros de configuração que você precisa configurar para a tarefa de cópia.
Agora, se você precisa entender,
então, lendo a documentação para o plugin grunhido correspondente,
você será capaz de descobrir isso e assim ou você pode
simplesmente seguir o exemplo que eu estou dando aqui.
Então, dot true e, em seguida, CWD,
o diretório de trabalho atual é módulos de nó e fonte impressionante.
Então é daí que eu vou copiar os arquivos,
e então a fonte dos arquivos é o fontsstar.star,
esses são os arquivos que eu preciso copiar,
e o destino é a pasta de distribuição.
Então, com isso, eu configurei minha tarefa de cópia para copiar
os arquivos HTML e os arquivos de fontes na minha pasta de distribuição.
Agora, a próxima tarefa que vou configurar é a tarefa limpa.
Então, deixe-me configurar a tarefa limpa.
Para a tarefa limpa, configurarei a compilação
e, em seguida, direi que a fonte é a pasta de distribuição.
Então, essencialmente especificando que a pasta de distribuição deve ser limpa.
Então, agora nós configuramos a cópia e as tarefas limpas então vamos salvar as alterações.
A próxima tarefa que vou configurar é a tarefa imagemin.
Isto é o que vamos usar para comprimir e copiar as imagens para a pasta de distribuição.
Para começar com a tarefa imagemin, o primeiro passo,
instale o plugin grunhido correspondente.
Então, grunt-contrib-imagemin, menos save.dev.
E uma vez que está instalado,
então vamos em frente e configurar a tarefa imagemin correspondente.
Indo para o nosso arquivo grunhido após a configuração para a tarefa limpa,
eu vou configurar a tarefa imagemin.
Então, eu vou dizer imagemin,
e então bem ali,
eu vou especificar dinâmico,
e lá dentro eu vou especificar os arquivos para que você possa
ver que a especificação do arquivo seria semelhante.
Eu diria, expandir verdadeiro,
então CWD é o diretório atual.
Em seguida, a fonte dos arquivos é imagestar.
e, em seguida, entre colchetes, dentro de chaves,
eu especifico PNG, GIF e JPG.
Então, essencialmente, você pode ver o padrão global do arquivo aqui.
Então ele diz qualquer
arquivo PNG, GIF ou JPG que corresponde a este padrão e, em seguida,
iniciar ponto significando todos os arquivos desse padrão,
e fonte, e o destino,
eu defini como a pasta de distribuição.
Então, com isso, configuramos nossa
tarefa de cópia, limpeza e imagemin.
Vamos configurar uma tarefa aqui chamada compilação.
Então, eu diria, registrar tarefa, tarefa de registro
grunhido e, em seguida, eu vou nomear a tarefa como compilação,
e, em seguida, dentro disso,
vamos especificar as etapas de configuração a serem feitas pela tarefa de construção.
Então, bem ali, ponto-e-vírgula e aí dentro,
especificarei as três tarefas na sequência que devem ser executadas.
Primeiro, vou dizer, limpo.
Então, vamos limpar a pasta de distribuição
e, em seguida, começar a reconstruir a pasta de distribuição.
Limpo, então a próxima tarefa seria
copiar e depois disso eu faria, imagemin.
Então essas três tarefas a serem configuradas aqui.
Então, com isso, deixe-me salvar as alterações.
Vamos ver como essa coisa funciona.
Agora, indo para o prompt se eu digitar,
grunhir e construir, você verá que ele vai primeiro fazer a limpeza, em
seguida, fazer a cópia e fazer a tarefa imagemin.
Então, ele faz todos esses três e, em seguida, você veria imediatamente que
a pasta de distribuição é construída na minha pasta de projeto aqui.
E dentro da pasta de distribuição você pode ver que as fontes foram copiadas,
as imagens foram copiadas e
os três arquivos HTML foram copiados para a pasta de distribuição.
Você só está na metade do caminho.
Agora, precisamos ser capazes de processar esses arquivos usando o plugin usemin.
Então, vamos a isso em seguida.
Agora, vou instalar alguns módulos NPM
que são úteis para construir a pasta de distribuição.
Então, para fazer isso, eu diria instalar NPM.
Eu posso especificar um conjunto de módulos aqui para,
eu diria, grunt-contrib-concat.
Então, este é usado para concatenar arquivos, depois grunt-contrib-cssmin,
grunt-contrib-htmlmin, então digamos, grunt-contrib-uglify.
Então grunt-filerev.
Você verá a razão para usar filerev em um curto espaço de tempo,
e, em seguida, grunt-usemin, e salvar def e, em seguida,
instalar todos esses módulos grunhidos.
Uma vez que todos eles foram instalados,
o próximo passo é ir e configurar,
usemin tarefa que também usa
as tarefas cssmin Uglify Concat para realizar a construção da pasta de distribuição.
Agora, vamos prosseguir configurando a tarefa usemin.
Então, voltando para o arquivo grunhido após imagemin,
eu vou adicionar na próxima tarefa para usemin trabalhar com o grunhido.
A primeira tarefa que eu preciso configurar é chamada UseMinPrepare.
Esta tarefa UseMinPrepare irá preparar os arquivos e, em seguida, também configurar
o ConCache CSS min e Uglify e arquivo ref plugins,
para que eles possam fazer o seu trabalho corretamente.
Então, essa é a razão para o UseMinPrepare.
Então, é assim que o plugin de concessão usemin foi projetado.
Um pouco diferente da forma como o usemin que usamos com os scripts do jogo final wooks.
Então, no UseMinPrepare,
apenas algum nome aleatório que eu vou usar e, em seguida, dizer destino é dist.
E então eu especificaria a fonte como todos os arquivos html aqui.
Então eu diria contactus.html
, aboutus.html e index.html.
Então, todos esses três arquivos precisam ser processados.
A próxima parte desta configuração usemin, configuração
UseMinPrepare é onde eu especificar as opções.
Isso é algo que eu descobri por tentativa e erro.
Basta seguir ao longo dos degraus.
Então eu preciso configurar
algumas coisas aqui dentro onde eu preciso configurar algo chamado Flow.
E, em seguida, dentro lá eu preciso configurar outra parte chamada Passos,
e então aqui eu especificar os passos aqui e, em seguida, dizer cssmin,
e depois disso eu vou dizer js é feio.
Então, isso é algo que eu preciso especificar aqui e depois disso eu digo post,
e aqui eu posso permitir que isso forneça
algumas opções para suas tarefas específicas que eu configurei.
Então, eu estou fornecendo algumas opções adicionais para css.
Então, isso é fornecido dentro do post aqui.
Agora, novamente, é assim que a configuração tem que ser feita.
Então, nós apenas aprendemos olhando para a documentação lá.
Então, aqui dentro do post css,
eu especificaria um nome como cssmin.
Até agora isso aqui é tarefa cssmin.
Eu diria CreateConfig:
bloco de contexto de função, e, em seguida, dentro dessas funções
eu tenho que fornecer certos parâmetros.
Então, eu diria var
gerado gerador de opções de contexto.
Então esta é alguma variável JavaScript que eu preciso
especificar lá, JavaScript objeto essencialmente.
Então, este objeto contém essa propriedade chamada options,
onde eu posso especificar algumas opções que são passadas
para o CSS min encarregado pela tarefa de preparar usemin.
Então, lá dentro, mantenha
comentários especiais e, em seguida,
rebase é falso.
Aparentemente eu preciso fornecer isso para que minha tarefa cssmin manipule atualmente
a modificação incrível fonte e inclusão no arquivo concatenado.
Se eu não fizer
isso, parece quebrar a fonte incrível e isso é algo que eu descobri,
fazendo um pouco de
pesquisa sobre estouro de pilha e alguns desses lugares e descobri
que seu problema que está sendo causado com fonte impressionante pode ser
corrigido, incluindo isso em Minha configuração grunhida.
Então, novamente eu acabei de olhar para cima
as sugestões de algumas pessoas que tentaram e para corrigir o problema.
Então, se você encontrar problemas como este,
esta é uma maneira de resolver problemas que podem surgir quando você está
trabalhando com essas várias ferramentas.
Deixe-me adicionar a próxima tarefa para Concat.
Vou especificar algumas coisas aqui e opções.
Eu especifico este ponto e vírgula,
então isso é algo que eu preciso especificar para o Concat,
e então também depois de
opções eu especificar dist como vazio.
Agora, essas opções Concat serão configuradas pelo UseMinPrepare que é executado anteriormente.
Então, podemos deixar a maior parte dele em branco lá,
e então isso seria reconfigurado pelo UseMinPrepare.
O próximo é feio.
Dentro uglify também eu só preciso especificar este dist como vazio.
Se eu não especificar estes,
a tarefa usemin não funcionará corretamente.
Então, é por isso que eu preciso especificar todas essas coisas explicitamente.
Então, para cssmin também eu diria dist vazio.
E então, a próxima tarefa que vou configurar é chamada filerev.
Então, você me viu instalando o plugin filerev para Grunt.
O que esse filerev faz?
O que o filerev faz é quando usemin prepara o arquivo main.css e main.js,
o que filerev faz é adicionar uma extensão adicional a esse nome principal, de
modo que quando você preparar uma nova versão do seu site e carregá-lo para a página da web,
no caso de alguém ter visto seu site mais cedo,
então seu navegador pode ter descontado os arquivos main.css e main.js.
Se você não anexar este filerev o que acontece é que,
o navegador abaixo baixa a nova versão da sua página web.
Pode não baixar o arquivo main.js e main.css
porque os encontra já no cache local.
Então, sua página da Web pode não ser renderizada corretamente.
Então, para lidar com o problema,
o que fazemos é toda vez que preparamos uma nova pasta de distribuição,
vamos adicionar uma revisão de arquivo.
Isso é o que o filerev significa,
o número de revisão do arquivo,
como uma extensão adicional para o nome desses arquivos css e js.
Os arquivos main.ss e main.js o pré-preparado.
Então é isso que o filerev faz.
Agora, como esse filerev pode calcular esse valor?
Ele leva o conteúdo desses arquivos e, em seguida, faz algum processamento e, em seguida, gera
um md5 comprimido 20 caracteres número que será anexado ao arquivo principal.
Então, eu vou configurar essa parte aqui.
Então, nas opções,
eu especifico aqui dizendo como é suposto calcular esse número lá.
Então, eu digo codificação utf8,
e então eu digo algoritmo que ele usou para calcular esse hash,
o que chamamos como hash é md5.
Agora, ele vai ficar mais claro quando nós realmente executar
a tarefa Usemin e então ver o que ele faz, comprimento 20.
Então, eu vou voltar e explicar o que essa coisa
faz quando nós realmente executar a tarefa usemin.
Então, deixe-me terminar as opções aqui e então eu diria liberar.
Então, eu preciso configurar mais algumas coisas aqui e, em seguida, liberar,
e então eu preciso especificar os arquivos para os quais meu filerev deve agir.
Então, eu diria arquivos filerev.
Então, dentro do arquivo.
Então, você está começando a ver um padrão na maneira como as coisas são especificadas aqui.
Então, quando você especificar os arquivos aqui,
você vai dizer a fonte,
e então lá você vai especificar dist CSS
e, em seguida, estrela dot CSS,
e, em seguida, o próximo dist js*.js.
Então, com isso, você configurou o filerev.
Então, a parte filerev está configurada.
E, finalmente, precisamos configurar a tarefa usemin.
Então, para configurar a tarefa usemin,
eu descer aqui e dizer usemin,
e aqui deixe-me especificar algumas opções para a tarefa usemin.
Então, aqui eu especifico html.
Então, aqui estou especificando para ele quais arquivos ele precisa mudar,
ele precisa atualizar.
Então, os arquivos que foram copiados para a pasta de distribuição.
E o último é “dist/index.html”.
Então estes são os três arquivos que ele deve processar,
e então algumas opções para isso aqui.
Então, as opções que especificarei “AssetsDirs.”
Então, é aqui que todos os ativos que estou usando existem.
Então, os arquivos CSS e JavaScript existem.
Então, vou especificar “dist/css” e “dist/js”.
Com isso, você concluiu a configuração da tarefa “usemin”.
Em seguida, configuramos a tarefa “htmlmin”.
Para a tarefa “htmlmin”,
especificamos o destino que é “dist”, a pasta de distribuição
e o “htmlmin” a ser executado em
todos os arquivos HTML que estão nessa pasta de distribuição.
As opções que especificamos para este estado que, vamos dizer,
“CollapsedWhiteSpace: True” significa que
todo o espaço em branco nos arquivos HTML seria recolhido, de
modo que o [inaudível] contenha apenas o código HTML mínimo lá.
A modificação remove essencialmente
todos os caracteres estranhos dos arquivos “htmlmin”.
Agora, também especificamos esse dicionário de arquivos,
aqueles arquivos que precisam ser configurados.
Isso é especificado como destino, dois-pontos, origem.
Então, especificamos “dist/index.html”: “dist/index.html”,
o que significa que o “index.html” na pasta de distribuição
será [inaudível] e, em seguida, colocado de volta no arquivo “index.html”,
também na pasta de distribuição.
Da mesma forma, o “contactus.html” especificado lá e, em seguida, o
“aboutus.html” também especificado como mostrado na lista de arquivos.
A razão pela qual executamos “htmlmin” depois de terminarmos “usemin”
é porque “usemin” substituirá todos os scripts
com o arquivo “.js” principal e também todo esse
código CSS concatenado e combinado e substituído pelo arquivo “.css” principal.
Assim, o “htmlmin” será executado nos
arquivos HTML resultantes após o “usemin” ter concluído seu trabalho.
É assim que funciona em Grunt.
Assim, o Grunt “htmlmin” tem que ser aplicado após o “usemin” ter concluído seu trabalho.
Então, uma vez que todos estes são configurados,
então um pequeno passo que eu preciso fazer é voltar aqui,
e então onde nós especificamos para o “jit-grunhido”,
nós precisamos especificar que este “jit-grunt”,
você lembra que nós introduzimos algo chamado de
“UseMinPrepare” [inaudível] então você precisa informar o “jit-grunhido”
dizendo que a configuração “UseMinPrepare” que introduzimos vai ser
tratada pelo próprio plugin “grunt-usemin”.
Então eu preciso especificar explicitamente,
caso contrário “jit-grunt” vai olhar ao redor para um plugin Grunt “UseMinPrepare”.
Então, para especificar a isso,
eu diria “UseMinPrepare” e dizer “grunt-usemin”,
essencialmente informando “jit-grunhido” dizendo que o “UseMinPrepare” vai ser
tratado pelo plugin “grunt-usemin” lá.
Finalmente, vamos reconfigurar a tarefa “build” na parte inferior.
Descendo para aquela tarefa de “construir” depois de “imagemin”.
Então fizemos “clean”, “copy”, “imagemin”,
então a próxima tarefa que eu deveria executar é “UseMinPrepare” e depois de
“UseMinPrepare” executar “contact”, então eu executo “cssmin”,
então eu executo “uglify”.
Então você vê que nós temos que fazê-los em um determinado conjunto de passos.
Uma vez que o “cssmin” e o “uglify” sejam executados,
então os principais arquivos “.css” e os principais “.js” seriam criados.
Então, neste ponto, eu vou executar o
“filerev” e, finalmente, eu executar a tarefa “usemin”.
Então você vê os segredos: “limpar”, “copiar”,
“imagemin”, “UseMinPrepare”, “concat”, “cssmin”, “feio”.
Neste ponto, os arquivos “.css” e “.js”,
os principais arquivos “.css” e “.js” principais estão prontos.
Posso fazer o “filerev” neles e, finalmente, executar o “usemin”.
Mas isso, vamos salvar as alterações e, em seguida, ir e
ver como a tarefa “build” realmente prepara a distribuição.
[ inaudível] Indo para o nosso terminal,
no prompt eu digite “build grunhido” e, em seguida, esperar que todas as tarefas sejam executadas.
Então você veria que ele vai correr através de todo o conjunto de tarefas,
e então, finalmente, quando ele é feito,
ele vai simplesmente especificar que todas as tarefas são feitas.
Então, se você quiser voltar e olhar para a sequência das tarefas que foram concluídas,
você pode simplesmente rolar para trás e ver o que ele faz.
Primeiro limpa,
depois copia os arquivos HTML,
depois copia os arquivos de fonte,
depois faz a tarefa “imagemin”,
depois faz o “UseMinPrepare”,
depois faz o “concat”,
depois faz o “cssmin”,
tanto a distribuição quanto o gerado,
e depois faz o” uglify”,
depois “uglify” tarefa, então ele executa o “filerev” e, finalmente, a tarefa “usemin”.
E então nossa pasta de distribuição deve estar pronta.
Indo ao nosso editor,
agora você vê que a pasta de distribuição foi preparada.
Vejamos especificamente os principais arquivos “.css” e “.js” principais.
Observe os nomes desses arquivos.
Observe que após main,
há um ponto e, em seguida, há
um hash de 20 caracteres que foi adicionado por “filerev” aqui.
Então, o que acontece é que se eu preparar uma nova pasta de distribuição,
toda vez que eu preparar a nova pasta de distribuição, esse hash muda, o
que significa que toda vez que eu imploro uma nova versão do meu site,
se algum navegador tiver visualizado anteriormente meu site, então suas entradas de cache,
onde eles pode ter armazenado em cache o principal “.css” e o principal “.js” tornou-se
invalidado porque temos uma nova versão do principal “.css” e principal “.js”.
Então, o navegador irá baixar novamente essas coisas.
Eu não mostrei o “filerev” com os scripts NPM,
mas eu acabei de adicioná-lo aqui apenas para mostrar como é feito com o Grunt.
Então, com isso, completamos este exercício.
Vamos dar uma olhada rápida no site em nosso navegador.
Indo para o seu navegador,
você pode ver que agora estou carregando em “dist/index.html”.
Então isso é da pasta de distribuição,
então eu estou checando e parece muito bem.
O “aboutus.html” também parece muito bem, assim como antes.
E a página de contato também parece bem preparada para implantação.
Então, com isso, completamos este exercício.
Depois de todos os grunhidos,
tenho certeza que precisa recuperar o fôlego.
Antes de fazer isso, certifique-se de fazer um bom comentário com a mensagem “Grunt Parte Dois”.