Używanie gruntu w ASP.NET Core

2024-11-06

Grunt to moduł uruchamiający zadania Języka JavaScript, który automatyzuje minimalizowanie skryptów, kompilację języka TypeScript, narzędzia jakości kodu "lint", procesory wstępne CSS i tylko o wszelkie powtarzające się zadania, które muszą wykonywać w celu obsługi programowania klientów. Grunt jest w pełni obsługiwany w programie Visual Studio.

W tym przykładzie użyto pustego projektu ASP.NET Core jako punktu początkowego, aby pokazać, jak zautomatyzować proces kompilacji klienta od podstaw.

Gotowy przykład czyści docelowy katalog wdrożenia, łączy pliki JavaScript, sprawdza jakość kodu, kondensuje zawartość pliku JavaScript i wdraża w katalogu głównym aplikacji internetowej. Użyjemy następujących pakietów:

grunt: Pakiet modułu uruchamiającego zadania Grunt.
grunt-contrib-clean: wtyczka, która usuwa pliki lub katalogi.
grunt-contrib-jshint: wtyczka, która przegląda jakość kodu JavaScript.
grunt-contrib-concat: wtyczka, która łączy pliki w jeden plik.
grunt-contrib-uglify: wtyczka, która minifies JavaScript w celu zmniejszenia rozmiaru.
grunt-contrib-watch: wtyczka, która obserwuje aktywność plików.

Przygotowywanie aplikacji

Aby rozpocząć, skonfiguruj nową pustą aplikację internetową i dodaj przykładowe pliki TypeScript. Pliki TypeScript są automatycznie kompilowane w języku JavaScript przy użyciu domyślnych ustawień programu Visual Studio i będą materiałem nieprzetworzonym do przetwarzania przy użyciu narzędzia Grunt.

W programie Visual Studio utwórz nowy ASP.NET Web Applicationelement .
W oknie dialogowym Nowy projekt ASP.NET wybierz szablon ASP.NET Core Empty i kliknij przycisk OK.
W Eksplorator rozwiązań przejrzyj strukturę projektu. Folder \src zawiera puste wwwroot i Dependencies węzły.
Dodaj nowy folder o nazwie TypeScript do katalogu projektu.
Przed dodaniem jakichkolwiek plików upewnij się, że program Visual Studio ma zaznaczoną opcję "kompiluj przy zapisywaniu" dla plików TypeScript. Przejdź do pozycji Narzędzia>Opcje>Edytor>tekstów Typescript>Project:
Kliknij prawym przyciskiem myszy TypeScript katalog i wybierz polecenie Dodaj > nowy element z menu kontekstowego. Wybierz element pliku JavaScript i nadaj plikowi Tastes.ts nazwę (zanotuj rozszerzenie *.ts). Skopiuj wiersz poniższego kodu TypeScript do pliku (po zapisaniu zostanie wyświetlony nowy Tastes.js plik ze źródłem JavaScript).
```
enum Tastes { Sweet, Sour, Salty, Bitter }
```

Dodaj drugi plik do katalogu TypeScript i nadaj mu Food.tsnazwę . Skopiuj poniższy kod do pliku.

class Food {
  constructor(name: string, calories: number) {
    this._name = name;
    this._calories = calories;
  }

  private _name: string;
  get Name() {
    return this._name;
  }

  private _calories: number;
  get Calories() {
    return this._calories;
  }

  private _taste: Tastes;
  get Taste(): Tastes { return this._taste }
  set Taste(value: Tastes) {
    this._taste = value;
  }
}

Konfigurowanie programu NPM

Następnie skonfiguruj narzędzie NPM, aby pobrać grunt i grunt-tasks.

W Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt i wybierz polecenie Dodaj > nowy element z menu kontekstowego. Wybierz element pliku konfiguracji NPM, pozostaw nazwę domyślną , package.jsona następnie kliknij przycisk Dodaj.
package.json W pliku wewnątrz devDependencies nawiasów klamrowych obiektu wprowadź "grunt". Wybierz grunt z listy funkcji IntelliSense i naciśnij Enter. Program Visual Studio zacytuje nazwę pakietu gruntu i doda dwukropek. Po prawej stronie dwukropka wybierz najnowszą stabilną wersję pakietu w górnej części listy funkcji IntelliSense (naciśnij Ctrl-Space IntelliSense, jeśli funkcja IntelliSense nie jest wyświetlana).

Uwaga

Narzędzie NPM używa semantycznego przechowywania wersji w celu organizowania zależności. Semantyczne przechowywanie wersji, znane również jako SemVer, identyfikuje pakiety z głównym> schematem <numerowania.<drobne>.<patch>. Funkcja IntelliSense upraszcza przechowywanie wersji semantycznych, wyświetlając tylko kilka typowych opcji. Górny element na liście funkcji IntelliSense (0.4.5 w powyższym przykładzie) jest uważany za najnowszą stabilną wersję pakietu. Symbol karetki (^) jest zgodny z najnowszą wersją główną, a tylda (~) jest zgodna z najnowszą wersją pomocniczą. Zapoznaj się z dokumentacją analizatora wersji programu Semver npM jako przewodnikiem po pełnej ekspresywności zapewnianej przez dostawcę SemVer.

Dodaj więcej zależności, aby załadować pakiety grunt-contrib-* dla czystych, jshint, concat, uglify i obejrzyj, jak pokazano w poniższym przykładzie. Wersje nie muszą być zgodne z przykładem.

"devDependencies": {
  "grunt": "0.4.5",
  "grunt-contrib-clean": "0.6.0",
  "grunt-contrib-jshint": "0.11.0",
  "grunt-contrib-concat": "0.5.1",
  "grunt-contrib-uglify": "0.8.0",
  "grunt-contrib-watch": "0.6.1"
}

Zapisz plik package.json.

Pakiety dla każdego devDependencies elementu zostaną pobrane wraz z plikami wymaganymi przez każdy pakiet. Pliki pakietu można znaleźć w katalogu node_modules, włączając przycisk Pokaż wszystkie pliki w Eksplorator rozwiązań.

grunt node_modules

Uwaga

Jeśli chcesz, możesz ręcznie przywrócić zależności w Eksplorator rozwiązań, klikając prawym przyciskiem myszy Dependencies\NPM i wybierając opcję menu Przywróć pakiety.

przywracanie pakietów

Konfigurowanie gruntu

Grunt jest skonfigurowany przy użyciu manifestu o nazwie Gruntfile.js definiującej, ładuje i rejestruje zadania, które można uruchamiać ręcznie lub skonfigurować do automatycznego uruchamiania na podstawie zdarzeń w programie Visual Studio.

Kliknij prawym przyciskiem myszy projekt i wybierz polecenie Dodaj>nowy element. Wybierz szablon elementu pliku JavaScript, zmień nazwę na Gruntfile.js, a następnie kliknij przycisk Dodaj.
Dodaj następujący kod do pliku Gruntfile.js. Funkcja initConfig ustawia opcje dla każdego pakietu, a pozostała część modułu ładuje i rejestruje zadania.
```
module.exports = function (grunt) {
  grunt.initConfig({
  });
};
```
initConfig Wewnątrz funkcji dodaj opcje zadaniaclean, jak pokazano w poniższym przykładzieGruntfile.js. Zadanie clean akceptuje tablicę ciągów katalogu. To zadanie usuwa pliki z katalogu wwwroot/lib i usuwa cały katalog /temp .
```
module.exports = function (grunt) {
  grunt.initConfig({
    clean: ["wwwroot/lib/*", "temp/"],
  });
};
```
initConfig Poniżej funkcji dodaj wywołanie funkcji .grunt.loadNpmTasks Spowoduje to uruchomienie zadania z poziomu programu Visual Studio.
```
grunt.loadNpmTasks("grunt-contrib-clean");
```
Zapisz plik Gruntfile.js. Plik powinien wyglądać podobnie do poniższego zrzutu ekranu.
Kliknij prawym przyciskiem myszy Gruntfile.js i wybierz pozycję Eksplorator modułu uruchamiającego zadania z menu kontekstowego. Zostanie otwarte okno Eksplorator modułu uruchamiającego zadania.
Sprawdź, czy clean jest wyświetlana w obszarze Zadania w Eksploratorze modułu uruchamiającego zadania.
Kliknij prawym przyciskiem myszy czyste zadanie i wybierz polecenie Uruchom z menu kontekstowego. W oknie polecenia jest wyświetlany postęp zadania.

