[MÚSICA]
Agora vamos continuar nossa jornada com scripts NPM neste próximo exercício.
Aqui, vamos aprender como construir
uma pasta de distribuição que contém todos os arquivos para o
nosso projeto que podemos simplesmente implantar em um servidor web que hospeda nosso site.
Então, dados os arquivos HTML, CSS e JavaScript que
já preparamos em nossa pasta do projeto, vamos
processá-los usando as várias tarefas que falamos.
Isso é fazer uma modificação CSS,
concatenação e uglification JavaScript, minificação e minificação
HTML e, em
seguida, gerar uma pasta de distribuição com todos os arquivos.
Mas essencialmente forma o conjunto de arquivos que podem ser
implantados em nosso servidor web que hospeda nosso site.
Para ajudá-lo a entender o que vamos fazer neste exercício específico,
como observamos em nossa página index.html, temos um conjunto de
arquivos CSS que você incluiu aqui usando esta tag link aqui.
Da mesma forma, você tem um conjunto de scripts que você incluiu
na parte inferior desta página usando a tag de script.
Incluímos um conjunto de código JavaScript.
Agora, o que vamos fazer neste exercício é combinar todos esses
arquivos em um único arquivo JavaScript que será entregue
do nosso servidor web para um navegador que está tentando visualizar nosso site.
Desta forma, minimizamos o número de downloads que o navegador precisa fazer
para renderizar nosso site.
Da mesma forma, vamos combinar todo o código CSS em um único arquivo CSS,
para que ele possa ser entregue.
Assim, o arquivo CSS combinado conterá todo o código para
Bootstrap mais Bootstrap social, e também o Font Awesome e
também o código CSS que nós mesmos escrevemos.
Da mesma forma, haverá um único arquivo JavaScript que
conterá o jQuery tether, Bootstrap e o código JavaScript que nós
mesmos escrevemos, todos juntos em um único arquivo.
Agora, é assim que você pode fazer a implantação de suas páginas da Web.
E em vez de ter vários desses arquivos lá, uma maneira que a
implantação é feita é combiná-los em um único arquivo para que um único download
você obtenha todo o código JavaScript necessário para renderizar sua página web.
Um único download você obtém todo o código CSS necessário para
renderizar sua página web.
E então, é claro, o arquivo HTML em si será baixado.
Para que essas tarefas sejam concluídas, precisamos usar
um determinado conjunto de módulos NPM para realizar isso.
Agora, o que vamos acabar fazendo é construir uma pasta
em nosso arquivo de projetos, e então chamamos essa pasta como dist, D-I-S-T.
Estou apenas nomeando isso aleatoriamente como uma pasta dist.
No meu caso, o que quero dizer com a pasta dist é uma pasta de distribuição.
No final do conjunto de passos que vamos fazer, esta pasta conterá todos
os arquivos que podem ser simplesmente copiados para o servidor web que hospeda nosso site.
Para começar, o que vamos fazer é configurar um conjunto de
scripts aqui que nos ajudarão a automatizar esse processo.
Então, a primeira coisa, podemos
preparar a pasta de distribuição uma vez, então talvez possamos fazer algumas edições em
nossos arquivos fonte, em seguida, podemos precisar recompilar nossa pasta de distribuição.
Primeiro passo, nós iria configurar o script para limpar essa pasta de distribuição
essencialmente, o que significa, excluir a pasta de distribuição.
Então, para fazer isso, eu vou pegar a ajuda de um módulo NPM chamado como rimfraf.
Então vou instalar o npm —save-dev rimfraf.
Este módulo nos ajuda a limpar completamente uma pasta.
Então, uma vez que eu tenha instalado isso, então eu vou configurar um script
no meu arquivo package.json para limpar todos os arquivos.
Indo para o arquivo package.json, eu vou adicionar, então
lembre-se sempre que coma é muito, muito importante nesses scripts.
Às vezes você vai ter problemas só porque você esqueceu a vírgula.
Então certifique-se de colocar essas vírgulas onde necessário.
A próxima descrição que eu vou adicionar é, limpo,
obviamente como o nome indica, isso vai limpar minha pasta.
Então eu vou dizer rimraf dist.
O que isso significa é que isso, quando executado,
limpará a pasta de distribuição.
Então eu vou adicionar isso em, e
então eu vou colocar essa vírgula lá porque eu vou adicionar mais scripts abaixo disso.
Então deixe-me salvar as alterações, o próximo passo que eu vou fazer é
instalar um módulo npm chamado copy files que são usados para copiar
alguns arquivos de fonte da minha pasta de módulos nó para a minha pasta de distribuição.
Para que, quando ele é implantado, os arquivos de fonte também sejam implantados.
Indo para o terminal, o próximo pacote que vou instalar é
npm -g, lembre-se que isso significa que ele deve ser instalado globalmente.
Como eu estou fazendo isso em um Mac,
eu deveria dizer sudo npm -g, se você está fazendo isso no Windows, você não precisa do sudo.
sudo npm -g instalar arquivos de cópia.
E então uma vez que está instalado, este módulo NPM vai me ajudar a copiar
arquivos de uma pasta para outra pasta.
Agora, deixe-me apresentar outro script NPM aqui.
Indo para o meu arquivo package.json,
vou criar um novo nome de scrip aqui copyfonts.
Este script vai permitir que eu copie todos os arquivos de fontes da minha
pasta Font Awesome para a minha pasta de distribuição.
Assim, quando meu site é renderizado,
todos esses arquivos de fontes também podem ser enviados para fora, de modo que
minhas páginas da Web são renderizadas corretamente com as fontes Font Awesome no lugar.
Então, para fazer isso, eu vou dizer, copiar arquivos -f,
-f significa que simplesmente copia os arquivos sem a hierarquia cheia e
simplesmente copia os arquivos de um local para outro local.
Então eu vou dizer copiar arquivos -f
node_modules/font_awesome/fonts/star
E dist/fontes,
E, em seguida, salvar as alterações.
Deixe-me agora ilustrar como esses dois scripts npm funcionam juntos.
Indo para minha janela de comando, vou digitar
npm run copyfonts.
Quando isso é executado, ele vai criar uma pasta
chamada dist na minha hierarquia de pastas do projeto.
E, em seguida, dentro do dist,
haverá uma subpasta chamada fontes, que irá conter os arquivos de fonte.
Então, executando isso,
você notará imediatamente que a pasta de distribuição é criada aqui.
E dentro da pasta de distribuição,
você pode ver que há uma subpasta chamada fontes.
E lá dentro, todos os arquivos fontawesome foram copiados.
É assim que funciona o script copyfonts.
Agora, vou mostrar-vos como funciona o guião limpo.
Então, se eu digitar npm run clean, isso vai excluir essa pasta de distribuição.
Então, quando eu executar isso, então você notaria que
a pasta de distribuição é excluída da minha hierarquia de pastas de projetos.
Então é assim que a limpeza funciona.
Agora que temos esses dois scripts configurados,
agora precisamos ser capazes de construir os arquivos de distribuição restantes.
Na próxima etapa, vamos instalar um módulo de nó chamado imagemin-cli,
que é a interface de linha de comando para o módulo imagemin.
O módulo imaginemin vai pegar uma seita de arquivos de imagem e, em seguida, compactá-los para baixo.
Assim, ele empilhado o tamanho desses arquivos são minimizados, tanto quanto possível,
mas ainda ser processado corretamente quando o nosso site é renderizado.
Desta forma, reduzimos a quantidade de dados que
precisam ser baixados pelo navegador quando ele precisa renderizar nossa página web.
Então, se você está incluindo imagens em sua página web, então imagemin tarefa é
algo que você deve aprender, a fim de reduzir o tamanho de seus arquivos de imagem.
Então, para fazer isso, eu vou instalar este módulo de nó imagemin como um módulo global.
Então eu digite sudo, já que estou usando um Mac,
npm -g install imagemin-cli,
e então instalo este módulo de nó.
Às vezes, em um Mac, alguns dos plugins imagemin não são instalados corretamente.
Então é por isso que eu estou dando esses sinalizadores adicionais para o comando,
eles estão dizendo —unsafe-perm=true e —allow-root.
Uma vez que a instalação esteja concluída,
deixe-me configurar um script para fazer essa ampliação de minhas imagens.
Indo para package.json novamente, vou configurar o próximo script aqui.
Então eu diria imagemin é o nome do script que eu vou fazer,
e eu diria imagemin.
E então, uma vez que todas as minhas imagens estão na pasta img, eu diria img/*,
e então muitos arquivos serão copiados para a imagem dist.
Assim, os arquivos de imagem originais da pasta de imagem que eu tenho serão copiados
para a pasta de distribuição e para a subpasta de imagem lá.
Então isso completa minha imagemin.
Deixe-me prosseguir com a configuração restante, e
então veremos como vamos fazer uso dos scripts que já configuramos lá.
Agora que eu tenho a pasta de teste lá, que eu poderia criar,
eu não quero fazer check-in na pasta dist no meu repositório Git.
Então é por isso que no meu arquivo.gitignore, eu vou adicionar na pasta dist também.
Assim, a pasta dist será ignorada quando eu fizer meu check-in no repositório Git.
Então vamos salvar as alterações, voltando para package.json.
Agora, o que eu vou fazer a seguir é instalar três
módulos de nós diferentes, que me permitem fazer as modificações no
meu arquivo index.html e nos arquivos HTML restantes lá.
No prompt de comando, digite npm install —save dev.
Vou instalar um módulo chamado como usemin-cli.
Este usemin-cli é aquele que me permite fazer a transformação do meu
arquivo HTML.
E então concatenar e combinar todos os
arquivos CSS em um único arquivo CSS e, em seguida, colocá-lo na pasta de distribuição.
Da mesma forma, todos os arquivos JS serão concatenados e colocados em uma única pasta.
Então este usemin-cli é útil.
Mas este usemin-cli leva a ajuda
de três outros módulos de nó chamados cssmin,
depois uglifyjs e htmlmin.
Então eu preciso instalar esses três módulos de nó, além de usemin-cli.
E eu vou instalar isso localmente no meu projeto, então
é por isso que o npm install —save-def.
Assim, eles serão lembrados no meu arquivo package.json.
Então vamos em frente e completar a instalação.
Agora que instalei o usemin e
os módulos de nó relacionados, preciso fazer alguma transformação no
meu arquivo index.html e nos arquivos HTML restantes. De
modo que o usemin node_module reconhece que esse grupo é
um monte de arquivos CSS que precisam ser compactados, calculados e verificados.
Da mesma forma, este é o grupo de arquivos JavaScript que precisam ser feios
, combinados e concatenados juntos.
Então, para ajudar o trabalho do pacote
usemin, eu preciso adicionar um pouco de código no meu arquivo index.html.
Logo antes do primeiro link lá,
vou adicionar uma marca aqui em cima,
que diz! — build:css.
Agora, isto! —, como você reconhecerá,
é um comentário da perspectiva html.
Então, dentro desse comentário, eu vou incluir que esta linha
em particular vai ser usada pelo menu de uso, a fim de reconhecer o bloco de
código que especifica todos os arquivos CSS que precisam ser transferidos.
Então eu digo build.css, e então eu especificarei
o nome do arquivo como css/main.css.
Esta é a sintaxe para especificar.
O que isso significa é que esses arquivos Bloco de CSS serão todos combinados juntos,
e depois concatenados, minificados e, em seguida, colocados neste arquivo chamado main.css.
E então este bloco será identificado do outro lado dizendo,
Hífen —, ok, desculpe.
Esqueci de incluir o traço duplo no final.
Essa é a razão pela qual isso não estava virando cores.
Então, às vezes você está feliz que seu
editor está apontando esses possíveis erros que você pode estar cometendo.
Então bem ali eu diria endbuild e
então — colchete direito ali.
Agora, o que quer que esteja entre esta compilação e
endbuild, este grupo será tratado como uma unidade para
ser combinado pelo nosso módulo npm usemin lá.
Observe a sintaxe que o módulo usemin usa lá.
Eu preciso fazer a mesma transformação para contactus.html e aboutus.html também.
Então eu vou copiar este
aqui o preguiçoso que eu sou.
Vou simplesmente copiar e
colar em contactus.html e, em
seguida, também aboutus.html lá.
Da mesma forma, voltando para o index.html,
vou copiar este inbuild e, em seguida, também copiá-lo para
os dados contactus.html e aboutus.html.
Certo, vamos salvar as alterações em todos os arquivos.
Em seguida, voltando para index.html.
Eu vou repetir a mesma coisa na parte inferior para os meus
scripts JavaScript que eu incluí lá.
Então, indo para o fundo aqui,
o que eu preciso fazer aqui,
é especificar <! — construir js,
e eu vou dizer js/main.js.
Hífen duplo, barra.
Então esse é o início do bloco e, em seguida, o final é especificado por,
Construir, ok?
Então, com essas mudanças, agora, meu arquivo index.html está pronto,
e eu tenho que fazer a mesma transformação para contactus.html na parte inferior.
E aboutus.html também na parte inferior.
Da mesma forma, este enbuild copiado em. Em
contactus.html e aboutus.html e, em seguida, salve todos os arquivos.
E isso prepara nossos arquivos HTML para
serem transformados para preparar a pasta de distribuição.
Esses arquivos permanecerão como tal, mas os arquivos transformados serão colocados na
pasta de distribuição criada a partir desses arquivos.
Agora, uma vez que terminamos isso, vamos configurar alguns scripts.
Indo para package.json, vou configurar meu próximo script chamado usemin.
E então isso diz usemin,
contactus.html -d dist, esta é a sintaxe para
especificar -d dist significando que o destino para
esta pasta dist distribuição.
E então eu diria htmlmin, isso também vai minimizar o arquivo HTML.
Então ele irá remover todos os espaços estranhos e comentários do arquivo HTML.
Mas eles comprimem-no para
que ele contenha o número mínimo de caracteres lá.
Vamos olhar para o resultado depois de concluirmos e fazer a transformação lá.
Então isso e, em seguida, não só isso,
e então htmlmin, e depois dizer
-o dist/contactus.html e
&&, isso significa que há
mais para vir depois disso.
Então eu vou dizer usemin
, em seguida, aboutus.html
-d dist —htmlmin
-o dist/aboutus.html.
Então, esse é o segundo para transformar o arquivo aboutus.html.
E então &&, este é um script longo,
usemin index.html,
precisamos transformar todos os arquivos.
Então é por isso que eu preciso especificar cada um explicitamente lá.
usemin não leva curinga, então
essa é a razão pela qual eu tenho que especificar a exploração como [INAUDÍVEL].
E assim usemin index.html
-d dist —htmlmin
-o dist/index.html.
E depois disso eu coloquei uma vírgula porque eu vou apresentar o próximo script,
que é chamado de compilação.
Então este script de compilação criará minha pasta de distribuição.
Então, para criar minha pasta de distribuição,
a primeira coisa que eu vou fazer é npm executar limpo.
E então o NPM executa copyfonts.
Você já viu esses dois em ação anteriormente,
então eu vou dizer npm executar imagemin para criar as imagens minimizadas,
e então eu diria npm executar usemin.
E este script em particular irá construir
a minha pasta de distribuição, cujo conteúdo pode então ser copiado para o meu servidor web para resolver o meu tom.
Salve as alterações.
Vamos agora ver como construímos o site.
Neste ponto, para construir o nosso site e
o prompt de comando é simplesmente digite npm run build e, em seguida, basta executar.
Esse script, que por sua vez executará um conjunto
de ambos os scripts, que por sua vez completará todo o conjunto
de tarefas que devem ser executadas para preparar minha pasta de distribuição.
Então, vamos em frente e executar essa coisa e
, em seguida, isso vai correr através de todos os scripts diferentes lá.
Demora alguns minutos para ser concluído e, quando estiver concluído,
sua pasta de distribuição estará pronta para implantação em seu servidor web.
Indo para o nosso editor,
agora você vê que a pasta de distribuição está pronta.
Dentro da pasta de distribuição, você verá os três arquivos de índice,
e na pasta CSS, você verá o único arquivo chamado m ain.css,
que contém todos os CSS Bootstraps, o CSS Bootstraps
e o código CSS que você criou.
E a pasta JS conterá o main.js,
que contém o Bootstrap, o jQuery e
todo o grupo de código JavaScript combinados em um único arquivo.
A imagem conterá as imagens otimizadas, e as fontes, obviamente,
que você viu anteriormente, contêm os arquivos de fonte.
Agora, vamos dar uma olhada rápida no index.html que foi criado aqui.
Então, quando você olha para o index.html que foi criado aqui,
você vai notar que a coisa toda é literalmente ilegível,
porque quando você fez HTML min ele retirou todos os
comentários estranhos, ele retirou todos os espaços, e
então criou todo esse conjunto de execução de personagens.
Para o computador não faz qualquer diferença porque ele irá renderizar esta
página da web tão bem.
Para você e eu, faz diferença, porque não podemos ler isso facilmente.
Então é isso que a minificação causa para o seu arquivo HTML.
Vamos dar uma olhada no main.css.
Quando você olha para o main.css, você vê a coisa toda é triturada
em uma única unidade, à medida que você vai para o fundo.
Se você é corajoso o suficiente, vá até a parte inferior e, em seguida,
você verá o, Você verá horas especificamente escrito
classes CSS direita na parte inferior aqui.
Bem ali, você reconhece o botão do carrossel, e outras coisas,
nabber-dark, e outras coisas lá, então é tudo raspado em cima.
Então é isso que a minificação e os custos.
Main.js, a mesma coisa.
Código ilegível lá. O
computador deles, não há diferença.
Então, com isso, nossa pasta de distribuição agora está completa.
Vamos verificar nossa pasta de distribuição.
Felizmente, temos o nosso servidor de luz já em execução.
Então o que eu vou fazer é ir para o navegador e, em
seguida, verificar o arquivo CLM pronto para índice nesta pasta de distribuição para
ver se ele está sendo processado corretamente ou não. Indo
para o navegador, na minha barra de endereço eu vou digitar,
dist index.html, e
notar que este arquivo em particular é o
arquivo de distribuição que foi criado, e ele contém exatamente a mesma coisa e
renderiza exatamente da mesma maneira que a nossa página original que criamos.
Sobre, da mesma forma, observe que este aboutus.html é da
pasta de distribuição e isso é renderizado exatamente como antes,
e também o arquivo contactus.html.
Tudo funciona perfeitamente.
Então, agora tudo o que resta para você fazer para implantar sua página web,
ou seu site, é simplesmente copiar o conteúdo da pasta dist,
e depois enviá-lo para o seu servidor web, e
então seu servidor web está funcionando, servindo seu site.
Com isso, completamos este exercício.
Neste exercício, vimos como podemos fazer uso de
scripts NBM para construir e implantar nosso site.
Este pode ser um bom momento para
você fazer um Get Comment com mensagem NPM Scripts, Parte 2.
[ MUSIC]