web-dev-qa-db-de.com

Wie installiere ich grunt und wie erstelle ich ein Skript damit?

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 versuche zu tun, grunt init, es wirft mir einen Fehler -

Ein gültiges Gruntfile konnte nicht gefunden werden. Weitere Informationen zum Konfigurieren von Grunt finden Sie in der Kurzanleitung: http://gruntjs.com/getting-started Schwerwiegender Fehler: Gruntfile kann nicht gefunden werden.

Aber wenn ich in den Grunt-Ordner auf meinem System schaue, wird der Gruntfile.js Gibt es. kann mir bitte jemand helfen, wie man dieses grunt richtig installiert und wie man ein gebautes script mit dem grunt schreibt. Ich habe eine HTML-Seite und Java Skript, wenn ich ein Skript mit Grunt erstellen möchte, wie kann ich das tun?

76
Sau

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

  1. Stellen Sie sicher, dass Sie Ihren package.json Oder einen neuen eingerichtet haben:

    npm init
    
  2. Installieren Sie 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 für Ihren Build-Prozess benötigen. Um dieses Beispiel zu verdeutlichen, füge ich das Concat-Modul zum Zusammenfügen von Dateien hinzu:

    npm install grunt-contrib-concat --save-dev
    
  5. Jetzt müssen Sie Ihren Gruntfile.js Einrichten, der Ihren Erstellungsprozess beschreibt. Für dieses Beispiel kombiniere ich einfach zwei JS-Dateien file1.js Und file2.js Im Ordner js 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 Build-Prozess mit folgendem Befehl ausführen:

    grunt
    

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

HINWEIS:

Sie können grunt-init Zum Erstellen von Gruntfile.js Verwenden, wenn Sie für Schritt 5 eine assistentenbasierte Erstellung anstelle von Rohcode wünschen.

Gehen Sie dazu bitte folgendermaßen vor:

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 ~/.grunt-init/gruntfile In %USERPROFILE%\.grunt-init\ Ändern. PowerShell erkennt den ~ Korrekt.

209
Qorbani

Irgendwann müssen wir die PATH-Variable 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.

Ich habe das gleiche Problem, aber ich habe es behoben, 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).

5
andromada

Sie sollten grunt-cli in den devDependencies des Projekts installieren und es 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.

Installiere grunt-cli mit npm i -D grunt-cli Anstatt es global mit -g Zu installieren.

//package.json

...

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

Verwenden Sie dann npm run build, Um das Grunzen abzufeuern.

0
itwasmattgregg