Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ASP.NET
Code

Mengintegrasikan Proses Build JS Ke MSBuild di Visual Studio 2012 Express

by
Difficulty:AdvancedLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Sap (you can also view the original English article)

Saya telah bekerja dengan ASP dan ASP.NET selama sekitar sepuluh tahun sekarang, dimulai dengan ASP classic dan menetap di .NET 2.0 sebagai favorit saya. Resolusi tahun baru saya tahun ini (2013) adalah untuk meningkatkan pekerjaan .NET saya ke .NET 4.0 menggunakan Visual Studio 2012 Express dan benar-benar dapat mengatasi dengan MSBuild, sehingga saya dapat menggabungkan dan mengecilkan file JavaScript saya sebagai bagian dari proses pembuatan yang normal proyek .NET, dalam Visual Studio.

Cinta pertama saya adalah menggunakan Ant di NetBeans dengan platform PHP atau JSP untuk jenis pekerjaan ini, tetapi situs web utama perusahaan saya berjalan pada platform .NET dan saatnya memperbaruinya, jadi saya memutuskan untuk menggigit peluru dan menyelam kembali untuk beberapa studi serius menciptakan proses membangun terintegrasi menggunakan MSBuild.

Tutorial ini akan menunjukkan kepada Anda bagaimana mengedit file proyek Visual Studio 2012 Express Anda untuk menyertakan file build Anda sendiri yang terpisah yang akan melakukan proses yang sekarang sudah dikenal luas untuk menggabungkan dan menetapkan sekumpulan modul JavaScript ke dalam satu file yang siap untuk digunakan.


Persyaratan Perangkat Lunak

Saya menginginkan proyek non-sepele untuk mendemonstrasikan proses ini, karena saya menemukan kesesatan ada dalam detailnya. Saya sering setia mengikuti tutorial yang terlalu sederhana atau pengenalan pada subjek yang tidak dikenal, kemudian menemukan bahwa tutorial itu tidak mempersiapkan saya ketika Anda ingin melakukan sesuatu yang sedikit sulit. Jadi, dalam tutorial ini kita akan mencoba menikah dengan Knockout.js dan jQuery UI. Kita juga akan menggunakan file JSON dengan hierarki data untuk menentukan menu. Kita akan menggunakan template Knockout.js dengan pengikatan foreach yang mengulang melalui data JSON untuk memancarkan hierarki elemen ul untuk bertindak sebagai markup HTML untuk menubar yang kompatibel dengan UI jQuery.

Sayangnya, menubar belum tersedia (versi 1.9 atau 1.10) yang dipaketkan dengan jQuery UI, jadi Anda perlu mengunduh file menubar dari cabang Menubar jQuery UI. Anda juga memerlukan Kompresor YUI untuk meminimalkan file sumber JavaScript Anda. Untuk tutorial ini, Anda akan membutuhkan Visual Studio 2012 Express untuk Web yang diinstal. Anda juga harus mengunduh:

Jika Anda tidak terbiasa dengan JSON, ada baiknya untuk mengunjungi situs web JSON.


Mengapa MSBuild dan Not NAnt?

Jika Anda membaca tutorial terakhir saya Menggunakan Ant untuk Membuat Pustaka JavaScript, Anda mungkin bertanya-tanya mengapa tutorial ini bukan tentang NAnt. Nah, dengan instalasi baru saya yang mengkilap dari Visual Studio 2012 Express, saya ingin mencoba membawa perkembangan saya di bawah satu atap. IDE favorit saya yang mutlak untuk pengembangan C# Assembly, selama bertahun-tahun, adalah SharpDevelop. Mereka pindah beberapa tahun yang lalu dari NAnt ke MSBuild untuk SharpDevelop versi tiga. Sudah waktunya bagi saya untuk mengikutinya.

Kita tidak lagi menggunakan NAnt dalam proses pembangunan, beralih sepenuhnya ke MSBuild / CruiseControl.NET. Serta tidak melihat kemampuan untuk bergantung pada sistem operasi yang dominan sebagai langkah mundur: itu membantu mengurangi jumlah bagian yang bergerak, konfigurasi yang berbeda, pengaturan pengguna yang berbeda.

#D 3.0 - menjatuhkan dukungan NAnt: Mengapa?

Dasar Pemikiran: Mengapa Mengintegrasikan Pembuatan JavaScript ke dalam .NET Build?

