gruntjsAan de slag met gruntjs


Opmerkingen

Deze sectie geeft een overzicht van wat gruntjs is en waarom een ontwikkelaar het misschien wil gebruiken.

Het moet ook alle grote onderwerpen binnen gruntjs vermelden en naar de gerelateerde onderwerpen verwijzen. Aangezien de documentatie voor gruntjs nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

versies

Versie Publicatiedatum
0.3.0 2012-07-30
0.4.0 2013/02/17
0.4.1 2013/03/12
0.4.2 2013/11/20
0.4.3 2014/03/06
0.4.4 2014/03/13
0.4.5 2014/05/11
1.0.0 2016/04/04
1.0.1 2016/04/05

Helpen

Voer grunt -h uit om het volgende te zien:

  • Opdrachtregelparameters
  • Alle beschikbare zelfstandige taken in het Gruntfile van de huidige map
  • Alle subtaken van elk takenpakket in het Grunt-bestand van de huidige map

Grunt installeren

Prerequesites

Grunt vereist dat Node.js en npm zijn geïnstalleerd. Als Node.js en / of npm niet op uw computer is geïnstalleerd, gaat u naar https://nodejs.org en downloadt u het installatieprogramma of pakket voor uw besturingssysteem.

Eerste installatie

Als je Grunt voor het eerst installeert, moet je eerst het Grunt-opdrachtregelinterfacepakket grunt-cli wereldwijd installeren.

npm install -g grunt-cli

Hiermee wordt de opdrachtregelinterface voor Grunt wereldwijd geïnstalleerd, zodat u de lokale versie van Grunt in uw project kunt uitvoeren.

U kunt controleren of u het grunt-cli pakket hebt geïnstalleerd door de volgende opdracht uit te voeren:

grunt --version
 

Dit zou ten minste de huidige versie van uw grunt-cli pakket moeten afdrukken.

Grunt installeren in uw project

Nadat je grunt-cli in gebruik hebt genomen, kun je de eigenlijke grunt grunt-contrib-jshint en je eerste Grunt-pakket grunt-contrib-jshint :

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

Dit downloadt de pakketten van NPM package manager en slaat ze op als devDependencies uw package.json bestand.

Gruntfile

Vervolgens hebt u een Gruntfile.js in uw projectwortel nodig die als configuratiebestand voor Grunt-taken fungeert:

module.exports = function(grunt) {

    grunt.initConfig({
        jshint: {
            files: ['Gruntfile.js'],
        }
    });

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


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

Dit bestand doet drie dingen:

  1. Het vertelt Grunt om de grunt-contrib-jshint taak uit het NPM-pakket te laden
  2. Het adviseert de jshint taak uit te voeren tegen het bestand Gruntfile.js
  3. Het maakt een Grunt-taak met de naam default die de jshint taak jshint

Grom uitvoeren

Nadat je je project hebt ingesteld, kun je de default van Grunt uitvoeren door te bellen naar:

grunt

Dit start grunt-cli die de lokale grunt uitvoert die zoekt naar een Grunt-taak met de naam default die is geconfigureerd om de taak jshint .

Taken uitvoeren

Taken in configuratie

Alle kenmerken van grunt.initConfig zijn geldige taken, dus als uw Gruntfile er als volgt uitziet:

module.exports = function(grunt) {

    grunt.initConfig({
        jshint: {
            files: ['Gruntfile.js'],
        }
    });

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


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

Het shell-commando $ grunt jshint zal de jshint taak uitvoeren.

Taken met doelen

Taken kunnen verschillende doelen hebben. Neem dit codefragment bijvoorbeeld:

    grunt.initConfig({
        jshint: {
            gruntfile: {
                files: ['Gruntfile.js']
            },
            project: {
                files: 'src/**/*.js'
            }
        }
    });
 

Hier kan jshint zich richten op het gruntfile of alle JavaScript-bestanden van uw project. Als we $ grunt jshint beide doelen gebruikt, maar als we $ grunt jshint:gruntfile de linter alleen toegepast op het gruntfile.

Geregistreerde taken

De standaardtaken worden geregistreerd zoals deze grunt.registerTask('default', ['jshint']); wordt uitgevoerd met het shell-commando $ grunt .

Nieuwe geregistreerde taken worden uitgevoerd en geven hun naam door als een opdrachtregelargument. Bijvoorbeeld:

grunt.registerTask('gruntfile', ['jshint:gruntfile']);
 

Zal draaien met $ grunt gruntfile .