Hora de começar a grunhir.
Neste e no próximo exercício vamos repetir
o mesmo tipo de configuração que fizemos com os scripts NPM.
Na primeira parte, vamos configurar a conversão de SCSS para CSS.
Em seguida, vamos configurar uma tarefa de observação e também servir o código usando a sincronização do navegador.
Na segunda parte do exercício,
usaremos Usman e as várias tarefas para preparar a dobra de distribuição.
Esses exercícios não são, de modo algum, a única maneira de
implementar configurações Grunt ou arquivos de chamada.
Isto é apenas uma ilustração de como podemos fazer uso dessas ferramentas.
Você pode querer criar sua própria maneira de configurar
seu arquivo Grunt e seu arquivo de chamada para seus projetos.
Nosso primeiro passo para fazer uso do Grunt é configurar o Grunt CLI como um módulo NPM global.
Para fazer isso, adicione o tipo de prompt: NPM -g install Grunt CLI.
Esta é a interface de linha de comando para Grunt.
Uma vez que isso é configurado,
em seguida, vamos configurar um módulo Grunt NPM local para uso dentro de nossos projetos.
O Grunt CLI nos permite fazer uso do Grunt.
Nós montamos o Grunt CLI.
Em seguida, o próximo passo é configurar - Grunt localmente,
assim; NPM instalar Grunt menos salvar dev.
Em seguida, instale o Grunt localmente.
Depois de concluir essas duas etapas,
o próximo passo é ir para o nosso projeto e, em seguida, criar um novo arquivo,
e vamos nomeá-lo como Gruntfile.js.
Dentro deste Gruntfile.js, vamos configurar o código para configurar nossas tarefas Grunt.
Neste arquivo, o primeiro passo é adicionar 'use strict' que significa,
'use strict' código JavaScript.
Então você diz module.exports
= função (grunhido).
Então aqui dentro, vamos configurar a configuração Grunt para todas as tarefas.
Como mencionei anteriormente, Grunt é um corredor de tarefas baseado em configuração.
Então, vamos instalar os vários plug-ins Grunt para
as várias tarefas e, em seguida, configurá-los em nosso arquivo Grunt.
Para fazer a configuração,
vamos adicionar no código aqui,
dizendo: Grunt.initConfig
e dentro deste InitConfig,
vamos adicionar na configuração para as tarefas Grunt da roda.
Depois de concluir isso,
vamos salvar as alterações.
Em nosso próximo passo,
vamos configurar alguns plug-ins Grunt para nos permitir converter código SCSS em código CSS.
Para fazer isso, vou instalar um módulo NPM chamado
Grunt SASS — Grunt SASS, save def.
Além disso,
vou configurar mais dois módulos Grunt chamados,
NPM Install Time Grunt, e Jit Grunt.
Estes dois módulos — Time Grunt e Jit grunhido.
O módulo Time Grunt imprime as estatísticas de tempo para executar as várias tarefas Grunt.
O módulo Jit Grunt é usado para carregar
esses plug-ins Grunt sempre que eles são necessários dentro de qualquer aplicativo.
A outra alternativa é carregar nos
vários módulos Grunt explicitamente em seu arquivo de configuração Grunt.
Eu prefiro usar o Jit Grunt para que ele vai cuidar de carregar
em qualquer plug-ins Grunt que eu preciso como pode ser necessário,
como em quando eu faço uso deles no código.
Instale estes dois Time Grunt e Jit Grunt e uma vez que eles são instalados,
então é hora de configurar nossa tarefa de conversão SASS.
Agora você obviamente deve estar se perguntando por que digitamos este
module.exports e, em seguida, funcionar e assim por diante.
É assim que definimos módulos de nó.
Vamos lidar com a estrutura de módulos de nó e por que usamos essa abordagem
no curso de módulos de nó do lado do servidor mais tarde na especialização.
No momento, basta aceitar que é assim que o código é escrito para Grunt,
porque o arquivo Grunt é em si
um módulo de nó que vai carregar em vários plug-ins Grunt.
Depois de fazermos isso, vamos exigir um par de plugins Grunt aqui.
Para fazer isso, vamos dizer require ('time- grunt'),
e vamos dizer grunhido versus a configuração que usamos para carregar no Time Grunt.
Para exigir, como você vai aprender mais tarde quando você aprender sobre módulos de nó,
é uma maneira de dizer que a carga no módulo de nó Time Grunt a
ser usado dentro deste módulo de nó particular.
Da mesma forma, vou exigir módulo de nó Jit Grunt.
Este módulo de nó Jit Grunt garante que ele irá carregar em
quaisquer outros módulos de nó ou quaisquer outros plug-ins Grunt - que são módulos de nó,
basicamente, como em quando eles são realmente implícitas dentro do meu Grunt para fazer várias tarefas.
A alternativa seria carregar manualmente em cada um
desses plug-ins Grunt explicitamente usando a instrução necessária.
Estou me economizando um pouco de problemas usando apenas Jit Grunt,
que cuida de carregar esses módulos de nó quando necessário.
Agora, movendo-se para a configuração,
como entendemos, Grunt funciona na configuração,
então cada plug-in Grunt que desejamos empregar para executar uma tarefa,
ele precisa ser configurado dentro deste arquivo Grunt InitConfig.
Esta configuração basicamente é um objeto JavaScript basicamente.
Se você está familiarizado com objetos JavaScript,
você começa a entender a sintaxe muito, muito rapidamente.
A primeira tarefa que vou configurar é o SASS.
Então, eu escrevo SASS aqui,
e depois dentro SASS, eu digo dist.
Agora você tem que acreditar que é assim que a configuração é feita.
Então, eu digo dist,
e aí dentro,
eu digo arquivos, e aí dentro,
eu especifico os arquivos que precisam ser convertidos.
Eu digo, CSS/styles.CSS, que
é dependente de CSS/Styles.scss.
Com isso, concluímos a configuração da tarefa SASS aqui.
Depois de concluir a configuração da tarefa SASS,
se você realmente deseja executar a tarefa SASS,
então abaixo você iria configurar a tarefa SASS dizendo “grunt.registerTask”,
e então eu vou chamar essa tarefa CSS,
e então eu vou,
entre colchetes de escriba, dizer “SASS”.
Agora, para entender a sintaxe aqui,
isso, como você pode ver, diz “Grunt.RegisterTask” e o nome desta tarefa é CSS.
E o que essa tarefa envolve?
Esta tarefa envolve a execução da tarefa SASS que já foi configurada aqui.
É assim que lemos esta sintaxe aqui.
Se você não quiser, você não precisa configurar isso,
porque empregaremos o SASS junto com a tarefa watch para
executar automaticamente o SASS quando nosso arquivo SCSS for alterado.
Com isso, vamos salvar as alterações.
Permitam-me que vos mostre esta tarefa em particular em acção.
Se você configurar a tarefa com o nome CSS lá, em
seguida, adicione o prompt,
você pode digitar “grunt.CSS” e, em seguida, ele irá executar
a tarefa de converter o código sass para código CSS.
Indo para o prompt de comando, no prompt,
digite “grunt.CSS” e você verá
a tarefa SASS executando e, em seguida, convertendo o arquivo styles.sess para o arquivo styles.CSS.
Além disso, como você pode ver,
o Time Grunt irá imprimir estatísticas como esta
para indicar quanto tempo cada uma dessas tarefas levou.
Se isso é de seu interesse,
então você pode olhar para esses detalhes aqui.
Em nosso próximo passo, vamos configurar o relógio e o servidor, a
fim de manter um controle sobre
os arquivos SASS e convertê-los automaticamente quando eles são alterados,
e então vamos configurar o servidor,
usando BrowserSync para servir nosso site.
Para configurar as tarefas Watch and Serve,
vou instalar mais alguns plug-ins grunhidos,
então direi npm install,
grunt-contrib-watch menos save-dev.
Então este é o relógio grunt-contrib-.
Grunt plug-in que é um módulo de nó, então instale isso.
Assim, o plugin-in Watch permite que você mantenha um controle sobre seus vários arquivos.
O próximo plug-in que vou
instalar é grunt-browser-sync.
O módulo BrowserSync é aquele que eu vou fazer uso,
para salvar os arquivos da pasta do meu projeto, para
que eu possa ver o site em um navegador.
Depois de instalar esses dois módulos,
é hora de entrar no meu grunt.initconfig
e, em seguida, configurar as duas tarefas.
Um para manter um relógio,
o segundo para servir os arquivos usando BrowserSync.
Então, voltando para o meu initconfig,
coloque uma vírgula lá depois do SASS,
e então passe para a próxima linha.
Lembre-se sempre de colocar essa vírgula lá.
Uma vírgula ausente causa muita dor de cabeça quando você está tentando executar suas tarefas grunhidas.
É muito difícil identificar que você perdeu uma vírgula.
Por isso, é importante prestar atenção
à sintaxe e certificar-se de que você não perca nenhuma dessas vírgulas.
Vai voltar para te morder na hora errada.
Então a próxima tarefa,
que eu vou configurar é WatchTask.
Então eu digo Watch e o que eu quero assistir?
Eu quero assistir esses arquivos, que é CSS/*.SCSS.
Então este é o arquivo SCSS que eu quero assistir.
Todos os arquivos SCSS na minha pasta CSS.
Se algum deles for modificado,
então a tarefa correspondente que vou executar é, SASS.
A tarefa SASS que eu já configurei anteriormente.
Então, com isso, eu configurei meu WatchTask,
para manter um controle sobre os arquivos SCSS e, em seguida,
convertê-los automaticamente invocando o SASS.
Agora com o watchTask eu posso realmente manter uma vigilância em vários arquivos
e, em seguida, invocar automaticamente as tarefas correspondentes para esses arquivos.
Então, por exemplo, eu posso manter um controle sobre
meus arquivos JavaScript e, em seguida, automaticamente fazer dicas JS,
quando meus arquivos mudam.
Ou para fazer identificação e assim por diante.
Agora, o próximo que vou configurar é BrowserSync.
Novamente, não esqueça a vírgula após WatchTask
e digite BrowserSync.
Eu diria BrowserSync aqui e, em seguida, para o BrowserSync,
eu diria configurar uma tarefa dentro.
Agora, esta é a sintaxe que usamos para colocar na
configuração dentro do nosso arquivo grunhido.
Então diz BrowserSync dev.
Agora, se você me perguntar por quê,
nós só precisamos ler a documentação,
para cada um desses plug-ins e então descobrir como configurar esses plug-ins.
Então, eu já li a documentação e eu descobri
alguma configuração básica para cada uma dessas tarefas, então é por isso que eu estou apenas digitando-as.
Obviamente, se você quiser mais flexibilidade,
você pode querer ler a documentação correspondente e, em seguida, descobrir
outras maneiras de configurar essas tarefas.
Minha configuração aqui é apenas uma maneira de resolver ou resolver os problemas.
Então aqui eu especifico os arquivos BSFiles,
então este arquivo especifica quais arquivos precisam ser observados
pelo meu BrowserSync e, em seguida, quando qualquer um desses arquivos mudar,
então meu BrowserSync fará com que o navegador seja recarregado.
Então eu vou assistir todos os arquivos na minha pasta CSS,
arquivos HTML na minha pasta do projeto
e, em seguida, todos os meus arquivos JavaScript na pasta JS.
Então, com isso eu configurei todos os arquivos nos quais eu vou manter um relógio
e, em seguida, causar automaticamente uma recarga da minha página quando necessário.
E então, a próxima configuração que eu preciso
fazer é mais algumas opções, para o meu BrowserSync.
Então, as opções que eu vou especificar é
WatchTask true, o que significa que há um watchTask em execução,
e o diretório base para o meu servidor.
Então eu digo BaseDIR,
e então eu especificar, ponto barra.
Então o diretório atual,
como meu diretório base.
Então, com essas alterações,
deixe-me salvar as alterações no meu arquivo grunhido,
e então eu vou descer abaixo e, em seguida, configurar outra tarefa grunhida, aqui chamada padrão.
Então, eu especificaria a tarefa como padrão.
Para esta tarefa padrão, o que eu preciso fazer?
Eu preciso executar
BrowserSync e também segunda tarefa que eu vou fazer é assistir.
Terei que fazer a tarefa BrowserSync primeiro e depois WatchTask.
Porque a tarefa BrowserSync começará a servir o meu servidor.
Se eu fizer o watchTask primeiro e a tarefa BrowserSync mais tarde,
o watchTask irá basicamente,
parar tudo e, em seguida, todas as tarefas restantes atrás que não serão executadas.
Então, se você estiver usando o watchTask,
faça isso como um último na sequência que você especificar neste colchetes.
Com isso, meu projeto agora está configurado,
tanto para manter um controle sobre meus arquivos SASS quanto para servi-lo sempre que necessário.
Então, isto completa o meu ficheiro,
vamos voltar para o nosso terminal.
Voltando ao meu terminal,
eu abri outra guia e, em seguida, nesta guia,
eu vou executar a tarefa grunhida,
que também será manter meu BrowserSync em execução e servirá
arquivos e recarregar automaticamente a página da web,
se algum desses arquivos mudar.
Então, se você configurar uma tarefa como uma tarefa padrão como fizemos no exercício, em
seguida, no prompt,
eu só preciso digitar grunhido e, em seguida, ele irá executar automaticamente a tarefa padrão.
Uma vez que minhas tarefas grunhidas começa a ser executado,
você pode ver que ele iniciou o BrowserSync e ele está servindo
os arquivos e também está executando o watchTask,
que está esperando por quaisquer alterações para executar automaticamente a tarefa SCSS.
Para demonstrar a você como a tarefa SCSS será acionada,
sempre que eu fizer qualquer alteração no meu arquivo Styles.scss,
então eu trouxe o arquivo Styles.scss,
e eu simplesmente vou salvar esse arquivo.
E então você notará que imediatamente,
no lado esquerdo, a tarefa SASS é invocada e executada e, em seguida, recompila e isso
também fará com que o arquivo Styles.scss seja alterado, depois de ser recompilado.
Em seguida, isso irá acionar o BrowserSync para recarregar automaticamente a minha página web.
Com isso, completamos nosso exercício grunhido parte um.
Este é um bom momento para salvar seus arquivos,
para o Repositório Git com a mensagem Grunt parte um.