Selama bertahun-tahun, untuk pengembangan NET saya. Saya telah bekerja dengan tiga IDE yang berbeda secara bersamaan:

  1. Sharp kembangkan untuk perkembangan perakitan C# saya, tapi saya juga Sepatu bertanduk-JavaScript dan CSS concatenate dan mengecilkan proses membangun ke dalam lingkungan dengan salinan khusus diinstal dari NAnt.
  2. Visual Studio (2005 dll) untuk page master, konten page.
  3. Editor eksternal seperti Aptana untuk menangani pengembangan JavaScript.

Menggunakan tiga IDE seperti ini sangat melelahkan (dan secara mengejutkan memajaki CPU dan RAM saya), jadi resolusi tahun baru lainnya adalah menyatukan semuanya ke dalam Visual Studio. Oleh karena itu kebutuhan untuk memahami bagaimana mengintegrasikan proses pembuatan JavaScript saya ke dalam pembuatan proyek secara keseluruhan.

Salah satu hasil utama MSBuild untuk saya (pada platform Windows) adalah bahwa ia datang sebagai bagian dari .NET itu sendiri. Itu berarti bahwa setiap mesin Windows yang mutakhir dengan Pembaruan Windows akan memiliki MSBuild tersedia.

Perbandingan NAnt dan MSBuild pada StackOverflow.

Mengatur Lingkungan Anda

Buka proyek baru di Visual Studio 2012 Express. Saya sudah menyebutnya NetTutsMSBuildJs dan saya telah membuatnya di dalam folder NetTuts saya di sini: C:\NetTuts\MSBuildJs.

New Project Dialog Box

Seperti yang Anda lihat di layar, saya telah membuat sejumlah folder sebagai berikut:

js_folders
Folder Contents
css Produksi merilis versi file jQuery UI CSS. Untuk tutorial ini, kita menggunakan tema smoothness.
debug Berbagai versi page formulir web Default.aspx untuk tujuan debugging.
debug-js Tiga folder: concat, min dan src.
js Versi rilis produksi jQuery, jQuery UI, dan Knockout.
jsbuild File build XML dengan semua tugas yang diperlukan untuk pembuatan JavaScript dan salinan dari kompresor YUI.
json File JSON kunci menubar-data.json yang memiliki data yang dibutuhkan untuk membangun menubar. Juga file JSON yang digunakan untuk mengisi halaman sesuai dengan pilihan menu pengguna.

Perhatikan beberapa folder berwarna abu-abu. Ini karena saya sudah mengeluarkan mereka dari proyek. Anda dapat mengubah pengaturan ini dari menu konteks:

exclude_from_project

Sangat mudah untuk menghapus dan membuat direktori selama proses pembuatan, tetapi tidak ada cara untuk menyertakan atau mengecualikan item secara terprogram dari proyek. Folder concat dan min di debug-js dapat dibuang, dihasilkan secara otomatis oleh proses build dari apa pun yang Anda buat di folder src, jadi sangat tepat untuk mengecualikannya dari proyek. Catatan, Anda tidak dapat mengecualikan folder debug dari proyek karena berisi halaman formulir web .NET yang memiliki file kode di belakang. Jika Anda mengecualikan folder tersebut, halaman formulir web akan menampilkan kesalahan yang mengatakan bahwa kelas yang ditentukan dalam file di belakang kode tidak dapat ditemukan.

show_all_files

Anda dapat mengganti apakah objek yang dikecualikan ini harus ditampilkan dengan masuk ke ikon Show All files di bagian atas Solution Explorer dan mengklik. Saya selalu ingin dapat melihat mereka.

Ada satu lagi konfigurasi kunci yang kita butuhkan untuk proyek ini. IIS dan IIS Express bawaan tidak menyertakan tipe mime JSON secara default, dan kita akan menggunakan file JSON secara ekstensif untuk mengirimkan konten, jadi kami harus menambahkannya ke file Web.config. Di dalam elemen configuration tambahkan elemen system.webServer seperti ini:


Proyek JavaScript: Membangun Menubar Menggunakan JSON, Knockout dan jQuery UI

Fokus dari tutorial ini adalah bagaimana membangun proyek JavaScript dalam proyek .NET, tetapi kita tidak bisa melangkah lebih jauh sampai kita memiliki sesuatu untuk dibangun, jadi sekarang izinkan saya menjelaskan proyek yang sedikit ambisius yang ada dalam benak saya.

