E' ora di iniziare a Grunting.
In questo e nel prossimo esercizio ripeteremo lo
stesso tipo di configurazione che abbiamo fatto con gli script NPM.
Nella prima parte, abbiamo intenzione di impostare la conversione da SCSS a CSS.
Quindi imposteremo un'attività di orologio e serviremo anche il codice utilizzando la sincronizzazione del browser.
Nella seconda parte dell'esercizio,
useremo Usman e i vari compiti per preparare la distribuzione.
Questi esercizi non sono affatto l'unico modo per
implementare configurazioni Grunt o file di chiamata.
Questa è solo un'illustrazione di come possiamo utilizzare questi strumenti.
Potresti voler inventare il tuo modo di impostare il tuo file
Grunt e il tuo file di chiamata per i tuoi progetti.
Il nostro primo passo per fare uso di Grunt è impostare la Grunt CLI come modulo NPM globale.
Per fare ciò, aggiungere il tipo di prompt: NPM -g install Grunt CLI.
Questa è l'interfaccia a riga di comando per Grunt.
Una volta che questo è impostato,
allora imposteremo un modulo Grunt NPM locale per l'uso all'interno dei nostri progetti.
La Grunt CLI ci permette di usare Grunt.
Abbiamo creato la CLI di Grunt.
Quindi il prossimo passo è impostare - Grunt localmente,
quindi; NPM installa Grunt meno meno save dev.
Quindi installare Grunt localmente.
Una volta completati questi due passaggi,
il passo successivo è quello di andare al nostro progetto e quindi creare un nuovo file,
e lo chiameremo come Gruntfile.js.
All' interno di questo Gruntfile.js, imposteremo il codice per configurare le nostre attività Grunt.
In questo file, il primo passo è aggiungere 'use strict' significato,
'use strict' codice JavaScript.
Quindi dici module.exports
= funzione (grugnito).
Quindi qui dentro, imposteremo la configurazione Grunt per tutte le attività.
Come ho accennato in precedenza, Grunt è un task runner basato sulla configurazione.
Quindi, installeremo i vari plug-in Grunt per
le varie attività e poi li configureremo nel nostro file Grunt.
Per fare la configurazione,
aggiungeremo il codice qui,
dicendo: grunt.initConfig
e all'interno di questo InitConfig,
aggiungeremo nella configurazione per le attività Grunt della ruota.
Una volta completato questo,
salviamo le modifiche.
Nel nostro prossimo passo,
imposteremo alcuni plug-in Grunt per permetterci di convertire il codice SCSS in codice CSS.
Per fare ciò, installerò un modulo NPM chiamato
Grunt SASS — Grunt SASS, save def.
Oltre a questo,
configurerò altri due moduli Grunt chiamati,
NPM Install Time Grunt e Jit Grunt.
Questi due moduli — Time Grunt e Jit grunt.
Il modulo Time Grunt stampa le statistiche del tempo per l'esecuzione delle varie attività Grunt.
Il modulo Jit Grunt viene utilizzato per caricare in
quei plug-in Grunt ogni volta che sono richiesti all'interno di qualsiasi applicazione.
L' altra alternativa è caricare
i vari moduli Grunt esplicitamente nel file di configurazione di Grunt.
Preferisco usare Jit Grunt
in modo che si occupi di caricare qualsiasi plug-in Grunt
di cui ho bisogno, come quando li uso nel codice.
Installare questi due Time Grunt e Jit Grunt e una volta installati,
allora è il momento di configurare il nostro compito di conversione SASS.
Ora ovviamente devi chiederti perché digitiamo questo
module.exports e quindi funziona e così via.
Questo è il modo in cui definiamo i moduli nodo. Ci
occuperemo della struttura dei moduli nodo e perché usiamo questo approccio
nel corso dei moduli nodo lato server più avanti nella specializzazione.
Per il momento, basta accettare che è così che il codice è scritto per Grunt,
perché il file Grunt è esso stesso
un modulo nodo che sta per caricare in vari plug-in Grunt.
Dopo averlo fatto, abbiamo intenzione di richiedere un paio di plugin Grunt qui.
Per fare ciò, diremo require ('time- grunt'),
e diremo grunt rispetto alla configurazione che usiamo per il caricamento nel Time Grunt.
Richiedere, come si impara più tardi quando si impara sui moduli nodo,
è un modo per dire che il carico nel modulo nodo Time Grunt da
utilizzare all'interno di questo particolare modulo nodo.
Allo stesso modo, richiederò il modulo nodo Jit Grunt.
Questo modulo nodo Jit Grunt si assicura che si caricherà in
qualsiasi altro modulo nodo o qualsiasi altro plug-in Grunt - che sono moduli nodo,
fondamentalmente, come quando sono effettivamente impliciti all'interno del mio Grunt per fare varie attività.
L' alternativa sarebbe quella di caricare manualmente in ciascuno di
questi plug-in Grunt esplicitamente utilizzando l'istruzione richiesta.
Mi sto risparmiando un po 'di problemi usando semplicemente Jit Grunt,
che si occupa di caricare quei moduli nodo quando richiesto.
Ora passando nella configurazione,
come abbiamo capito, Grunt lavora sulla configurazione,
quindi ogni plug-in Grunt che vogliamo utilizzare per eseguire un'attività,
deve essere configurato all'interno di questo file Grunt InitConfig.
Questa configurazione è fondamentalmente un oggetto JavaScript.
Se si ha familiarità con gli oggetti JavaScript,
si inizia a capire la sintassi molto, molto rapidamente.
Il primo compito che ho intenzione di configurare è SASS.
Quindi, scrivo SASS qui,
e poi dentro SASS, dico dist.
Ora devi credere che questo sia il modo in cui viene eseguita la configurazione.
Quindi, dico dist,
e poi dentro,
dico file, e poi dentro,
specifico i file che devono essere convertiti.
Dico, CSS/styles.CSS,
che dipende da CSS/Styles.scss.
Con questo, completiamo qui la configurazione del compito SASS.
Una volta completata la configurazione dell'attività SASS,
se si desidera veramente eseguire l'attività SASS,
quindi in basso si configura l'attività SASS dicendo «grunt.registerTask»,
e poi chiamerò questa attività CSS,
e poi lo farò,
tra parentesi scriba, dire «SASS».
Ora, per capire la sintassi qui,
questo come puoi vedere dice «grunt.registerTask» e il nome di questa attività è CSS.
E cosa comporta questo compito?
Questa attività prevede l'esecuzione dell'attività SASS che è già stata configurata qui.
Questo è il modo in cui leggiamo questa sintassi qui.
Se non si desidera, non è necessario configurarlo,
perché utilizzeremo SASS insieme al task watch per
eseguire automaticamente il SASS quando il nostro file SCSS viene modificato.
Con questo, salviamo le modifiche.
Permettetemi di mostrarvi questo particolare compito in azione.
Se configuri l'attività con il nome CSS lì,
aggiungi il prompt,
puoi digitare «grunt.CSS» e quindi eseguirà
l'attività di conversione del codice sass in codice CSS.
Andando al prompt dei comandi, al prompt,
digitare «grunt.CSS» e vedrai
l'attività SASS in esecuzione e quindi convertire il file styles.sess in file styles.CSS.
Inoltre, come puoi vedere,
il Time Grunt stamperà statistiche come questa
per indicare quanto tempo ha impiegato ciascuna di queste attività.
Se questo ti interessa,
puoi guardare questi dettagli qui.
Nel nostro prossimo passo, ci accingiamo a configurare l'orologio e il server,
al fine di tenere un controllo sui
file SASS e convertirli automaticamente quando vengono cambiati,
e poi imposteremo il server,
utilizzando BrowserSync per servire il nostro sito web.
Per impostare le attività di Guarda e Servi,
installerò un paio di altri plug-in grugniti,
quindi dirò npm install,
grunt-contrib-watch meno save-dev.
Quindi questo è il grunt-contrib-watch.
Grunt plug-in che è un modulo nodo, quindi installalo.
Così il plugin Watch ti permette di tenere un controllo sui tuoi vari file.
Il prossimo plug-in che
installerò è grunt-browser-sync.
Il modulo BrowserSync è quello che farò uso di,
per salvare i file dalla mia cartella di progetto, in
modo da poter vedere il sito web in un browser.
Una volta installati quei due moduli,
è il momento di entrare nel mio grunt.initconfig
e quindi configurare le due attività.
Uno per tenere un orologio,
il secondo per servire i file usando BrowserSync.
Quindi, tornando al mio initconfig,
metti una virgola lì dopo il SASS,
e poi passa alla riga successiva.
Ricordati sempre di mettere questa virgola lì.
Una virgola mancante causa un sacco di mal di testa quando stai cercando di eseguire le tue attività grugnito.
È molto difficile identificare che hai perso una virgola.
Quindi è importante prestare attenzione
alla sintassi e assicurarsi di non perdere nessuna di queste virgole.
Tornerà a morderti al momento sbagliato.
Quindi il prossimo compito,
che ho intenzione di configurare è WatchTask.
Quindi dico Guarda e cosa voglio guardare?
Voglio guardare questi file, che è CSS/*.SCSS.
Quindi questo è il file SCSS che voglio guardare.
Tutti i file SCSS nella mia cartella CSS.
Se qualcuno di essi viene modificato,
l'attività corrispondente che eseguirò è SASS.
L' attività SASS che ho già configurato in precedenza.
Quindi con questo, ho configurato il mio watchTask,
per tenere un controllo sui file SCSS e quindi
convertirli automaticamente invocando il SASS.
Ora con WatchTask posso effettivamente tenere un controllo su diversi file
e quindi richiamare automaticamente le attività corrispondenti per quei file.
Quindi, ad esempio, posso tenere d'occhio i
miei file JavaScript e quindi fare automaticamente suggerimenti JS,
quando i miei file cambiano.
O per fare l'identificazione e così via.
Ora, il prossimo che ho intenzione di configurare è BrowserSync.
Ancora una volta non dimenticare la virgola dopo WatchTask,
quindi digitare BrowserSync.
Direi BrowserSync qui e poi per BrowserSync,
direi configurare un'attività all'interno.
Ora, questa è la sintassi che usiamo per inserire
la configurazione all'interno del nostro file grunt.
Quindi dice BrowserSync dev.
Ora, se mi chiedete perché,
abbiamo solo bisogno di leggere la documentazione,
per ognuno di questi plug-in e poi capire come configurare quei plug-in.
Quindi, ho già letto la documentazione e ho capito
alcune impostazioni di base per ciascuna di queste attività, ecco perché li sto semplicemente digitando.
Ovviamente, se vuoi una maggiore flessibilità,
potresti voler leggere la documentazione corrispondente e quindi scoprire
altri modi per configurare queste attività.
La mia configurazione qui è solo un modo per affrontare o risolvere i problemi.
Quindi qui specifico i BSFiles,
quindi questo file specifica quali file devono essere osservati
dal mio BrowserSync e poi quando uno di questi file cambia,
allora il mio BrowserSync farà sì che il browser venga ricaricato.
Quindi ho intenzione di guardare tutti i file nella mia cartella CSS,
i file HTML nella mia cartella di progetto
e poi tutti i miei file JavaScript nella cartella JS.
Quindi, con questo ho configurato tutti quei file su cui ho intenzione di tenere un orologio,
e quindi causare automaticamente un ricarico della mia pagina quando richiesto.
E poi, la prossima configurazione che devo
fare è alcune altre opzioni, per il mio BrowserSync.
Quindi le opzioni che ho intenzione di specificare sono,
watchTask true, il che significa che c'è un WatchTask in esecuzione
e la directory di base per il mio server.
Quindi dico BaseDir,
e poi specifico, punto barra.
Quindi la directory corrente,
come la mia directory di base.
Quindi con queste modifiche,
lasciami salvare le modifiche al mio file grunt,
e poi scenderò sotto e quindi configurerò un'altra attività grunt, qui chiamata default.
Quindi, vorrei specificare l'attività come predefinita.
Per questa attività predefinita, cosa devo fare?
Ho bisogno di eseguire
BrowserSync e anche il secondo compito che ho intenzione di fare è guardare.
Dovrò eseguire prima l'attività BrowserSync e poi il WatchTask in seguito.
Perché l'attività BrowserSync inizierà a servire il mio server.
Se eseguo prima il WatchTask e l'attività BrowserSync in seguito,
il WatchTask fondamentalmente
fermerà tutto e quindi tutte le attività rimanenti dietro che non verranno eseguite.
Quindi, se si utilizza WatchTask,
farlo come ultimo nella sequenza specificata in queste parentesi quadre.
Con questo, il mio progetto è ora configurato,
sia per tenere un controllo sui miei file SASS che per servirlo quando necessario.
Quindi, questo completa il mio file grunt,
torniamo al nostro terminale.
Tornando al mio terminale,
ho aperto un'altra scheda e poi in questa scheda,
eseguirò l'attività grunt,
che manterrà anche il mio BrowserSync in esecuzione e servirà
i file e ricaricherà automaticamente la pagina web,
se uno di questi file cambia.
Quindi, se configuri un'attività come attività predefinita come abbiamo fatto nell'esercizio,
al prompt,
ho solo bisogno di digitare grunt e quindi eseguirà automaticamente l'attività predefinita.
Una volta che le mie attività grunt iniziano a funzionare,
puoi vedere che ha avviato BrowserSync e sta servendo
i file e anche sta eseguendo il watchTask,
che è in attesa di eventuali modifiche per eseguire automaticamente l'attività SCSS.
Per dimostrarti come verrà attivata l'attività SCSS,
ogni volta che apporto modifiche al mio file Styles.scss,
quindi ho portato il file Styles.scss
e sto semplicemente andando a salvare questo file.
E poi noterai che immediatamente,
sul lato sinistro l'attività SASS viene richiamata ed eseguita e quindi ricompila e questo
causerà anche la modifica del file Styles.scss, dopo essere stato ricompilato.
Quindi questo attiverà BrowserSync per ricaricare automaticamente la mia pagina web.
Con questo, completiamo il nostro esercizio grugnito parte uno.
Questo è un buon momento per salvare i file,
nel repository Git con il messaggio Grunt parte uno.