Ora che abbiamo una comprensione
dei vari passaggi coinvolti nella costruzione e distribuzione del nostro sito web,
e anche una breve introduzione agli script NPM nella lezione precedente,
facciamo un tuffo nello sviluppo di
script NPM per automatizzare molte delle attività di cui avevamo parlato in precedenza.
Come hai visto nella lezione precedente,
abbiamo già un paio di script NPM che avevamo incluso nel nostro file package.json,
uno per avviare il server lite e il secondo
per convertire il codice SCSS in CSS.
In questo esercizio e nel prossimo,
esploreremo gli script NPM in modo un po 'più dettagliato.
Per iniziare, facciamo prima un po 'di pulizia sul file index.html.
Andando al file index.html,
vediamo che abbiamo questo codice JavaScript nella parte inferiore di questo file index.html.
Preferirei mantenere questo codice JavaScript in
un file separato che contiene tutti i nostri script
e quindi includere quel file nel mio index.html.
Per fare ciò, creiamo un'altra cartella qui con il nome js.
E in questa cartella js,
creerò un nuovo file con il nome scripts.js.
E andando a index.html,
ho intenzione di tagliare semplicemente questo codice JavaScript da qui e
poi incollarlo nel file scripts.js,
e quindi salvare le modifiche al file scripts.js.
Ora che abbiamo spostato tutto il nostro codice JavaScript nel proprio file,
ho intenzione di includere quel file JavaScript nel mio index.html proprio lì.
Direi <script src =
«js/scripts.js» Quindi in questo modo,
tutto il mio codice JavaScript è ora incluso nel mio file index.html.
In questo modo, il mio file index.html contiene tutto il codice html
e tutto il mio codice CSS e JavaScript sono disattivati nei loro file separati.
Lasciami copiare questa riga di script dalla pagina index.html,
quindi andare alla pagina aboutus.html,
scorrere verso il basso fino in fondo dove ho incluso
altri script e quindi incollarlo.
Allo stesso modo, lasciami andare alla pagina contactus.html
e scorrere di nuovo verso il basso fino alla parte inferiore del file lì.
Lasciami incollare questa linea.
Salviamo le modifiche e passiamo al passaggio successivo.
Il prossimo passo che vorrei fare è installare un paio di
moduli NPM che farò uso per automatizzare alcune attività.
Il primo modulo NMP che installerò è chiamato onchange.
Questo modulo onchange sta andando a guardare i file nella mia cartella del progetto,
e poi ogni volta che quei file cambiano,
allora attiva automaticamente un'attività da eseguire.
In questo modo, ad esempio,
se imposto un orologio dequotazione su alcuni file,
ad esempio il mio file SCSS,
quindi ogni volta che apporto modifiche al mio file SCSS,
verrà automaticamente ricompilato nel file CSS corrispondente.
Abbiamo già lo script che fa la ricompilazione.
Quindi tutto quello che devo fare è impostare un orologio su quel particolare file.
Ora questo è dove ho intenzione di fare uso del modulo NPM chiamato Onchange.
C' è un altro modello NPM chiamato Watch,
che è anche possibile utilizzare per lo stesso scopo.
In questo esercizio ho intenzione di utilizzare il modulo Onchange,
poi ci occuperemo di concedere e sorseggiare nelle lezioni successive,
useremo il modulo Watch per lo stesso scopo.
Inoltre, installerò anche un altro modulo NPM chiamato shell parallela.
Questo modulo Parallelshell mi permette di eseguire
più script NPM in Parallelshells come suggerisce il nome.
Quindi in questo modo, è possibile
eseguire contemporaneamente più script NPM e consentirmi di tenere d'occhio vari file
e anche di eseguire altre attività.
Quindi consente di installare questi due moduli NPM.
Li installeremo localmente in questo particolare progetto.
Quindi per farlo digiterò npm install.
Devo —save-dev e poi direi onchange
e parallelshell e quindi attendere che questi due moduli NPM vengano installati.
Una volta installati i due moduli,
includerò un paio di script NPM nel mio file package.json.
E vi spiegherò il motivo perché includiamo quei copioni lì.
Tornando al mio file package.json,
subito dopo questo SCSS,
includerò un altro script chiamato «watch: scss».
E come suggerisce il nome,
questo sta andando a tenere d'occhio i file SCSS.
Quindi questo è dove invocherò il modulo NPM onchange che ho appena installato,
e poi direi codice singolo 'css/*.scss».
Quindi il che significa che tenere d'occhio tutti i file SCSS che ci sono nella cartella CSS.
Se qualcuno di loro cambia,
allora attiverai questo particolare script e lo script è «—npm
run scss» perché questo
è lo script che farà la ricompilazione del mio codice SCSS nel codice CSS corrispondente.
Quindi con questo, ho impostato un orologio per il mio SCSS.
Ovviamente posso digitare «nmp watch: scss».
E poi attiverà lo script lì con il modulo onchange,
quindi terrà un controllo su questo.
Se stai facendo questo esercizio su un computer Windows,
invece della citazione singola nello script,
dovresti sostituirlo con la barra rovesciata e la virgoletta doppia.
Allo stesso modo, l'altra singola citazione
sostituisce anche quella con la barra rovesciata e la doppia virgoletta.
Quindi, questo è come apparirà lo script su una macchina Windows.
Ora, ho intenzione di fare uso di Parallelshell
per attivare più di questi script per essere contemporaneamente attivi.
Quindi direi «parallelshell»,
e poi tra virgolette,
direi 'npm run watch: scss'.
Quindi Parallelshell prende più di questi come parametri,
ognuno tra virgolette singole lì.
E il secondo è 'npm run lite'.
Quindi puoi vedere che questo Parallelshell mi permette di eseguire due script contemporaneamente,
uno per tenere d'occhio il mio file SCSS,
l'altro per eseguire la shell lite.
Se stai facendo questo esercizio su una macchina Windows,
invece del singolo codice nello script,
dovresti sostituirlo con la barra rovesciata e la doppia virgoletta.
Allo stesso modo, l'altra singola citazione
sostituisce anche quella con la barra rovesciata e la doppia virgoletta.
Quindi questo è come apparirà lo script su una macchina Windows.
Ora, dopo aver fatto queste modifiche,
lasciami salvare le modifiche e poi andrò
qui e poi avviare uno script che ho qui.
Lo cambierò da «npm run lite» a «npm run watch: all».
E salva le modifiche qui.
Quindi con questo, gli script di cui ho bisogno sono ora impostati.
Così ora, posso andare avanti e fare
«npm start» e che fondamentalmente avvierà questi due script contemporaneamente,
uno tenendo d'occhio i miei file SCSS che a sua volta
attiverà la compilazione di SCSS a CSS,
l'altro che avvia il mio server lite.
Ora, ho iniziato sotto scheda tabella e poi spostato nella cartella del progetto,
e quindi aggiungere il prompt.
Digiterò «npm start».
E questo dovrebbe attivare
sia il mio server lite che salverà i file dalla mia cartella confusione,
sia anche attivare il modulo Onchange per tenere d'occhio i file SCSS.
Per aiutarti a illustrarti come questo Onchange mantiene un orologio sui miei file SCSS,
quello che ho intenzione di fare è andare al mio file styles.scss qui,
e quindi semplicemente salvare il file di nuovo.
Ora ogni volta che questo file viene salvato,
non ho intenzione di apportare alcuna modifica ad esso.
Sto solo andando a colpire il salvataggio sul file.
Quindi, ogni volta che questo file viene modificato,
vedrai che immediatamente
Onchange attiverà lo script SAS del nodo da eseguire,
che compilerà il file da SCSS a CSS e crea il file CSS qui,
e quindi salva il file che attiverà anche la
mia pagina web per essere ricaricata nel browser.
Quindi, questo è essenzialmente ciò che abbiamo ottenuto utilizzando il modulo Onchange per tenere
d'occhio i file che poi modificati
attiverà automaticamente alcuni degli script NPM.
Ora, questo ci libera dalle preoccupazioni circa la necessità di attivare manualmente questi compiti.
Ad esempio, se si dispone di un insieme di attività che si desidera attivare automaticamente,
si verificano alcune modifiche.
È possibile impostare facilmente tali attività di orologio per tenere un controllo su queste modifiche.
Ora l'ho illustrato con un solo esempio.
Nel mio esempio qui,
sto solo modificando i file CSS che devono essere compilati.
Ma più tardi, allora lavoriamo con framework JavaScript.
Si vedrebbe che si potrebbe desiderare di attivare compilazioni quando vari file sono cambiati.
E tutti questi possono essere facilmente gestiti utilizzando questi compiti orologio.
Sarà questo, completiamo questo esercizio.
Qui, abbiamo imparato come impostare alcuni altri script NPM
e attivare automaticamente alcuni degli script utilizzando il modulo onchange NPM.
Abbiamo anche visto l'uso del modulo shell parallela per eseguire
più script NPM contemporaneamente nella nostra finestra terminale.
Questo è un buon punto per fare un commento Git con il messaggio «NPM Scripts Part 1".