Berikut adalah diagram komponen UML yang menunjukkan semua bagian yang akan dibutuhkan proyek. Harap dicatat ini adalah diagram komponen yang komprehensif dari sudut pandang pengembang yang menunjukkan semua jenis artefak sekali pakai yang hanya penting, misalnya, untuk debugging. Ini bukan diagram komponen hanya artefak kunci yang diperlukan untuk sistem target.

Component Diagram

Diagram komponen mendefinisikan komposisi komponen dan artefak dalam sistem.
IBM: Diagram Komponen

Dalam UML 2.0, "komponen" digunakan untuk menggambarkan ide yang lebih abstrak: otonom, unit yang dienkapsulasi; "artefak" digunakan untuk menggambarkan apa yang saya tunjukkan dalam diagram ini: file dan pustaka. Ini adalah diagram yang ideal untuk menunjukkan bagaimana berbagai file bergantung satu sama lain. Misalnya, semua halaman formulir web bergantung pada halaman master Utama. File js.build tidak akan berfungsi jika file jar kompresor tidak ada. File proyek dan file js.build, mengganggu, saling bergantung. Jika file js.build tidak ada, proyek tidak akan dimuat; js.build tidak dapat berjalan sendiri, tugas-tugas yang ditentukan ada dipicu oleh acara AfterBuild dalam keseluruhan proyek build.

Untuk tutorial ini, saya ingin menampilkan menubar horizontal menggunakan cabang menubar jQuery UI. Untuk melakukan itu, saya memiliki file JSON dengan data hierarkis untuk menu dan template Knockout.js yang membolak-balik data ini untuk merender
HTML markup dibutuhkan oleh menubar jQuery. Saya telah menambahkan fungsi callback renderMenu yang diaktifkan oleh event afterRender di template Knockout. renderMenu kemudian hanya membuat panggilan untuk menubar untuk akhirnya membuat menubar dengan semua fitur mengkilap jQuery UI yang indah.


Langkah 1: File Rilis Produksi

CSS

Unduh bundel lengkap dari jQuery UI termasuk tema pilihan Anda. Setelah meng-unzipping unduhan Anda, cari folder bernama css di mana Anda akan menemukan folder dengan nama tema yang Anda pilih. Dalam kasus saya, saya memilih smoothness. Buka folder itu dan Anda akan melihat file yang Anda butuhkan:

jquery_ui_css

Copy seluruh folder tema (smoothness) dan tempelkan ke folder css Anda dalam proyek. Kembalilah ke Visual Studio, klik refresh icon di bagian atas Solution Explorer dan folder kehalusan akan muncul di folder css. Anda harus menyertakan folder dalam proyek juga.

Selain jQuery UI dan tema tertentu, Anda juga memerlukan file CSS kecil khusus untuk menubar. Setelah men-download proyek menubar dari github, menelusuri file jquery.ui.menubar.css mengikuti jalur ini: \jquery-ui-menubar\themes\base\jquery.ui.menubar.css. Copy itu ke folder css proyek Anda.

JavaScript

Unduh versi rilis produksi jQuery, jQuery UI, dan Knockout versi terbaru. Saya menggunakan 1.8.2 untuk jQuery, 1.9.2 untuk jQuery UI dan 2.1.0 untuk Knockout. Salin ke folder js di proyek Anda.

Anda juga akan membutuhkan rilis jquery.ui.menubar.js yang terbaru dan tidak terkompresi, yang diunduh dari cabang Menubar dari proyek jQuery UI. Salin ke folder debug-js\src dalam proyek Anda.

Halaman utama Master

Kita membuat beberapa versi dari halaman yang sama untuk membantu debug dan menguji JavaScript. Page master tentu saja dapat membantu mencegah duplikasi kode. Panggil page master ini Main.Master.

add_new_master_page

Biarkan elemen judul kosong (kita akan mendefinisikan judul untuk setiap halaman yang menggunakan master ini) dan tautan ke semua stylesheet yang kita perlukan untuk jQuery UI dan menu:

Tambahkan ContentPlaceHolder tepat sebelum akhir dari tubuh di mana setiap halaman akan terhubung ke file JavaScript yang relevan


Langkah 2: Definisi JSON dari Data yang Diperlukan untuk Menubar

Berikut ini adalah objek JSON yang mendefinisikan sebuah menu yang mungkin kita gunakan untuk situs web instruktur bahasa Inggris. Buat file JSON yang disebut menubar-data.json di folder json dan isi JSON dengan berikut.

Node tingkat teratas tidak memiliki properti URL yang ditentukan, jadi ketika diklik, mereka hanya akan menampilkan item sub-menu. Sub-menu berisi node dengan properti URL yang ditentukan. Ketika Anda mengklik salah satu dari simpul ini, sistem akan mengambil data JSON dari file di URL tersebut.

Setiap file JSON yang berkaitan, di menubar, berisi beberapa konten dalam struktur sederhana yang mendefinisikan header dan beberapa teks:


Langkah 3: Template Knockout untuk Menubar

Kita mendefinisikan ini di Main.Master. Tidak ada cara yang jelas untuk mengurangi atau meningkatkannya untuk penyebaran jadi saya ingin menggunakannya kembali dengan setiap versi page yang terhubung ke page master.

Saya hanya ingin memiliki satu template Knockout untuk merender markup HTML (sekumpulan elemen ul bertumpuk) untuk menubar, tetapi tidak mengherankan peristiwa afterRender yang terkait dengan api yang mengikat foreach dengan setiap loop, bukan pada akhir proses rendering keseluruhan . Jadi, saya perlu membuat sebuah observableArray hanya dengan satu elemen ul, mengikat itu ke Templat menu yang membuat elemen ul paling luar, dan bersarang template menubar di dalamnya. Saya kemudian dapat menangani peristiwa foreach tunggal dengan fungsi saya renderMenu, yang memanggil konstruktor menubar jQuery dan membuat menubar dalam segala kemegahannya. Saya mendapat banyak bantuan tentang ini dari utas ini: nested-templates-with-knockoutjs-and-mvc-3-0.

Berikut adalah menu template:

Dan inilah template node untuk setiap node dari menubar:

Anda kemudian membutuhkan elemen div yang Anda ikat ke MenuTemplate:

Perhatikan bahwa template node menggunakan containerless control flow syntax, yang didasarkan pada tag komentar. Ada beberapa hal yang terjadi di sini, jadi biarkan saya jelaskan

Di menu jQuery yang sepenuhnya diubah, saya ingin melampirkan handler ke acara yang di select. Handler memiliki tanda tangan event,ui. Ketika Anda mengklik item menubar, handler dilewatkan objek kejadian dan objek jQuery yang mewakili item. Untuk mendapatkan teks dari objek ui, kita dapat memanggil metode teks (ui.item.text ()). Tapi bagaimana kita mendapatkan properti url dari JSON yang mendasari? Itu sedikit lebih rumit dan saya menjelaskannya nanti ketika kita melihat fungsi pilih yang dipicu oleh peristiwa klik pada setiap item sub-menu dan pengikatan kustom addData yang melekat pada elemen li dalam template Knockout.

Akhirnya Anda hanya perlu elemen div di mana kita dapat menampilkan konten yang diambil dari file data JSON:


Langkah 4: Membuat Page Formulir Web Yang Tergantung pada File Main.Master

Default-src.aspx

Buat Formulir Web menggunakan Page Master di folder debug bernama Default-src.aspx.

add_page_using_master_page

Ini ternyata adalah file yang sangat singkat. Ini adalah salah satu keuntungan besar dari pendekatan .NET untuk page Master. Hanya ada dua ContentPlaceHolders di page master. Tambahkan tautan ke file JavaScript Anda sebagai berikut ke elemen Konten yang ditautkan ke JsScripts ContentPlaceHolder:

Buat file JavaScript baru bernama default-src.js di folder debug-js\src.

Kita menyertakan segala sesuatu dalam panggilan ke fungsi $ jQuery biasa yang memastikan page telah dimuat penuh, sebelum menjalankan apa pun.

Pada jQuery 1.4, jika file JSON berisi kesalahan sintaks, permintaan biasanya akan gagal secara diam-diam. Lihat: jQuery.getJSON().

Kita membutuhkan tiga fungsi utama di sini:

  1. Panggilan ke metode jQuery getJSON untuk mengambil data JSON untuk menubar. Jika itu berhasil, kita membuat model tampilan Knockout dan memanggil ko.applyBindings (viewModel) untuk mengaktifkannya.
  2. Fungsi renderMenu yang akan dipanggil oleh event afterRender dari MenuTemplate. Fungsi ini memanggil konstruktor menubar untuk membuat menubar.
  3. Fungsi select yang dipanggil saat pengguna mengklik item menubar. Fungsi ini mengambil data JSON dari file konten yang relevan dan menampilkannya di page.