Uwaga

Nie ma jeszcze plików ani katalogów do czyszczenia. Jeśli chcesz, możesz je ręcznie utworzyć w Eksplorator rozwiązań, a następnie uruchomić czyste zadanie jako test.
initConfig W funkcji dodaj wpis do concat użycia poniższego kodu.

Tablica src właściwości zawiera listę plików do połączenia w kolejności, w której powinny być połączone. Właściwość dest przypisuje ścieżkę do wygenerowanego połączonego pliku.
```
concat: {
  all: {
    src: ['TypeScript/Tastes.js', 'TypeScript/Food.js'],
    dest: 'temp/combined.js'
  }
},
```
Uwaga

Właściwość all w powyższym kodzie jest nazwą obiektu docelowego. Obiekty docelowe są używane w niektórych zadaniach grunt w celu umożliwienia wielu środowisk kompilacji. Wbudowane elementy docelowe można wyświetlić przy użyciu funkcji IntelliSense lub przypisać własne.
jshint Dodaj zadanie przy użyciu poniższego kodu.

Narzędzie jshint code-quality jest uruchamiane względem każdego pliku JavaScript znajdującego się w katalogu tymczasowym.
```
jshint: {
  files: ['temp/*.js'],
  options: {
    '-W069': false,
  }
},
```
Uwaga

Opcja "-W069" jest błędem generowanym przez narzędzie jshint, gdy język JavaScript używa składni nawiasu do przypisania właściwości zamiast notacji Tastes["Sweet"] kropkowej zamiast Tastes.Sweet. Opcja wyłącza ostrzeżenie, aby umożliwić rest kontynuowanie procesu.
uglify Dodaj zadanie przy użyciu poniższego kodu.

Zadanie minifies plik combined.js znaleziony w katalogu temp i tworzy plik wynikowy w katalogu wwwroot/lib zgodnie ze standardową konwencją <nazewnictwa nazwa> pliku.min.js.
```
uglify: {
 all: {
   src: ['temp/combined.js'],
   dest: 'wwwroot/lib/combined.min.js'
 }
},
```
W wywołaniu do grunt.loadNpmTasks tego ładowania grunt-contrib-cleandołącz to samo wywołanie narzędzia jshint, concat i uglify przy użyciu poniższego kodu.
```
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
```
Zapisz plik Gruntfile.js. Plik powinien wyglądać podobnie do poniższego przykładu.
Zwróć uwagę, że lista Zadania eksploratora modułu uruchamiającego zadania zawiera cleanzadania , concatjshint i uglify . Uruchom każde zadanie w kolejności i obserwuj wyniki w Eksplorator rozwiązań. Każde zadanie powinno być uruchamiane bez błędów.

Zadanie concat tworzy nowy combined.js plik i umieszcza go w katalogu tymczasowym. Zadanie jshint po prostu jest uruchamiane i nie generuje danych wyjściowych. Zadanie uglify tworzy nowy combined.min.js plik i umieszcza go w katalogu wwwroot/lib. Po zakończeniu rozwiązanie powinno wyglądać podobnie do poniższego zrzutu ekranu:

