Menggunakan Grunt di ASP.NET Core

2024-11-06

Grunt adalah pelari tugas JavaScript yang mengotomatiskan minifikasi skrip, kompilasi TypeScript, alat "lint" kualitas kode, pra-prosesor CSS, dan hampir semua tugas berulang yang perlu dilakukan untuk mendukung pengembangan klien. Grunt didukung penuh di Visual Studio.

Contoh ini menggunakan proyek ASP.NET Core kosong sebagai titik awalnya, untuk menunjukkan cara mengotomatiskan proses build klien dari awal.

Contoh selesai membersihkan direktori penyebaran target, menggabungkan file JavaScript, memeriksa kualitas kode, mengerumuni konten file JavaScript dan menyebarkan ke akar aplikasi web Anda. Kami akan menggunakan paket berikut:

grunt: Paket pelari tugas Grunt.
grunt-contrib-clean: Plugin yang menghapus file atau direktori.
grunt-contrib-jshint: Plugin yang meninjau kualitas kode JavaScript.
grunt-contrib-concat: Plugin yang menggabungkan file ke dalam satu file.
grunt-contrib-uglify: Plugin yang meminimalkan JavaScript untuk mengurangi ukuran.
grunt-contrib-watch: Plugin yang menonton aktivitas file.

Menyiapkan aplikasi

Untuk memulai, siapkan aplikasi web kosong baru dan tambahkan file contoh TypeScript. File TypeScript secara otomatis dikompilasi ke Dalam JavaScript menggunakan pengaturan Visual Studio default dan akan menjadi bahan baku kami untuk diproses menggunakan Grunt.

Di Visual Studio, buat baru ASP.NET Web Application.
Dalam dialog Proyek ASP.NET Baru, pilih templat ASP.NET Core Empty dan klik tombol OK.
Di Penjelajah Solusi, tinjau struktur proyek. Folder \src ini mencakup kosong wwwroot dan Dependencies simpul.
Tambahkan folder baru bernama TypeScript ke direktori proyek Anda.
Sebelum menambahkan file apa pun, pastikan Visual Studio memiliki opsi 'kompilasi saat menyimpan' untuk file TypeScript yang dicentang. Navigasi ke Opsi Alat>Proyek>>Teks:
TypeScript Klik kanan direktori dan pilih Tambahkan > Item Baru dari menu konteks. Pilih item file JavaScript dan beri nama file Tastes.ts (perhatikan ekstensi *.ts). Salin baris kode TypeScript di bawah ini ke dalam file (saat Anda menyimpan, file baru Tastes.js akan muncul dengan sumber JavaScript).
```
enum Tastes { Sweet, Sour, Salty, Bitter }
```

Tambahkan file kedua ke direktori TypeScript dan beri nama Food.ts. Salin kode di bawah ini ke dalam file.

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;
  }
}

Mengonfigurasi NPM

Selanjutnya, konfigurasikan NPM untuk mengunduh grunt dan grunt-tasks.

Di Penjelajah Solusi, klik kanan proyek dan pilih Tambahkan > Item Baru dari menu konteks. Pilih item file konfigurasi NPM, biarkan nama default, package.json, dan klik tombol Tambahkan.
package.json Dalam file, di dalam kurung kurawal devDependencies objek, masukkan "grunt". Pilih grunt dari daftar Intellisense dan tekan tombol Enter. Visual Studio akan mengutip nama paket grunt, dan menambahkan titik dua. Di sebelah kanan titik dua, pilih versi stabil terbaru paket dari bagian atas daftar Intellisense (tekan Ctrl-Space jika Intellisense tidak muncul).

Catatan

NPM menggunakan penerapan versi semantik untuk mengatur dependensi. Penerapan versi semantik, juga dikenal sebagai SemVer, mengidentifikasi paket dengan jurusan< skema >penomoran.<>kecil.<patch>. Intellisense menyederhanakan penerapan versi semantik dengan hanya menampilkan beberapa pilihan umum. Item teratas dalam daftar Intellisense (0.4.5 dalam contoh di atas) dianggap sebagai versi stabil terbaru dari paket. Simbol tanda sisipan (^) cocok dengan versi utama terbaru dan tilde (~) cocok dengan versi minor terbaru. Lihat referensi pengurai versi semver NPM sebagai panduan untuk ekspres lengkap yang disediakan SemVer.

