Grunt - Pierwsze kroki

Aby korzystać z Grunt, musisz mieć zainstalowany Node.js. Instalacja Node.js została opisana w poprzednim rozdziale . Wtyczki Grunt i Grunt można zainstalować za pomocą menedżera pakietów Node.js.

Przed skonfigurowaniem Grunt w systemie możesz zaktualizować menedżera pakietów Node za pomocą następującego polecenia -

npm update -g npm

Jeśli używasz systemu Mac lub Linux, musisz użyć słowa sudo na początku wiersza poleceń, aby przyznać dostęp administratora, jak pokazano poniżej -

sudo npm update -g npm

Instalacja CLI

CLI to skrót od Command Line Interface, który uruchamia zainstalowaną wersję Grunt. Aby rozpocząć korzystanie z Grunt, musisz zainstalować interfejs wiersza poleceń (CLI) Grunt globalnie, jak pokazano poniżej -

npm install -g grunt-cli

Uruchomienie powyższego polecenia spowoduje umieszczenie polecenia grunt w ścieżce systemowej, co spowoduje, że będzie uruchamiane z dowolnego katalogu. Nie można zainstalować modułu uruchamiającego zadania Grunt, instalując grunt-cli . Umożliwia maszynie jednoczesną instalację wielu wersji Grunt.

Działanie CLI

CLI szuka zainstalowanego Grunta w twoim systemie, używając systemu require () za każdym razem, gdy Grunt jest uruchamiany. Używając grunt-cli , możesz uruchomić Grunt z dowolnego katalogu w projekcie. Jeśli używasz lokalnie zainstalowanego Grunta, to grunt-cli używa lokalnie zainstalowanej biblioteki Grunt i stosuje konfigurację z pliku Grunt.

Praca z istniejącym i nowym projektem

Jeśli pracujesz z już skonfigurowanym projektem, który zawiera plik package.json i Gruntfile , wykonaj proste czynności opisane poniżej -

Znajdź ścieżkę do katalogu głównego projektu.
Zależności można zainstalować za pomocą polecenia npm install .
Uruchom Grunt za pomocą polecenia grunt .

Jeśli tworzysz nowy projekt, dołącz do projektu dwa pliki package.json i Gruntfile .

package.json- Plik package.json jest umieszczany w katalogu głównym projektu i jest używany do uruchamiania każdej wymienionej zależności za każdym razem, gdy uruchamiasz polecenie npm install w tym samym folderze.
Gruntfile.js - Plik Gruntfile.js służy do zapisywania ustawień konfiguracyjnych projektu.

package.json

Plik package.json jest umieszczany w katalogu głównym projektu obok pliku Gruntfile i służy do uruchamiania każdej wymienionej zależności za każdym razem, gdy uruchamiasz polecenie npm install w tym samym folderze.

Możesz utworzyć plik package.json na różne sposoby, jak podano poniżej -

Możesz grunt-init, aby utworzyć plik package.json.
Możesz również utworzyć plik package.json za pomocą polecenia npm-init .

Możesz napisać specyfikację, jak pokazano poniżej -

{
   "name": "tutorialspoint",
   "version": "0.1.0",
   "devDependencies": {
      "grunt-contrib-jshint": "~0.10.0",
      "grunt-contrib-nodeunit": "~0.4.1",
      "grunt-contrib-uglify": "~0.5.0"
   }
}

Możesz dodać Grunt i gruntplugins do istniejącego pliku pacakge.json za pomocą następującego polecenia -

npm install <module> --save-dev

Tutaj <module> reprezentuje moduł do zainstalowania lokalnie. Powyższe polecenie zainstaluje określony moduł i automatycznie doda go do sekcji devDependencies .

Na przykład następujące polecenie zainstaluje najnowszą wersję Grunt i doda ją do twoich devDependencies -

npm install grunt --save-dev

Gruntfile

Plik Gruntfile.js jest domyślnym miejscem, do którego trafią twoje ustawienia konfiguracyjne dla Grunt. Plik Grunt zawiera następujące części -

Funkcja opakowania
Konfiguracja projektu i zadania
Ładowanie wtyczek i zadań Grunt
Zadania niestandardowe

Podstawowy plik Gruntfile.js jest przedstawiony poniżej -

// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {

   // CONFIGURE GRUNT
   grunt.initConfig({
      // get the configuration info from package.json file
      // this way we can use things like name and version (pkg.name)
      pkg: grunt.file.readJSON('package.json'),

      // all of our configuration goes here

   });

   // Load the plugin that provides the "uglify" task
   grunt.loadNpmTasks('grunt-contrib-uglify');

   // Default task(s)
   grunt.registerTask('default', ['uglify']);
};

Funkcja opakowania

W powyższym kodzie module.exports jest funkcją opakowującą, w której cała konfiguracja jest umieszczana w tej funkcji. Jest to sposób wyświetlania konfiguracji w pozostałej części aplikacji.

module.exports = function(grunt) {
   //do grunt-related things here
}

Konfiguracja projektu i zadania

Możesz skonfigurować zadania Grunt, gdy konfiguracja Grunt jest gotowa. Konfigurację projektu można zapisać w sekcji grunt.initConfig () . W funkcji grunt.initConfig () pobierz informacje konfiguracyjne z pliku package.json i zapisz je w pkg . Możesz wywołać nazwę projektu za pomocą pkg.name i version z pkg.version .

Ładowanie wtyczek i zadań Grunt

Załaduj zadania z określonej wtyczki przy użyciu metody grunt.loadNpmTasks . Możesz zainstalować wtyczkę lokalnie, używającnpmi musi odnosić się do pliku Gruntfile. Możesz załadować wtyczkę za pomocą prostego polecenia, jak pokazano poniżej -

grunt.task.loadNpmTasks(pluginName)

Zadania niestandardowe

Kiedy uruchamiasz Grunt z wiersza poleceń, Grunt będzie szukał domyślnego zadania. W powyższym kodzie używamy zadania o nazwie uglify, które można uruchomić za pomocą polecenia grunt . Jest to to samo, co jawne uruchomienie polecenia grunt uglify i możesz określić liczbę zadań w tablicy.

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