Wie man grunt installiert und wie man ein Skript damit erstellt


86

Hallo, ich versuche Grunt unter Windows 7 64 Bit zu installieren. Ich habe Grunt mit Befehlen installiert

 npm install -g grunt
 npm install -g grunt-cli

aber jetzt, wenn ich es versuche grunt init, wirft es mir einen Fehler -

Eine gültige Grunt-Datei wurde nicht gefunden. Weitere Informationen zum Konfigurieren von grunt finden Sie in der Anleitung für die ersten Schritte : http://gruntjs.com/getting-started Schwerwiegender Fehler: Gruntfile konnte nicht gefunden werden.

Aber wenn ich in den Grunzordner auf meinem System schaue, Gruntfile.jsist der da. Kann mir bitte jemand zeigen, wie man dieses Grunzen richtig installiert und wie man mit dem Grunzen ein erstelltes Skript schreibt? Ich habe eine HTML-Seite und ein Java-Skript. Wenn ich ein Skript mit Grunt erstellen möchte, wie kann ich das tun?


1
npm install -g gruntbedeutet, Grunt global zu installieren, was nicht mehr empfohlen wird (beginnend mit Grunt 0.4).
Ludder

Antworten:


228

Um den GruntJS-Build einzurichten, gehen Sie wie folgt vor:

  1. Stellen Sie sicher, dass Sie Ihre package.jsonoder eine neue eingerichtet haben:

    npm init
    
  2. Installieren Sie die Grunt-CLI als global:

    npm install -g grunt-cli
    
  3. Installieren Sie Grunt in Ihrem lokalen Projekt:

    npm install grunt --save-dev
    
  4. Installieren Sie alle Grunt-Module, die Sie möglicherweise in Ihrem Erstellungsprozess benötigen. Nur für dieses Beispiel werde ich das Concat-Modul zum Kombinieren von Dateien hinzufügen:

    npm install grunt-contrib-concat --save-dev
    
  5. Jetzt müssen Sie Ihre Gruntfile.jseinrichten, die Ihren Erstellungsprozess beschreibt. Für dieses Beispiel kombiniere ich einfach zwei JS-Dateien file1.jsund file2.jsim jsOrdner und generiere app.js:

    module.exports = function(grunt) {
    
        // Project configuration.
        grunt.initConfig({
            concat: {
                "options": { "separator": ";" },
                "build": {
                    "src": ["js/file1.js", "js/file2.js"],
                    "dest": "js/app.js"
                }
            }
        });
    
        // Load required modules
        grunt.loadNpmTasks('grunt-contrib-concat');
    
        // Task definitions
        grunt.registerTask('default', ['concat']);
    };
    
  6. Jetzt können Sie Ihren Erstellungsprozess mit dem folgenden Befehl ausführen:

    grunt
    

Ich hoffe, dies gibt Ihnen eine Idee, wie Sie mit GruntJS Build arbeiten können.

HINWEIS:

Sie können grunt-initzum Erstellen verwenden, Gruntfile.jswenn Sie eine assistentenbasierte Erstellung anstelle einer Rohcodierung für Schritt 5 wünschen.

Führen Sie dazu bitte die folgenden Schritte aus:

npm install -g grunt-init
git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile
grunt-init gruntfile

Für Windows - Benutzer: Wenn Sie cmd.exe verwenden , müssen Sie Änderungen ~/.grunt-init/gruntfilean %USERPROFILE%\.grunt-init\. PowerShell erkennt das ~richtig.


das habe ich gesucht, danke. Ist es auch erforderlich, dass gruntfile.js im Projektstammordner abgelegt wird (kann es unter Windows nicht anders funktionieren)?
Chester89

1
Könnte Schritt 5 ganz einfach mit eingerichtet werden grunt init:gruntfile? Ich habe es versucht, aber ich erhalte immer eine Fehlermeldung : Fatal error: Unable to find Gruntfile. Ist die Erstellung von Gruntfile.js immer ein manueller Prozess? Wenn ja, sehe ich einen Vorteil bei der Verwendung von Yeoman, wo eine Gruntfile.js automatisch generiert wird (und dies gilt immer noch für Projekte, die ich erstellen würde, die eigentlich keine Webapps sind.
Micah

@micah, Sie können das Grunt-Init-Tool verwenden, um Gruntfile einfach zu erstellen. Ich werde den Hauptbeitrag aktualisieren und als Notiz hinzufügen.
Qorbani

@qorbani Dann bin ich verwirrt. In einem Verzeichnis für dieses Nicht-Grunz-Projekt habe ich bereits die Schritte 1 bis 4 ausgeführt. Jetzt bin ich einfach gelaufen npm install -g grunt-initund es wurde erfolgreich installiert. Ich folgte dem mit grunt init:gruntfileund es gibt mir immer noch den gleichen schwerwiegenden Fehler. Was vermisse ich?
Micah

grunt init: gruntfile ist nicht korrekt. grunt-init ist ein anderer Helfer für vorlagenbasiertes Gerüst und Sie müssen die gruntfile-Vorlage installieren, um Gruntfile.js
Qorbani

8

Einige Zeit müssen wir die Variable PATH für WINDOWS setzen

% USERPROFILE% \ AppData \ Roaming \ npm

Nach diesem Test mit where grunt

Hinweis: Vergessen Sie nicht, das Eingabeaufforderungsfenster zu schließen und erneut zu öffnen.


5

Ich habe das gleiche Problem, aber ich habe es gelöst, indem ich meine Grunt.js in Gruntfile.js geändert habe. Überprüfen Sie Ihren Dateinamen, bevor Sie grunt.cmd unter Windows cmd eingeben (wenn Sie Windows verwenden).


2

Sie sollten grunt-cli in den devDependencies des Projekts installieren und dann über ein Skript in Ihrer package.json ausführen. Auf diese Weise verwenden andere Entwickler, die an dem Projekt arbeiten, alle dieselbe Version von grunt und müssen im Rahmen des Setups nicht auch global installiert werden.

Installieren Sie grunt-cli mit, npm i -D grunt-clianstatt es global mit zu installieren -g.

//package.json

...

"scripts": {
  "build": "grunt"
}

Dann verwenden npm run build, um Grunzen abzufeuern.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.