Perhatikan bahwa fungsi pilih harus dapat mengambil URL dari data JSON yang mendasarinya. Ini adalah bagian paling sulit untuk menikahi fungsi-fungsi menubar jQuery dengan template Knockout. jQuery memungkinkan Anda untuk menambahkan data ke dan mengambil data dari elemen HTML. Untuk menambahkan data dari dalam template Knockout, kita harus menggunakan pengikatan khusus, yang memiliki akses ke elemen HTML yang pasti. Pengikatan yang saya buat disebut addData dan hanya dilampirkan ke ko.bindingHandlers dengan cara Knockout biasa dengan metode init dan metode update.

Mungkin template node lebih masuk akal sekarang. Objek jQuery dilewatkan sebagai ui di handler select merupakan elemen li paling atas dari setiap item menubar, jadi kita menambahkan pengikatan kustom ke elemen item daftar tersebut: data-bind="addData: $data.url". Sekarang setiap elemen memiliki beberapa data yang melekat padanya, kita dapat mengambilnya dari handler select dengan sintaks ini: ui.item.data("url"), menggunakan metode data jQuery.

Elemen tautan lebih lugas dan hanya menggunakan attr standar dan binding teks:

Perhatikan bahwa saya telah mengawali href dengan simbol hash. Dengan begitu ketika Anda mengklik pada item menubar, Anda tidak mengikuti tautan ke halaman lain. Sebaliknya, acara yang ter-select dipecat dan handler, maaf, menanganinya.

Berikut fungsi pilih lengkap menggunakan pendekatan ini untuk mengambil data dari objek jQuery yang mewakili elemen yang diberikan oleh Knockout:

Saya menambahkan jebakan kesalahan ekstra karena jQuery sekarang tetap diam tentang kesalahan sintaks JSON. Saya tidak ingin pengguna dibebani dengan detail kesalahan sintaks JSON, tetapi saya ingin memberikan beberapa petunjuk tentang apa yang mungkin salah.

Inilah model tampilan Knockout yang didefinisikan dalam fungsi yang dilampirkan ke metode getJSON():


Langkah 5: Jalankan Proyek dalam Mode Debug.

Dengan Default-src.aspx terbuka di jendela IDE, klik jalankan (panah hijau tepat di bawah menu IDE) dalam mode Debug.

debug

Setelah proses build, Default-src.aspx akan muncul di jendela browser Anda. IDE menjalankan versi Express dari server web IIS di background. Dalam kasus saya, proyek menggunakan port 54713 di localhost untuk menjalankan page:
http://localhost:54713/debug/default-src.aspx

Default-src

Kita sekarang siap untuk bekerja pada proses pembuatan JavaScript.


Mengintegrasikan Proses Pembuatan JavaScript ke MSBuild

Proyek ini akan mengotomatiskan dua langkah utama yang kita perlukan untuk membuat proyek JavaScript yang kompleks:

  • Concatenate: Kumpulkan semua file sumber yang Anda butuhkan untuk page tertentu dan gabungkan mereka menjadi satu file. MSBuild tidak memiliki tugas Concat built-in seperti Ant atau NAnt jadi kita harus menggulirkan kita sendiri berdasarkan pada blog yang luar biasa ini Cara: Menggabungkan file menggunakan tugas-tugas MSBuild.
  • Minify: Perkecil file sumber kita sendiri dan gabungkan dengan file rilis produksi, seperti file jQuery, ke dalam satu file terkompresi.

Langkah 1: Beralih Antara Proyek dan Mengedit File Pembuatan Proyek

Folder tempat Anda membuat proyek .NET Anda akan menyertakan file yang terlihat seperti ini:

project_file

File NetTutsMSBuildJs.csproj hanyalah file XML yang secara khusus dikonfigurasi untuk menangani proses MSBuild untuk proyek ini. Sangatlah sah untuk membuat salah satu dari ini secara manual atau mengeditnya agar sesuai dengan proyek Anda. Jelas, untuk tujuan murni .NET, jauh lebih baik menggunakan Visual Studio GUI untuk mengonfigurasi file ini secara otomatis untuk Anda, tetapi inti dari tutorial ini adalah untuk menunjukkan kepada Anda bagaimana menambahkan dalam pembuatan JavaScript, yang bukan bagian dari standar membangun .NET.

Di Visual Studio, Anda tidak dapat mengedit file proyek ini kecuali Anda membongkar proyek, dan Anda tidak dapat memuat proyek jika ada kesalahan sintaks dalam file! Jadi, berlatih bongkar muat dan muat proyek sehingga Anda dapat mengedit file kunci ini. Untuk membongkar proyek, klik kanan proyek dan klik item Unload Project.

unload_project

