Jak zainstalować grunt i jak zbudować z nim skrypt


86

Cześć, próbuję zainstalować Grunt na Windows 7 64 bit. Zainstalowałem Grunt za pomocą poleceń

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

ale teraz, jeśli spróbuję to zrobić grunt init, wyrzuca mi błąd -

Nie można znaleźć prawidłowego pliku Gruntfile. Więcej informacji na temat konfiguracji gruntów można znaleźć w przewodniku dla początkujących: http://gruntjs.com/getting-started Błąd krytyczny: nie można znaleźć pliku Gruntfile.

Ale kiedy zajrzę do folderu grunt w moim systemie, Gruntfile.jsjest tam. Czy ktoś może mi pomóc, jak poprawnie zainstalować ten grunt i jak napisać skompilowany skrypt przy użyciu gruntów. Mam jedną stronę HTML i skrypt java, jeśli chcę zbudować skrypt za pomocą Grunt, jak mogę to zrobić?


1
npm install -g gruntoznacza instalację Grunt globalnie, co nie jest już zalecane (począwszy od Grunt 0.4).
Ludder

Odpowiedzi:


229

Aby skonfigurować kompilację GruntJS, wykonaj następujące czynności:

  1. Upewnij się, że masz skonfigurowaną package.jsonlub nową:

    npm init
    
  2. Zainstaluj Grunt CLI jako globalny:

    npm install -g grunt-cli
    
  3. Zainstaluj Grunt w swoim lokalnym projekcie:

    npm install grunt --save-dev
    
  4. Zainstaluj dowolny moduł Grunt, którego możesz potrzebować w procesie kompilacji. Ze względu na ten przykład dodam moduł Concat do łączenia plików ze sobą:

    npm install grunt-contrib-concat --save-dev
    
  5. Teraz musisz skonfigurować swój, Gruntfile.jsktóry będzie opisywał proces budowania. W tym przykładzie po prostu łączę dwa pliki JS file1.jsoraz file2.jsw jsfolderze i generuję 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. Teraz będziesz gotowy do uruchomienia procesu kompilacji za pomocą następującego polecenia:

    grunt
    

Mam nadzieję, że dzięki temu dowiesz się, jak pracować z kompilacją GruntJS.

UWAGA:

Możesz użyć grunt-initdo tworzenia, Gruntfile.jsjeśli chcesz tworzyć oparte na kreatorze zamiast surowego kodowania w kroku 5.

Aby to zrobić, wykonaj następujące kroki:

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

Użytkownicy systemu Windows: Jeśli używasz cmd.exe, musisz zmienić go ~/.grunt-init/gruntfilena %USERPROFILE%\.grunt-init\. PowerShell rozpozna ~poprawnie plik.


właśnie tego szukałem, dzięki. czy jest wymagane, aby gruntfile.js był umieszczony w głównym folderze projektu (nie można go zmusić do działania w systemie Windows w inny sposób)?
chester89

1
Czy krok 5 można skonfigurować w bardzo prosty sposób przy użyciu grunt init:gruntfile? Próbowałem to zrobić, ale zawsze pojawia się błąd: Fatal error: Unable to find Gruntfile. Czy tworzenie pliku Gruntfile.js jest zawsze procesem ręcznym? Jeśli tak, widzę korzyść z używania Yeoman, w którym Gruntfile.js jest generowany automatycznie (i nadal dotyczy to projektów, które bym utworzył, które w rzeczywistości nie są aplikacjami internetowymi.
micah

@micah, możesz użyć narzędzia grunt-init do łatwego tworzenia Gruntfile. Zaktualizuję główny post i dodam go jako notatkę.
Qorbani

@qorbani Wtedy jestem zdezorientowany. W katalogu tego projektu, który nie jest gruby, wykonałem już kroki 1-4. Teraz właśnie uruchomiłem npm install -g grunt-initi pomyślnie zainstalowałem. Poszedłem za tym grunt init:gruntfilei nadal daje mi ten sam fatalny błąd. czego mi brakuje?
micah

grunt init: gruntfile nie jest poprawny. grunt-init jest innym pomocnikiem dla rusztowań opartych na szablonach i musisz zainstalować szablon gruntfile, aby móc generować Gruntfile.js
Qorbani

8

Od jakiegoś czasu musimy ustawić zmienną PATH dla WINDOWS

% USERPROFILE% \ AppData \ Roaming \ npm

Po tym teście z where grunt

Uwaga: nie zapomnij zamknąć okna wiersza polecenia i ponownie go otworzyć.


5

Mam ten sam problem, ale rozwiązałem go, zmieniając plik Grunt.js na Gruntfile.js. Sprawdź nazwę pliku przed wpisaniem grunt.cmd w cmd systemu Windows (jeśli używasz systemu Windows).


2

Powinieneś zainstalować grunt-cli w devDependencies projektu, a następnie uruchomić go za pomocą skryptu w pliku package.json. W ten sposób inni programiści pracujący nad projektem będą używać tej samej wersji gruntów i nie będą musieli instalować się globalnie w ramach konfiguracji.

Zainstaluj grunt-cli z npm i -D grunt-clizamiast instalować go globalnie z -g.

//package.json

...

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

Następnie użyj, npm run buildaby wystrzelić chrząknięcie.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.