Tambahkan lebih banyak dependensi untuk memuat paket grunt-contrib-* untuk paket clean, jshint, concat, uglify, dan watch seperti yang ditunjukkan pada contoh di bawah ini. Versi tidak perlu cocok dengan contoh.

"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"
}

Simpan file package.json.

Paket untuk setiap devDependencies item akan diunduh, bersama dengan file apa pun yang diperlukan setiap paket. Anda dapat menemukan file paket di direktori node_modules dengan mengaktifkan tombol Tampilkan Semua File di Penjelajah Solusi.

node_modules mendengus

Catatan

Jika perlu, Anda dapat memulihkan dependensi secara manual di Penjelajah Solusi dengan mengklik kanan dan memilih Dependencies\NPM.

pulihkan paket

Mengonfigurasi Grunt

Grunt dikonfigurasi menggunakan manifes bernama Gruntfile.js yang menentukan, memuat, dan mendaftarkan tugas yang dapat dijalankan secara manual atau dikonfigurasi untuk berjalan secara otomatis berdasarkan peristiwa di Visual Studio.

Klik kanan proyek dan pilih Tambahkan>Item Baru. Pilih templat item File JavaScript, ubah nama menjadi Gruntfile.js, dan klik tombol Tambahkan.
Tambahkan kode berikut ke Gruntfile.js. Fungsi mengatur initConfig opsi untuk setiap paket, dan sisa modul memuat dan mendaftarkan tugas.
```
module.exports = function (grunt) {
  grunt.initConfig({
  });
};
```
initConfig Di dalam fungsi, tambahkan opsi untuk tugas seperti yang clean ditunjukkan pada contoh Gruntfile.js di bawah ini. Tugas clean menerima array string direktori. Tugas ini menghapus file dari wwwroot/lib dan menghapus seluruh direktori /temp .
```
module.exports = function (grunt) {
  grunt.initConfig({
    clean: ["wwwroot/lib/*", "temp/"],
  });
};
```
initConfig Di bawah fungsi, tambahkan panggilan ke grunt.loadNpmTasks. Ini akan membuat tugas dapat dijalankan dari Visual Studio.
```
grunt.loadNpmTasks("grunt-contrib-clean");
```
Simpan Gruntfile.js. File akan terlihat seperti cuplikan layar di bawah ini.
Gruntfile.js Klik kanan dan pilih Task Runner Explorer dari menu konteks. Jendela Task Runner Explorer akan terbuka.
Verifikasi yang clean diperlihatkan di bawah Tugas di Penjelajah Pelari Tugas.
Klik kanan tugas bersih dan pilih Jalankan dari menu konteks. Jendela perintah menampilkan kemajuan tugas.

Catatan

Belum ada file atau direktori yang harus dibersihkan. Jika mau, Anda dapat membuatnya secara manual di Penjelajah Solusi lalu menjalankan tugas bersih sebagai pengujian.
initConfig Dalam fungsi , tambahkan entri untuk concat menggunakan kode di bawah ini.

Array src properti mencantumkan file untuk digabungkan, dalam urutan yang harus digabungkan. Properti dest menetapkan jalur ke file gabungan yang dihasilkan.
```
concat: {
  all: {
    src: ['TypeScript/Tastes.js', 'TypeScript/Food.js'],
    dest: 'temp/combined.js'
  }
},
```
Catatan

Properti all dalam kode di atas adalah nama target. Target digunakan dalam beberapa tugas Grunt untuk memungkinkan beberapa lingkungan build. Anda dapat melihat target bawaan menggunakan IntelliSense atau menetapkan target Anda sendiri.
jshint Tambahkan tugas menggunakan kode di bawah ini.

Utilitas jshint code-quality dijalankan terhadap setiap file JavaScript yang ditemukan di direktori sementara .
```
jshint: {
  files: ['temp/*.js'],
  options: {
    '-W069': false,
  }
},
```
Catatan

Opsi "-W069" adalah kesalahan yang dihasilkan oleh jshint ketika JavaScript menggunakan sintaks kurung siku untuk menetapkan properti alih-alih notasi titik, Tastes["Sweet"] bukan Tastes.Sweet. Opsi menonaktifkan peringatan untuk memungkinkan sisa proses berlanjut.
uglify Tambahkan tugas menggunakan kode di bawah ini.