Setelah membongkar proyek, semua folder dan file menghilang dan Anda tinggal hanya dengan solusi dan proyek di Solution Explorer. Klik kanan proyek dan kali ini menu konteks sangat pendek. Pilih Edit NetTutsMSBuildJs.csproj dan file konfigurasi proyek terbuka.

edit_proj_file

Sekarang, hanya untuk membangun kepercayaan diri Anda dan terbiasa untuk berurusan dengan saat-saat ketika Anda tidak dapat memuat proyek karena kesalahan sintaks dalam file proyek, ketik kesalahan yang disengaja dekat awal file proyek: cukup ketik huruf sebelum tag pertama di luar struktur dokumen XML. Simpan dan tutup file. Cobalah untuk memuat proyek dari menu konteks dan Anda akan mendapatkan pesan kesalahan yang mengatakan bahwa proyek tidak dapat dimuat. Ya, Visual Studio sangat ketat seperti ini.

project_load_error

Buka kembali file proyek, perbaiki kesalahan, simpan dan tutup lagi. Saat Anda memuat ulang proyek, itu akan memuat dengan lancar. Sekarang saatnya untuk mengedit secara nyata. Kita hanya akan mengubah satu hal secara manual di file proyek, dan itu akan menambahkan elemen Impor yang akan mengimpor file untuk melakukan pembuatan JavaScript.


Langkah 2: Buat File Build untuk Pembuatan JavaScript dan Impor Ke File Proyek.

Jika Anda menambahkan elemen Impor ke file proyek untuk file yang tidak ada, Anda tidak akan dapat memuat proyek, jadi buat file teks baru bernama js.build di folder jsbuild. Setelah Anda memasukkan kode XML yang diperlukan, IDE akan mengenali file ini sebagai file XML. Tidak perlu benar-benar mengasosiasikan ekstensi .build dengan editor XML. Masukkan kode awal ini ke jsbuild\js.build, simpan dan tutup.

Sekarang, bongkar proyek dan edit file proyek dengan menambahkan baris ini ke ujung file tepat sebelum tag penutup.

Anda sekarang harus dapat memuat ulang proyek.


Langkah 3: Hello Discworld!!!!!

Lima tanda seru, tanda pasti dari pikiran yang tidak waras. - Terry Pratchett, Reaper Man

Saya agak bosan dengan mengatakan "Hello World" di awal setiap tutorial TI baru. Jadi kali ini, saya akan menyapa luar biasa Discworld Terry Pratchett.

Buka js.build. IDE harus secara otomatis memperhatikan bahwa itu adalah file XML. Jika tidak, mungkin Anda memiliki XML yang tidak valid. Setelah menambahkan kode berikut untuk mengatur pesan Hello Discworld, IDE akhirnya harus menyadari ini adalah XML. Pastikan file js.build sekarang berisi XML berikut. Jangan lupakan lima tanda seru untuk mendapatkan rasa kegilaan yang tepat untuk Discworld!!!!!

Ketika Anda mengklik kanan pada proyek dan menjalankan build, Anda akan melihat pesan di jendela output.

hello_discworld

Seperti Ant, MSBuild menggunakan ide target untuk melakukan kelompok tugas. Target AfterBuild dijalankan secara otomatis oleh MSBuild setelah semua yang lain berhasil dibangun. Saya menempelkan JavaScript di ujung .NET build sehingga titik ekstensi AfterBuild tampaknya adalah tempat terbaik untuk meletakkan ini. Perhatikan bagaimana AfterBuild dijalankan secara otomatis dan dalam AfterBuild kita memanggil Target HelloDiscworld. Saya telah menetapkan Pentingnya pesan ke tinggi karena jika tidak mungkin tidak muncul di jendela output.


Langkah 4: Memilah Jalur

Kanan. Kita sedikit marah di Discworld dengan terlalu banyak tanda seru, tetapi setidaknya file build JavaScript tampaknya berfungsi! BAIK. Bercanda samping, kita sekarang harus mendapatkan hal yang paling penting dalam membangun rutinitas yang tepat: jalur.

Seperti Ant, saya selalu kesulitan memahami path absolut dan relatif dalam file konfigurasi ini, jadi saya ingin melangkah hati-hati. Tambahkan elemen PropertyGroup ke bagian atas file js.build, tepat di bawah tag Proyek dan tambahkan dua properti seperti ini.

Sekarang, ubah pesan sehingga kita dapat melihat properti-properti ini mengandung:

