Agora que temos uma compreensão
das várias etapas envolvidas na construção e implantação do nosso site,
e também uma breve introdução aos scripts NPM na palestra anterior,
vamos dar um mergulho profundo no desenvolvimento de
scripts NPM para automatizar muitas das tarefas que tínhamos falado anteriormente.
Como você viu na palestra anterior,
já temos alguns scripts NPM que tínhamos incluído em nosso arquivo package.json,
um para iniciar o servidor lite e o segundo
para converter o código SCSS em CSS.
Neste exercício e no próximo,
vamos explorar scripts NPM com um pouco mais de detalhes.
Para começar, vamos primeiro fazer alguma limpeza no arquivo index.html.
Indo para o arquivo index.html,
vemos que temos esse código JavaScript na parte inferior deste arquivo index.html.
Eu preferiria manter este código JavaScript em
um arquivo separado que contém todos os nossos scripts
e, em seguida, incluir esse arquivo no meu index.html.
Para fazer isso, vamos criar outra pasta aqui com o nome js.
E nesta pasta js,
vou criar um novo arquivo com o nome scripts.js.
E indo para index.html,
eu vou simplesmente cortar este código JavaScript a partir daqui e, em
seguida, colá-lo no arquivo scripts.js
e, em seguida, salvar as alterações no arquivo scripts.js.
Agora que movemos todo o nosso código JavaScript em seu próprio arquivo,
vou agora incluir esse arquivo JavaScript no meu index.html bem ali.
Eu diria <script src =
“js/scripts.js” Assim,
todo o meu código JavaScript agora é incluído de volta no meu arquivo index.html.
Desta forma, meu arquivo index.html contém todo o código html,
e todos os meus códigos CSS e JavaScript estão desligados em seus próprios arquivos separados.
Deixe-me copiar esta linha de scripts da página index.html
e, em seguida, ir para a página aboutus.html,
role para baixo até a parte inferior onde incluí
outros scripts e, em seguida, cole isso.
Da mesma forma, deixe-me ir para a página contactus.html
e novamente role para baixo até a parte inferior do arquivo lá.
Deixe-me colar esta linha.
Vamos salvar as alterações e, em seguida, passar para a próxima etapa.
O próximo passo que eu gostaria de fazer é instalar um par de
módulos NPM que eu vou fazer uso de para automatizar algumas tarefas.
O primeiro módulo NMP que vou instalar é chamado onchange.
Este módulo onchange vai assistir arquivos na minha pasta do projeto,
e, em seguida, sempre que esses arquivos mudam,
em seguida, ele automaticamente aciona uma tarefa a ser executada.
Desta forma, por exemplo,
se eu configurar uma citação unquote watch em alguns arquivos,
digamos, por exemplo, meu arquivo SCSS,
então sempre que eu fizer alterações no meu arquivo SCSS,
ele será automaticamente recompilado no arquivo CSS correspondente.
Já temos o script que faz a recompilação.
Então, tudo o que preciso fazer é vigiar esse arquivo em particular.
Agora é aqui que eu vou fazer uso do módulo NPM chamado Onchange.
Há outro modelo NPM chamado Watch,
que você também pode usar para o mesmo propósito.
Neste exercício eu vou usar o módulo Onchange,
então nós lidamos com concessão e gole nas lições posteriores,
vamos usar o módulo Watch para o mesmo propósito.
Além disso, eu também vou instalar outro módulo NPM chamado shell paralelo.
Este módulo Parallelshell me permite executar
vários scripts NPM em Parallelshells como o nome indica.
Dessa forma, vários scripts NPM podem ser
executados simultaneamente e me permitir manter vigiado vários arquivos,
e também realizar outras tarefas.
Então, vamos instalar esses dois módulos NPM.
Vamos instalá-los localmente neste projeto em particular.
Então, para fazer isso eu vou digitar npm install.
Eu devo —save-dev e então eu diria onchange
e paralelshell e, em seguida, esperar que esses dois módulos NPM sejam instalados.
Uma vez que os dois módulos são instalados,
então eu vou incluir um par de scripts NPM no meu arquivo package.json.
E eu vou explicar a razão porque incluímos esses roteiros lá.
Voltando ao meu arquivo package.json,
logo após este SCSS,
vou incluir outro script chamado “watch:scss”.
E como o nome indica,
isso vai manter um controle sobre os arquivos SCSS.
Então é aqui que eu vou invocar o módulo NPM onchange que eu acabei de instalar,
e então eu diria código único 'css/*.scss”.
Então, o que significa que manter a vigilância em todos os arquivos SCSS que estão lá na pasta CSS.
Se algum deles mudar,
então você vai acionar este script específico e o script é “—npm
run scss” porque esse
é o script que vai fazer a recompilação do meu código SCSS no código CSS correspondente.
Então, com isso, montei um relógio para o meu SCSS.
Obviamente eu posso digitar “nmp watch:scss”.
E então ele irá acionar o script lá com o módulo onchange,
então ele vai manter um relógio sobre isso.
Se você estiver fazendo esse exercício em uma máquina Windows,
em vez da aspas simples no script,
você deve substituí-lo pela barra invertida e aspas duplas.
Da mesma forma, as outras aspas simples
também substituem isso com a barra invertida e aspas duplas.
Então, é assim que o script ficará em um computador Windows.
Agora, eu vou fazer uso do Parallelshell
para acionar vários desses scripts para serem simultaneamente ativos.
Então eu diria “paralelshell”
e, em seguida, entre aspas,
eu diria 'npm run watch:scss'.
Assim, o Parallelshell leva vários desses como parâmetros,
cada um entre aspas simples lá.
E o segundo é 'npm run lite'.
Então você pode ver que este Parallelshell me permite executar dois scripts simultaneamente,
um para manter um olho no meu arquivo SCSS,
o outro para executar o shell lite.
Se você estiver fazendo esse exercício em uma máquina Windows, em
vez do código único no script,
você deve substituí-lo pela barra invertida e aspas duplas.
Da mesma forma, as outras aspas simples
também substituem isso com a barra invertida e aspas duplas.
Então é assim que o script ficará em uma máquina Windows.
Agora, depois de fazer essas alterações,
deixe-me salvar as alterações e então eu vou subir
aqui e, em seguida, começar um script que eu tenho aqui.
Vou mudar isso de “npm run lite” para “npm run watch:all”.
E salve as alterações aqui.
Então, com isso, os scripts que eu preciso agora estão configurados.
Então agora, eu posso ir em frente e fazer
“npm start” e que basicamente iniciará esses dois scripts simultaneamente,
um mantendo um olho em meus arquivos SCSS que por sua vez irá
acionar a compilação do SCSS para CSS,
o outro que inicia meu servidor lite.
Agora, eu comecei na guia tabela e, em seguida, movido para a pasta do projeto
e, em seguida, adicione o prompt.
Vou digitar “npm start”.
E isso deve acionar
tanto o meu servidor lite que irá salvar os arquivos da minha pasta de confusão,
e também acionar o módulo Onchange para manter uma vigilância sobre os arquivos SCSS.
Para ajudar a ilustrar como este Onchange mantém uma vigilância sobre meus arquivos SCSS,
o que eu vou fazer é ir para o meu arquivo styles.scss aqui,
e então eu simplesmente vou salvar o arquivo novamente.
Agora, sempre que este arquivo for salvo,
eu não vou fazer nenhuma alteração nele.
Eu só vou acertar a gravação no arquivo.
Assim, sempre que este arquivo for alterado,
você verá que imediatamente
Onchange irá acionar o script SAS nó a ser executado,
que irá compilar o arquivo de SCSS para CSS e criar o arquivo CSS aqui,
e então salva o arquivo que também irá acionar
minha página da Web para ser recarregada no navegador.
Então, isso é essencialmente o que conseguimos usando o módulo Onchange para manter
um controle sobre os arquivos que então mudaram
irá acionar alguns dos scripts NPM automaticamente.
Agora, isso nos liberta das preocupações sobre ter que acionar manualmente essas tarefas.
Assim, por exemplo, se você tiver um conjunto de tarefas que deseja acionar automaticamente
, algumas alterações ocorrerão.
Você pode facilmente configurar essas tarefas de observação para manter um controle sobre essas alterações.
Agora eu ilustrei isso com um único exemplo.
No meu exemplo aqui,
eu só estou modificando os arquivos CSS que precisam ser compilados.
Mas mais tarde, então trabalhamos com frameworks JavaScript.
Você verá que talvez queira acionar compilações quando vários arquivos tiverem sido alterados.
E tudo isso pode ser facilmente gerenciado usando essas tarefas de observação.
Será que isso, nós completamos este exercício.
Aqui, aprendemos como configurar mais alguns scripts NPM
e acionar automaticamente alguns dos scripts usando o módulo NPM onchange.
Também vimos o uso do módulo shell paralelo para executar
vários scripts NPM simultaneamente em nossa janela terminal.
Este é um bom ponto para você fazer um comentário do Git com a mensagem “NPM Scripts Part 1".