Tugas ini mengompresi file combined.js yang ditemukan di direktori sementara dan membuat file hasil di wwwroot/lib sesuai dengan konvensi penamaan standar <nama file>.min.js.
```
uglify: {
 all: {
   src: ['temp/combined.js'],
   dest: 'wwwroot/lib/combined.min.js'
 }
},
```
Di bawah panggilan ke grunt.loadNpmTasks yang memuat grunt-contrib-clean, sertakan panggilan yang sama untuk jshint, concat, dan uglify menggunakan kode di bawah ini.
```
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
```
Simpan Gruntfile.js. File akan terlihat seperti contoh di bawah ini.
Perhatikan bahwa daftar Tugas Task Runner Explorer menyertakan cleantugas , concat, jshint dan uglify . Jalankan setiap tugas secara berurutan dan amati hasilnya dalam Penjelajah Solusi. Setiap tugas harus berjalan tanpa kesalahan.

Tugas concat membuat file baru combined.js dan menempatkannya ke direktori sementara. Tugas jshint hanya berjalan dan tidak menghasilkan output. Tugas uglify membuat file baru combined.min.js dan menempatkannya ke wwwroot /lib. Setelah selesai, solusinya akan terlihat seperti cuplikan layar di bawah ini:

Catatan

Untuk informasi selengkapnya tentang opsi untuk setiap paket, kunjungi https://www.npmjs.com/ dan cari nama paket di kotak pencarian di halaman utama. Misalnya, Anda dapat mencari paket grunt-contrib-clean untuk mendapatkan tautan dokumentasi yang menjelaskan semua parameternya.

Anda sudah mengetahui semua informasinya sekarang

Gunakan metode Grunt registerTask() untuk menjalankan serangkaian tugas dalam urutan tertentu. Misalnya, untuk menjalankan contoh langkah-langkah di atas dalam urutan bersih -> concat -> jshint -> uglify, tambahkan kode di bawah ini ke modul. Kode harus ditambahkan ke tingkat yang sama dengan panggilan loadNpmTasks(), di luar initConfig.

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

Tugas baru muncul di Task Runner Explorer di bawah Tugas Alias. Anda dapat mengklik kanan dan menjalankannya seperti yang Anda lakukan pada tugas lain. Tugas all akan menjalankan clean, , concatjshint dan uglify, secara berurutan.

tugas alias mendengus

Mengamati perubahan

Tugas watch mengawasi file dan direktori. Arloji memicu tugas secara otomatis jika mendeteksi perubahan. Tambahkan kode di bawah ini ke initConfig untuk mengawasi perubahan pada * file.js di direktori TypeScript. Jika file JavaScript diubah, watch akan menjalankan all tugas.

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

Tambahkan panggilan ke loadNpmTasks() untuk memperlihatkan watch tugas di Task Runner Explorer.

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

Klik kanan tugas tonton di Task Runner Explorer dan pilih Jalankan dari menu konteks. Jendela perintah yang menampilkan tugas jam tangan yang berjalan akan menampilkan "Menunggu..." pesan. Buka salah satu file TypeScript, tambahkan spasi, lalu simpan file. Ini akan memicu tugas pengawasan dan memicu tugas lain untuk dijalankan secara berurutan. Cuplikan layar di bawah ini menunjukkan sampel eksekusi.

menjalankan output tugas

Pengikatan ke peristiwa Visual Studio

Kecuali Anda ingin memulai tugas secara manual setiap kali Anda bekerja di Visual Studio, ikat tugas ke Sebelum Build, After Build, Clean, dan Project Open .

Ikat watch sehingga berjalan setiap kali Visual Studio terbuka. Di Task Runner Explorer, klik kanan tugas pengawasan dan pilih Pengikatan>Project Open dari menu konteks.

mengikat tugas ke pembukaan proyek

Membongkar dan memuat ulang proyek. Saat proyek dimuat lagi, tugas pengawasan mulai berjalan secara otomatis.

Ringkasan

Grunt adalah pelari tugas canggih yang dapat digunakan untuk mengotomatiskan sebagian besar tugas build klien. Grunt memanfaatkan NPM untuk mengirimkan paketnya, dan fitur integrasi alat dengan Visual Studio. Task Runner Explorer Visual Studio mendeteksi perubahan pada file konfigurasi dan menyediakan antarmuka yang nyaman untuk menjalankan tugas, melihat tugas yang sedang berjalan, dan mengikat tugas ke peristiwa Visual Studio.