Uwaga

Aby uzyskać więcej informacji na temat opcji dla każdego pakietu, odwiedź https://www.npmjs.com/ stronę i wyszukaj nazwę pakietu w polu wyszukiwania na stronie głównej. Na przykład możesz wyszukać pakiet grunt-contrib-clean, aby uzyskać link do dokumentacji, który wyjaśnia wszystkie jego parametry.

Wszystko w jednym miejscu

Użyj metody Grunt registerTask() , aby uruchomić serię zadań w określonej sekwencji. Aby na przykład uruchomić powyższe przykładowe kroki w kolejności czystego —> concat —> jshint —> uglify, dodaj poniższy kod do modułu. Kod należy dodać do tego samego poziomu co wywołania loadNpmTasks() poza initConfig.

grunt.registerTask("all", ['clean', 'concat', 'jshint', 'uglify']);

Nowe zadanie jest wyświetlane w Eksploratorze modułu uruchamiającego zadania w obszarze Zadania aliasu. Możesz kliknąć prawym przyciskiem myszy i uruchomić go tak samo, jak w przypadku innych zadań. Zadanie all zostanie uruchomione cleanw kolejności , concatjshint i uglify.

alias zadania gruntu

Obserwowanie zmian

Zadanie watch zapewnia oko na pliki i katalogi. Zegarek wyzwala zadania automatycznie, jeśli wykryje zmiany. Dodaj poniższy kod do initConfig, aby obserwować zmiany w *.js pliki w katalogu TypeScript. Jeśli plik JavaScript zostanie zmieniony, watch uruchomi all zadanie.

watch: {
  files: ["TypeScript/*.js"],
  tasks: ["all"]
}

Dodaj wywołanie , aby loadNpmTasks() wyświetlić zadanie w Eksploratorze modułu watch uruchamiającego zadania.

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

Kliknij prawym przyciskiem myszy zadanie zegarka w Eksploratorze modułu uruchamiającego zadania i wybierz polecenie Uruchom z menu kontekstowego. W oknie polecenia, w którym jest wyświetlane uruchomione zadanie kontrolne, zostanie wyświetlony komunikat "Oczekiwanie..." Komunikat. Otwórz jeden z plików TypeScript, dodaj spację, a następnie zapisz plik. Spowoduje to wyzwolenie zadania obserwowanego i wyzwolenie innych zadań do uruchomienia w określonej kolejności. Poniższy zrzut ekranu przedstawia przykładowy przebieg.

uruchamianie danych wyjściowych zadań

Wiązanie ze zdarzeniami programu Visual Studio

O ile nie chcesz ręcznie uruchamiać zadań za każdym razem, gdy pracujesz w programie Visual Studio, powiąż zadania z zdarzeniami Przed kompilacją, Po kompilacji, Czyszczenia i Otwierania projektu.

Powiąż, watch aby był uruchamiany za każdym razem, gdy program Visual Studio zostanie otwarty. W Eksploratorze modułu uruchamiającego zadania kliknij prawym przyciskiem myszy zadanie zegarka i wybierz polecenie Powiązania>Projekt otwórz z menu kontekstowego.

wiązanie zadania z otwarciem projektu

Zwolnij i załaduj ponownie projekt. Po ponownym załadowaniu projektu zadanie kontrolne zostanie uruchomione automatycznie.

Podsumowanie

Grunt to zaawansowany moduł uruchamiający zadania, który może służyć do automatyzowania większości zadań kompilacji klienta. Narzędzie Grunt wykorzystuje narzędzie NPM do dostarczania pakietów i integracji narzędzi funkcji z programem Visual Studio. Eksplorator modułu uruchamiającego zadania programu Visual Studio wykrywa zmiany w plikach konfiguracji i udostępnia wygodny interfejs do uruchamiania zadań, wyświetlania uruchomionych zadań i wiązania zadań ze zdarzeniami programu Visual Studio.