Sekarang bersihkan dan bangun proyek lagi atau pilih saja membangun kembali. Pesan muncul di output seperti ini:

Halo Discworld! from debug-js\concat


Langkah 5: Buat Target Bersih dan Init

Menyenangkan. Kita punya lingkungan, file sumber, dan properti di file build yang berisi path relatif yang menunjuk ke direktori yang perlu kita kerjakan. Sekarang kita dapat menambahkan Target CleanJs dan Target InitJs untuk Menghapus dan Membuat direktori concat dan min. Saya memiliki kebiasaan menempatkan sedikit "halo" pesan ke target ini ketika mengembangkan file-file ini hanya untuk meyakinkan diri bahwa mereka benar-benar menjalankan atau memeriksa nilai properti. Saya menemukan peningkatan verbositas output di MSBuild cenderung memberi saya banyak informasi yang tidak saya butuhkan, meskipun itu bagus ketika saya tidak dapat menemukan di mana saya telah membuat kesalahan.

MSBuild menggunakan jalur relatif sederhana dari folder akar dari keseluruhan proyek. Jika Anda memiliki folder bernama js di proyek Anda, Anda dapat menggunakan nilai js dalam Properti yang bernama dalam PropertyGroup tanpa kerumitan lebih lanjut.

Untuk menjalankan target ini tambahkan elemen CallTarget ke target AfterBuild.


Langkah 6: Menggabungkan File

Anda mungkin sudah terbiasa mengedit file js.build sekarang. Anda mungkin telah melihat pesan kesalahan yang mengganggu terkait dengan teks yang digarisbawahi dengan garis biru menggelegak, seperti ini:

invalid_child_element

Ini adalah bug yang mengganggu di Visual Studio yang telah ada cukup lama. Elemen PropertyGroup dan elemen ItemGroup dapat diisi dengan nilai apa pun yang Anda suka. Ini adalah bug yang mengganggu di Visual Studio yang telah ada cukup lama. Elemen PropertyGroup dan elemen ItemGroup dapat diisi dengan nilai apa pun yang Anda suka. Seperti yang Anda lihat, ConcatDir berfungsi saat Anda membuat proyek, dan tidak ada masalah saat memuat proyek. Abaikan saja kesalahan elemen anak tidak valid yang mengganggu ini.

Akhirnya, beberapa pekerjaan membangun nyata. Kami menambahkan target baru untuk menggabungkan file yang kami inginkan. Tidak seperti Ant dan NAnt, tidak ada tugas Concat built-in, jadi kita harus menggulung tugas ReadLinesFromFile kita sendiri

Tambahkan elemen CallTarget baru ke target AfterBuild di js.build memanggil ConcatenateJsFiles. Rebuild proyek seperti biasa dan lihatlah, file bernama default-concat.js secara ajaib akan dibuat di direktori debug-js\concat. Anda mungkin harus menyegarkan Solution Explorer untuk melihatnya.

Sekarang tambahkan halaman formulir Web baru yang disebut Default-concat.aspx ke folder debug, menautkannya ke halaman Main.Master. Ini sangat singkat dan sedikit berbeda dari halaman Default-src.aspx. Kali ini, semua JavaScript yang kita perlukan telah digabungkan menjadi satu file, jadi Anda hanya perlu satu tautan tag skrip ke default-concat.js.

Untuk mencoba ini, buka halaman Default-concat.aspx di jendela IDE dan jalankan kembali proyek dalam mode Debug. Anda harus melihat menubar yang berfungsi penuh di browser Anda dengan judul Debug concat muncul di bilah judul browser.


Langkah 7: Tahap Akhir - Meminimalkan

Target terakhir, target!!!!!

Meubar kita tampaknya berfungsi dan ketika kita menggabungkan file-file itu, kita tampaknya mendapatkan urutan yang benar dan semuanya berjalan lancar di page Debug-concat.aspx. Sekarang saatnya untuk mengecilkan file sumber default-src.js dan jquery.ui.menubar.js dan menggabungkannya dengan file rilis profesional dalam urutan yang benar. Ini sedikit lebih rumit karena sekarang kita perlu membawa ketergantungan eksternal yang sejauh ini belum kita perlukan: kompresor YUI. Ada .NET port ini sedang dikembangkan tapi aku sangat terbiasa dengan versi Java, saya lebih suka menggunakan favorit lama saya. Buat target baru yang disebut MinifyJsFiles seperti ini:

Perhatikan Compressor properti. Di sini Anda hanya perlu menentukan path relatif dari folder proyek, tetapi file jar, dijalankan oleh proses Java, akan membutuhkan path lengkap. Untungnya, MSBuild menyediakan cara mudah untuk mengubah jalur relatif menjadi jalur lengkap. Anda menggunakan % sintaks dan memanggil properti Fullpath. Ini adalah contoh dari Metadata Item terkenal MSBuild.

Tambahkan elemen CallTarget lain ke elemen AfterBuild untuk memanggil target MinifyJsFiles.

Sekarang target terakhir kita, target. Kita harus mengambil semua file rilis profesional dan menggabungkannya dengan versi sumber kita yang telah dikecilkan dan menggabungkannya ke dalam satu file.

Anda harus berhati-hati dengan properti ItemName ini dalam file build. Contoh properti dan barang disimpan dalam konteks global di MSBuild. Jika Anda menggunakan nama yang sama untuk ItemName dalam dua target gabungan yang berbeda, Anda akhirnya menggabungkan semua file dari kedua target.

Rebuild proyek dan Anda sekarang harus melihat dua file baru di folder debug-js\min: default-min.js dan jquery.ui.menubar-min.js. Folder debug-js seharusnya sekarang terlihat seperti ini setelah membangun kembali dan menyegarkan Explorer Solusi:

debug-js

Buat halaman formulir Web baru bernama Default-min.aspx yang ditautkan ke halaman Main.Master dan masukkan ke dalam folder debug.


Kesimpulan

Kita berjalan melalui langkah-langkah yang diperlukan dalam Visual Studio Express 2012 untuk Web, untuk membuat proyek JavaScript yang menikahi Knockout dengan jQuery UI untuk membuat sebuah menubar dan kemudian mengintegrasikan pembuatan JavaScript ke dalam proyek keseluruhan yang dibangun di Visual Studio.

Dalam tutorial ini kita berjalan melalui langkah-langkah yang diperlukan dalam Visual Studio Express 2012 untuk Web, untuk membuat proyek JavaScript yang menikahi Knockout dengan jQuery UI untuk membuat sebuah menubar dari file definisi JSON dan kemudian mengintegrasikan pembuatan JavaScript dari file sumber ke dalam. Proses NET MSBuild. Hasil akhirnya adalah kita memiliki halaman web dengan hanya satu tag skrip yang berisi semua JavaScript kompleks yang dibutuhkan untuk menjalankan page.

Saya pikir Anda dapat melihat betapa mudahnya untuk mengadaptasi contoh ini ke perpustakaan JavaScript yang sangat besar dan kompleks yang berjalan dalam proyek .NET. Ini juga harus cukup mudah untuk mengembangkan ide-ide ini untuk memasukkan tugas-tugas yang sesuai untuk versi rilis. Langkah selanjutnya yang jelas adalah menyalin file default.js yang sepenuhnya diperkecil dan digabungkan ke folder js, kemudian memasukkannya ke dalam file Default.aspx definitif di direktori root. Dengan contoh ini sebagai titik awal, Anda harus dapat menjelajahi dokumentasi MSBuild dan mengembangkan file build yang berfungsi penuh untuk mengotomatisasi setiap bagian dari proses pembuatan Anda.

Saya juga menggunakan pendekatan semacam ini untuk file CSS. Dalam kasus khusus ini, file jQuery UI CSS dioptimalkan dengan baik sehingga hampir tidak layak untuk diperkaya, tetapi dalam proyek lain mungkin penting untuk kinerja. Langkah selanjutnya yang lebih canggih untuk Anda yang grunters di luar sana adalah membuat file js.build yang menjalankan file kasar dengan tugas MSBuild Exec. Dengan begitu, Anda dapat dengan mudah memasukkan linting dan pengujian ke proses pembuatan.

Bacaan lebih lanjut

Untuk membaca lebih lanjut tentang Visual Studio, Nettuts+ yang sangat bagus Visual Studio: Web Dev Bliss akan memandu Anda tentang cara mengintegrasikan Essentials Web dan menambahkan pengecekan kode ke proses build Anda, tetapi sayangnya, Web Essentials tidak tersedia untuk edisi Express. Lihat jawaban Mads Kristensen di sini: "... sayangnya Express tidak mengizinkan ekstensi pihak ketiga untuk diinstal". Tutorial ini ditujukan untuk pengguna edisi Express dan saya harap tutorial ini telah memberi Anda titik awal untuk membuat build JavaScript terintegrasi Anda sendiri, semua dalam lingkungan Visual Studio Express.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.