Grunt - Guida introduttiva

Per utilizzare Grunt, è necessario che Node.js sia installato. L'installazione di Node.js è stata spiegata nel capitolo precedente . Puoi installare i plugin Grunt e Grunt utilizzando il gestore di pacchetti Node.js.

Prima di configurare Grunt sul sistema, puoi aggiornare il gestore di pacchetti Node utilizzando il seguente comando:

npm update -g npm

Se stai usando Mac o Linux, devi usare sudo word all'inizio della riga di comando per concedere l'accesso come amministratore come mostrato di seguito -

sudo npm update -g npm

Installazione CLI

CLI sta per Command Line Interface che esegue la versione di Grunt che è stata installata. Per iniziare con Grunt, è necessario installare l'interfaccia a riga di comando (CLI) di Grunt a livello globale come mostrato di seguito -

npm install -g grunt-cli

L'esecuzione del comando precedente inserirà il comando grunt nel percorso di sistema, che lo farà eseguire da qualsiasi directory. Non è possibile installare Grunt task runner installando grunt-cli . Consente a una macchina di installare più versioni di Grunt contemporaneamente.

Funzionamento della CLI

La CLI cerca il Grunt installato sul tuo sistema usando il sistema require () ogni volta che Grunt viene eseguito. Usando grunt-cli , puoi eseguire Grunt da qualsiasi directory nel tuo progetto. Se stai usando Grunt installato localmente, grunt-cli usa la libreria Grunt installata localmente e applica la configurazione dal file Grunt.

Lavorare con un progetto nuovo e esistente

Se stai lavorando con un progetto già configurato che include package.json e Gruntfile , segui i semplici passaggi come specificato di seguito:

Trova il percorso della directory principale del progetto.
È possibile installare le dipendenze utilizzando il comando npm install .
Esegui Grunt usando il comando grunt .

Se stai creando un nuovo progetto, includi i due file package.json e Gruntfile nel tuo progetto.

package.json- Il file package.json viene posizionato nella directory principale del progetto e viene utilizzato per eseguire ciascuna dipendenza elencata ogni volta che si esegue il comando npm install nella stessa cartella.
Gruntfile.js - Il file Gruntfile.js viene utilizzato per scrivere le impostazioni di configurazione per il progetto.

package.json

Il file package.json si trova nella directory principale del progetto, accanto al Gruntfile e viene utilizzato per eseguire ogni dipendenza elencata ogni volta che si esegue il comando npm install nella stessa cartella.

Puoi creare package.json in diversi modi come elencato di seguito:

Puoi grunt-init per creare il file package.json.
È inoltre possibile creare il file package.json utilizzando il comando npm-init .

È possibile scrivere le specifiche come mostrato di seguito -

{
   "name": "tutorialspoint",
   "version": "0.1.0",
   "devDependencies": {
      "grunt-contrib-jshint": "~0.10.0",
      "grunt-contrib-nodeunit": "~0.4.1",
      "grunt-contrib-uglify": "~0.5.0"
   }
}

Puoi aggiungere Grunt e gruntplugins in un file pacakge.json esistente utilizzando il seguente comando:

npm install <module> --save-dev

Qui, <module> rappresenta il modulo da installare localmente. Il comando precedente installerà il modulo specificato e lo aggiungerà automaticamente alla sezione devDependencies .

Ad esempio, il seguente comando installerà l'ultima versione di Grunt e la aggiungerà a devDependencies -

npm install grunt --save-dev

Gruntfile

Il file Gruntfile.js è un luogo predefinito in cui verranno inserite le impostazioni di configurazione per Grunt. Il file Grunt include le seguenti parti:

La funzione wrapper
Configurazione di progetti e attività
Caricamento di plug-in e attività di Grunt
Attività personalizzate

Il file Gruntfile.js di base è come mostrato di seguito -

// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {

   // CONFIGURE GRUNT
   grunt.initConfig({
      // get the configuration info from package.json file
      // this way we can use things like name and version (pkg.name)
      pkg: grunt.file.readJSON('package.json'),

      // all of our configuration goes here

   });

   // Load the plugin that provides the "uglify" task
   grunt.loadNpmTasks('grunt-contrib-uglify');

   // Default task(s)
   grunt.registerTask('default', ['uglify']);
};

Funzione wrapper

Nel codice sopra, module.exports è una funzione wrapper in cui l'intera configurazione va all'interno di questa funzione. È un modo per mostrare la configurazione al resto dell'applicazione.

module.exports = function(grunt) {
   //do grunt-related things here
}

Configurazione di progetti e attività

Puoi configurare le attività di Grunt, una volta che la configurazione di Grunt è pronta. La configurazione del progetto può essere scritta nella sezione grunt.initConfig () . All'interno della funzione grunt.initConfig () , prendi le informazioni di configurazione dal file package.json e salvalo in pkg . Puoi chiamare il nome del tuo progetto usando pkg.name e version con pkg.version .

Caricamento di plug-in e attività di Grunt

Carica le attività da un plug-in specificato utilizzando il metodo grunt.loadNpmTasks . È possibile installare il plug-in in locale utilizzandonpme deve essere relativo al Gruntfile. Puoi caricare il plugin con un semplice comando come mostrato di seguito -

grunt.task.loadNpmTasks(pluginName)

Attività personalizzate

Quando esegui Grunt tramite la riga di comando, il Grunt cercherà l' attività predefinita . Nel codice sopra, stiamo usando un'attività chiamata uglify che può essere eseguita usando il comando grunt . È lo stesso dell'esecuzione esplicita del comando grunt uglify e puoi specificare il numero di attività nell'array.

grunt.registerTask('default', ['uglify']);