Grunt - Configurazione delle attività

È possibile definire i dati di configurazione specifici del progetto per Grunt nel file Gruntfile.js .

Configurazione Grunt

I dati di configurazione dell'attività possono essere inizializzati nel Gruntfile utilizzando il metodo grunt.initConfig () . All'interno della funzione grunt.initConfig () , prendi le informazioni di configurazione dal file package.json. La configurazione conterrà un'attività denominataproperties e qualsiasi dato arbitrario.

grunt.initConfig({
   jshint: {
      // configuration for jshint task
   },
   cssmin: {
      // configuration for cssmin task
   },
   // Arbitrary non-task-specific properties
   my_files: ['dir1/*.js', 'dir2/*.js'],
});

Configurazione e obiettivi delle attività

Quando esegui un'attività, Grunt cerca la configurazione nella proprietà denominata attività. Definiremo attività con più configurazioni e opzioni di destinazione come mostrato di seguito:

grunt.initConfig({
   jshint: {
      myfile1: {
         // configuration for "myfile1" target options
      },
      myfile2: {
         // configuration for "myfile2" target options
      },
   },
   cssmin: {
      myfile3: {
         // configuration for "myfile3" target options
      },
   },
});

Qui, l' attività jshint ha destinazioni myfile1 e myfile2 e l' attività cssmin ha destinazione myfile3 . Quando si esegue il grunt jshint , itererà sia sull'attività che sulla destinazione per elaborare la configurazione della destinazione specificata.

Opzioni

Definire la proprietà delle opzioni all'interno della configurazione dell'attività che sovrascrive le impostazioni predefinite dell'attività. Ogni destinazione include proprietà delle opzioni che sovrascrivono le opzioni a livello di attività. Avrà il seguente formato:

grunt.initConfig({
   jshint: {
      options: {
         // task-level options that overrides task defaults
      },
      myfile: {
         options: {
            // "myfile" target options overrides task defaults
         },
      },

      myfile1: {
         // there is no option, target will use task-level options
      },
   },
});

File

Grunt fornisce alcune idee per specificare su quali file deve operare l'attività e utilizza modi diversi per specificare le mappature dei file src-dest . Di seguito sono riportate alcune delle proprietà aggiuntive supportate dalle mappature src e dest :

• filter- È una funzione che specifica il percorso del file src corrispondente e restituisce valori veri o falsi.

• nonull - Definisce i modelli non corrispondenti quando è impostato su true.

• dot - Corrisponde ai nomi dei file che iniziano con un punto o in altro modo.

• matchBase - Corrisponde ai modelli che contengono barre con il nome di base del percorso.

• expand - Elabora la mappatura del file src-dest.

Formato compatto

Specifica la mappatura del file src-dest per destinazione che può essere utilizzata per attività di sola lettura e richiede solo la proprietà src e nessuna proprietà dest .

grunt.initConfig({
   jshint: {
      myfile1: {
         src: ['src/file1.js','src/file2.js']
      },
   },
   cssmin: {
      myfile2: {
         src: ['src/file3.js','src/file4.js'],
         dest: 'dest/destfile.js',
      },
   },
});

Formato oggetto file

Specifica la mappatura del file src-dest per destinazione in cui il nome della proprietà è file dest e il suo valore è file src .

grunt.initConfig({
   jshint: {
      myfile1: {
         files: {
            'dest/destfile.js':['src/file1.js','src/file2.js'],
            'dest/destfile1.js':['src/file3.js','src/file4.js'],
         },
      },
      myfile2: {
         files: {
            'dest/destfile2.js':['src/file22.js','src/file23.js'],
            'dest/destfile21.js':['src/file24.js','src/file25.js'],
         },
      },
   },
});

Formato di array di file

Specifica il mapping del file src-dest per destinazione utilizzando proprietà aggiuntive per mapping.

grunt.initConfig({
   jshint: {
      myfile1: {
         files: [
            {src:['src/file1.js','src/file2.js'],dest:'dest/file3.js'},
            {src:['src/file4.js','src/file4.js'],dest:'dest/file5.js'},
         ],
      },
      myfile2: {
         files: [
            {src:['src/file6.js','src/file7.js'],dest:'dest/file8/', nonull:true},
            {src:['src/file9.js','src/file10.js'],dest:'dest/file11/', filter:'isFalse'},
         ],
      },
   },
});

Formati precedenti

Il formato di file dest-as-target era presente prima dell'esistenza dei multitasks in cui il percorso del file di destinazione è il nome del target. Il seguente formato è deprecato e non deve essere utilizzato nel codice.

grunt.initConfig({
   jshint: {
      'dest/destfile2.js':['src/file3.js','src/file4.js'],
      'dest/destfile5.js':['src/file6.js','src/file7.js'],
   },
});

Funzione di filtro personalizzato

Puoi aiutare i file di destinazione con un grande livello di dettaglio utilizzando la proprietà del filtro . Il seguente formato pulisce i file solo se corrisponde a un file effettivo.

grunt.initConfig({
   clean: {
      myfile:{
         src: ['temp/**/*'],
         filter: 'isFile',
      },
   },
});

Modelli di globbing

Globbing significa espandere il nome del file. Grunt supporta il globbing utilizzando le librerie integrate di node-glob e minimatch . Il modello di globbing include i seguenti punti:

• * corrisponde a qualsiasi numero di caratteri, ma non / .
• ? corrisponde a un singolo carattere, ma non / .
• ** corrisponde a un numero di caratteri incluso / .
• {} specifica un elenco separato da virgole di espressioni "o".
• ! annullerà la corrispondenza del pattern all'inizio.

Ad esempio -

{src: 'myfile/file1.js', dest: ...} // it specifies the single file

{src: 'myfile/*.js', dest: ...} //it matches all the files ending wth .js

{src: 'myfile/{file1,file2}*.js', dest: ...} //defines the single node glob pattern

{src: ['myfile/*.js', '!myfile/file1.js'], dest: ...} // all files will display in alpha

// order except for file1.js

Creazione dinamica dell'oggetto File

Quando si lavora con singoli file, è possibile utilizzare proprietà aggiuntive per creare dinamicamente un elenco di file. Quando imposti il ​​fileexpand proprietà su true, abiliterà alcune delle seguenti proprietà:

• cwd abbina tutti gli src a questo percorso.

• src corrisponde ai modelli da abbinare, rispetto a cwd .

• La proprietà dest specifica il prefisso del percorso di destinazione.

• ext sostituirà un'estensione esistente con un valore generato nei percorsi di destinazione .

• extDot indica dove si trova il periodo che indica l'estensione. Utilizza il primo o l' ultimo periodo; per impostazione predefinita, è impostato sul primo periodo

• flatten rimuove tutte le parti del percorso dai percorsi di destinazione .

• rinomina specifica una stringa contenente la nuova destinazione e il nome del file.

La proprietà Rename

È una funzione JavaScript unica che restituisce una stringa e non è possibile utilizzare un valore stringa per rinominare. Nel seguente esempio, l' attività di copia creerà un backup di README.md.

grunt.initConfig({
   copy: {
      backup: {
         files: [{
            expand: true,
            src: ['docs/README.md'],    // creating a backup of README.md
            rename: function () {       // specifies the rename function
               return 'docs/BACKUP.txt'; // returns a string with the complete destination
            }
         }]
      }
   }
});

Modelli

È possibile specificare i modelli utilizzando i delimitatori < %% > . Verranno espansi automaticamente quando vengono letti dal file di configurazione. Include due tipi di proprietà:

• <%= prop.subprop %>viene utilizzata per espandere il valore di prop.subprop nella configurazione che può fare riferimento a valori di stringa, array e altri oggetti.

• <% %> esegue il codice JavaScript inline che viene utilizzato per il flusso di controllo o il ciclo.

Ad esempio -

grunt.initConfig({
   concat: {
      myfile: {
         options: {
            banner: '/* <%= val %> */\n',
         },
         src: ['<%= myval %>', 'file3/*.js'],
         dest: 'build/<%= file3 %>.js',
      },
   },
   // properties used in task configuration templates
   file1: 'c',
   file2: 'b<%= file1 %>d',
   file3: 'a<%= file2 %>e',
   myval: ['file1/*.js', 'file2/*.js'],
});

Importazione di dati esterni

È possibile importare dati esterni dal file package.json . Il plugin grunt- contrib- uglify può essere usato per minimizzare il file sorgente e crea un commento banner usando i metadati. Puoi utilizzare grunt.file.readJSON e grunt.file.readYAML per importare dati JSON e YAML.

Ad esempio -

grunt.initConfig({
   pkg: grunt.file.readJSON('package.json'),
   uglify: {
      options: {
         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      dist: {
         src: 'src/<%= pkg.name %>.js',
         dest: 'dist/<%= pkg.name %>.min.js'
      }
   }
});