Zoeken…


Opmerkingen

Verder lezen:

De gids voor het installeren van grunt bevat gedetailleerde informatie over het installeren van specifieke, productie- of in-ontwikkeling versies van Grunt en grunt-cli.

De gids Taken configureren bevat een uitgebreide uitleg over het configureren van taken, doelen, opties en bestanden in het Gruntfile, samen met een uitleg van sjablonen, globale patronen en het importeren van externe gegevens.

De gids Taken maken geeft een overzicht van de verschillen tussen de soorten Grunt-taken en toont een aantal voorbeeldtaken en configuraties.

Introductie tot GruntJs

Grunt is een JavaScript Task Runner, gebruikt voor de automatisering van repetitieve taken zoals minificatie, compilatie, testen van eenheden, linting, etc.

Om te beginnen, wilt u Grunt's opdrachtregelinterface (CLI) wereldwijd installeren.

npm install -g grunt-cli

Een nieuw Grunt-project voorbereiden: een standaardinstallatie omvat het toevoegen van twee bestanden aan uw project: package.json en de Gruntfile.

package.json: Dit bestand wordt door npm gebruikt om metagegevens op te slaan voor projecten die zijn gepubliceerd als npm-modules. Je zult een lijst van grunt en de Grunt-plug-ins die je project nodig heeft als devDependencies in dit bestand.

Gruntfile: Dit bestand heeft de naam Gruntfile.js en wordt gebruikt om taken te configureren of te definiëren en Grunt-plug-ins te laden.

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"
  }
}

Voorbeeld gruntbestand:

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']);

};

Gruntplugins installeren

Betrouwbaarheid toevoegen

Om een gruntplugin te gebruiken, moet u deze eerst toevoegen als een afhankelijkheid van uw project. Laten we de jshint-plug-in als voorbeeld gebruiken.

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

De optie --save-dev wordt gebruikt om de plug-in toe te voegen aan het package.json , op deze manier wordt de plug-in altijd geïnstalleerd na een npm install .

De plug-in laden

U kunt uw plug-in in het gruntfile-bestand laden met loadNpmTasks .

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

De taak configureren

U configureert de taak in het gruntfile en voegt een eigenschap genaamd jshint aan het object dat wordt doorgegeven aan grunt.initConfig .

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

Vergeet niet dat u andere eigenschappen kunt hebben voor andere plug-ins die u gebruikt.

De taak uitvoeren

Om de taak gewoon met de plug-in uit te voeren, kunt u de opdrachtregel gebruiken.

grunt jshint

Of u kunt jshint toevoegen aan een andere taak.

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

De standaardtaak wordt uitgevoerd met het grunt-commando in de terminal zonder opties.



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow