Ricerca…


Osservazioni

Ulteriori letture:

La guida Installazione grunt contiene informazioni dettagliate sull'installazione di versioni specifiche, di produzione o in fase di sviluppo di Grunt e grunt-cli.

La guida Configurazione delle attività contiene una spiegazione approfondita su come configurare attività, destinazioni, opzioni e file all'interno del Gruntfile, insieme a una spiegazione di modelli, modelli di globbing e importazione di dati esterni.

La guida Creazione delle attività elenca le differenze tra i tipi di attività di Grunt e mostra un numero di attività e configurazioni di esempio.

Introduzione a GruntJs

Grunt è un Task Runer JavaScript, utilizzato per l'automazione di attività ripetitive come minification, compilation, unit test, linting, ecc.

Per iniziare, ti consigliamo di installare l'interfaccia a riga di comando (CLI) di Grunt a livello globale.

npm install -g grunt-cli

Preparazione di un nuovo progetto Grunt: una configurazione tipica prevede l'aggiunta di due file al progetto: package.json e Gruntfile.

package.json: questo file viene utilizzato da npm per memorizzare i metadati per i progetti pubblicati come moduli npm. Elencherai i plugin Grunt e Grunt necessari per il tuo progetto come devDependencies in questo file.

Gruntfile: questo file è denominato Gruntfile.js e viene utilizzato per configurare o definire attività e caricare plugin Grunt.

Example package.json:

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

Esempio gruntfile:

module.exports = function(grunt) {

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

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

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

};

Installazione di gruntplugins

Aggiungere dipendenza

Per usare un gruntplugin, devi prima aggiungerlo come dipendenza al tuo progetto. Usiamo il plugin jshint come esempio.

npm install grunt-contrib-jshint --save-dev

L'opzione --save-dev viene utilizzata per aggiungere il plug-in in package.json , in questo modo il plug-in viene sempre installato dopo l' npm install .

Caricamento del plugin

Puoi caricare il tuo plugin nel file loadNpmTasks usando loadNpmTasks .

grunt.loadNpmTasks('grunt-contrib-jshint');

Configurazione dell'attività

Si configura l'attività nel gruntfile aggiungendo una proprietà chiamata jshint all'oggetto passato a grunt.initConfig .

grunt.initConfig({
  jshint: {
    all: ['Gruntfile.js', 'lib/**/*.js', 'test/**/*.js']
  }
});

Non dimenticare che puoi avere altre proprietà per altri plugin che stai utilizzando.

Esecuzione dell'attività

Per eseguire semplicemente l'attività con il plugin è possibile utilizzare la riga di comando.

grunt jshint

Oppure puoi aggiungere jshint a un'altra attività.

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

L'attività predefinita viene eseguita con il comando grunt nel terminale senza alcuna opzione.



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow