Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Mengotomatiskan Proyek Anda dengan Ant Apache

by
Read Time:16 minsLanguages:

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

Pernah menemukan diri Anda melakukan tugas-tugas membosankan dan berulang sebagai pengembang web? Hari ini, saya akan menunjukkan kepada Anda bagaimana Anda dapat memotong meta-tugas tersebut dari siklus pengembangan Anda dengan sedikit otomatisasi. Dalam tutorial ini, Anda akan belajar cara mudah melakukan tugas yang berulang dengan Apache Ant.

Tutorial yang dipublikasi ulang

Setiap beberapa minggu, kami mengunjungi kembali beberapa posting favorit pembaca kami dari sepanjang sejarah situs. Tutorial ini pertama kali diterbitkan pada Maret 2011.


Intro: Apa itu Ant?

Semut membuatnya sangat mudah untuk mendefinisikan serangkaian tugas yang dapat Anda kemudian jalankan dengan beberapa perintah.

Semut adalah perangkat lunak yang pada awalnya dibangun untuk mengotomatisasi membangun perangkat lunak. Hal ini dibuat oleh Apache (ya, seperti Apache server), dan terutama tujuan adalah untuk membangun aplikasi Java. Bila Anda sedang membangun perangkat lunak (atau, dalam kasus kami, website apps), Anda melakukan beberapa tugas yang identik setiap kali Anda membangun atau menerbitkan atau menyebarkan proyek Anda. Ini adalah buang-buang waktu Anda yang berharga untuk melakukannya secara manual. Semut membuatnya sangat mudah untuk mendefinisikan serangkaian tugas yang dapat Anda kemudian jalankan dengan beberapa perintah pendek dan manis melalui terminal.

Siap? Mari kita mulai!


Langkah 0: Menciptakan proyek Dummy kami

Sebelum kita mendapatkan semut, kita perlu memiliki proyek untuk bekerja di sini. Berikut adalah file index.html yang saya gunakan:

Seperti yang Anda lihat, ini menjelaskan seluruh proyek. Jika Anda mengunduh proyek (link di bagian atas), Anda akan mendapatkan file CSS dan JavaScript.

Jadi, apa yang akan kita lakukan dengan proyek ini? Seperti yang Anda lihat, kami telah mendapat beberapa file CSS dan JavaScript yang terkait dalam proyek ini. Apa yang akan kita lakukan adalah kompilasi dan kompres masing-masing ke dalam file nya masing-masing dan FTP semuanya ke sebuah server. Sebelum semua itu, kita akan mulai dengan menginstal Ant.


Langkah 1: Menginstal semut

Menginstal Ant dapat tugas yang agak menakutkan. Untungnya, proses instalasi Windows dan Mac cukup mirip. Jika Anda berada di Linux, saya akan menganggap Anda sudah diinstal sudah semut, tahu bagaimana, atau bisa figure it out tanpa memegang tangan saya.

Jika Anda pada Mac, Anda mungkin sudah memiliki Ant diinstal; Namun, beberapa lebih canggih tugas (dalam kasus kami, FTP) tidak akan bekerja. Jadi, kita akan menginstal versi terbaru.

Sebelum kita mulai, saya akan mengarahkan Anda untuk petunjuk lengkap yang menawarkan Apache: Anda bisa mendapatkannya di sini. (Sayangnya, itulah seluruh manual untuk semut; Saya tidak bisa melakukan lebih baik, seperti yang dilakukan dengan bingkai. Anda akan melihat link "Menginstal Apache semut" pada frame kiri.) Apa yang saya katakan Anda di bawah ini dapat ditemukan di sana (dan lain selain), tetapi versi saya adalah sedikit lebih web-pengembang ramah.

Pertama, mari kita pastikan kita memiliki ketergantungan Jawa yang tepat. Apakah Anda berada di Windows atau Mac, Anda akan memerlukan Java Development Kit (JDK) - setidaknya versi 1.4. Anda dapat mendownloadnya di sini. Jika Anda tidak yakin yang versi JDK Anda memiliki, menjalankan perintah java-versi di terminal / perintah baris. Saat aku memahaminya, nomor versi JDK adalah sama seperti nomor versi Jawa.

Sekarang, mari kita men-download versi terbaru dari Ant. Anda bisa mendapatkannya dari halaman download untuk distribusi biner (tentu saja, Anda bisa mendapatkan sumber dan compile sendiri, jika itu adalah bagaimana Anda roll). Anda akan menemukan link setengah jalan ke bawah halaman:

Download LinksDownload LinksDownload Links

Setelah Anda telah men-download dan membuka ritsleting itu, kita harus menginstalnya. Ini adalah apa yang Anda akan mendapatkan:

Ant UnzippedAnt UnzippedAnt Unzipped

Bagian pertama dari instalasi berbeda dengan platform Anda. Mari kita mulai dengan langkah-langkah Windows:

Khusus Windows menginstal bit

Pertama, Anda harus memilih folder di mana Anda ingin menginstal Ant. Aku pergi dengan C:\ant, tetapi terserah kepada Anda. Membuat folder itu, dan memindahkan bin, lib, dan dll folder dari download folder ke folder itu. Anda juga akan ingin untuk memindahkan fetch.xml dan mendapatkan-m2.xml.

Setelah Anda sudah melakukannya, Anda akan memiliki untuk men-setup beberapa variabel lingkungan. Jika Anda tidak yakin bagaimana melakukan ini, Anda dapat menemukan petunjuk di sini (membuat variabel sistem ini — meskipun, Sejujurnya, seharusnya tidak masalah). Ini adalah apa yang Anda akan perlu untuk mengatur:

  • Anda akan memerlukan sebuah variabel yang disebut ANT_HOME; ini harus menunjuk ke folder yang Anda pindah komponen Ant. Contoh: C:\ant.
  • Anda akan memerlukan sebuah variabel yang disebut JAVA_HOME; ini mungkin sudah berada di sana, tetapi jika tidak, itu harus menunjuk ke folder yang memegang Anda menginstal Java. Mine adalah C:\Program Files\Java\jdk1.6.0_18.
  • Anda akan perlu untuk memodifikasi Anda sedang variabel Path. Ini adalah daftar folder baris perintah pencarian melalui untuk menemukan perintah yang Anda ingin menjalankan. Tidak menimpa competely ini; hanya menambahkan; %ANT_HOME%\bin untuk akhir itu. Jangan lewatkan koma itu; Itulah yang memisahkan jalur dalam daftar. Anda mungkin dapat menebak bahwa % ANT_HOME % sedikit referensi variabel yang kami buat sebelumnya.

Sekarang, Anda punya semut yang terinstal pada Windows! Ada satu langkah yang lebih penting, meskipun; Jadi melewatkan pver potongan Mac dan terus mengikuti.

Mac-spesifik menginstal bit

Anda sudah punya semut diinstal pada Mac Anda; Anda dapat melihat ini dengan menjalankan perintah semut yang di terminal. Ini akan menampilkan sesuatu di sepanjang garis /usr/bin/ant, sebagai path ke executable Anda menggunakan semut. Namun, jika Anda benar-benar pergi ke folder tersebut, Anda akan menemukan bahwa itu hanya symlink ke hal yang sebenarnya.

Path to AntPath to AntPath to Ant

Seperti yang Anda lihat, bagi saya yang terhubung ke /usr/share/java/ant-1.8.1/bin/ant. Sekarang, Anda bisa menggunakan ini, tetapi ketika saya mencoba, aku tidak dapat menggunakan komponen FTP. Agak daripada menginstal semut di tempat lain dan mengacaukan symlink, saya memilih untuk melakukan hal ini: bergerak apa yang ada di folder usr/share/java/ant-1.8.1 ke subfolder yang disebut _old dan bergerak barang baru. Anda akan memiliki untuk memindahkan tempat sampah, lib, dan folder dll, serta file fetch.xml dan mendapatkan-m2.xml. Sekarang, symlink yang akan mengarah ke versi terbaru dari semut. Jika Anda menjalankan semut-versi di terminal, Anda akan melihat bahwa Anda punya versi 1.8.2 (atau versi apapun terbaru saat Anda membaca ini).

Kembali ke semua OS instruksi

Ada satu langkah lagi untuk menyelesaikan instalasi. Ada beberapa opsional komponen yang tidak datang dengan semut, tetapi bahwa kita perlu untuk proyek kami, dan bahwa Anda mungkin ingin menggunakan jalan. Mari kita mendapatkan mereka sekarang.

Anda akan mulai dengan membuka baris perintah atau terminal dan mengubah ke direktori yang Anda baru saja menginstal semut dalam. Lebih penting lagi, itu adalah direktori Anda memasukkan berkas fetch.xml. Sekarang, jalankan perintah berikut:

Ini akan men-download dan menginstal beberapa opsional komponen; ini bukan salah satu dari mereka berkedip-dan-itu-atas perintah: itu bisa memakan waktu beberapa menit.

Sekarang, Anda punya Ant terpasang dan siap untuk menjalankan; Mari kita bekerja.


Langkah 2: Membuat build.xml File

Semut menggunakan XML file untuk menyimpan tugas proyek saat ini.

Semut menggunakan XML file untuk menyimpan tugas untuk proyek saat ini; Ketika Anda berada di direktori proyek itu pada baris perintah, Anda dapat menjalankan perintah semut TASK_NAME_HERE, dan itu akan menemukan tugas sesuai dalam XML file dan menjalankannya.

Jika Anda tidak akrab dengan XML, jangan khawatir. XML adalah singkatan eXtensible Markup Language, dan hal ini sangat mirip dengan HTML. Menggunakan tag dan atribut untuk menentukan data. Sebenarnya, hal ini lebih mirip ke XHTML (RIP), bahwa aturan-aturan ketat: semua tag dan atribut harus huruf kecil, nilai-nilai dikutip, doctype diperlukan, dll. Jangan khawatir walaupun, Anda akan mendapatkan menguasainya.

File XML yang Ant terlihat secara default harus bernama build.xml; Anda akan ingin untuk memasukkannya ke dalam folder proyek Anda.

Jadi apa yang sebenarnya terjadi dalam XML file? Inilah awal:

Tampak seperti HTML, eh? Baris pertama adalah doctype XML. Selanjutnya, kami memiliki root node, yang merupakan sebuah proyek. Saya telah menambahkan dua atribut itu: nama, yang hanya menjelaskan apa daftar tugas kami akan lakukan; dan default, yang mendefinisikan default tugas untuk menjalankan.

Lihat, inilah cara kerja ide default berfungsi. Katakanlah kita membuat tugas yang disebut call_mom. Kita bisa menjalankannya dari terminal dengan melakukan ini:

Jika Anda menemukan bahwa sebagian besar waktu Anda menjalankan Ant di proyek, Anda memanggil tugas yang sama, Anda ingin menjadikannya sebagai default. Dalam kasus kami, kami menetapkan inisialisasi sebagai tugas default, yang akan berjalan jika kami tidak memberi tahu semut untuk menjalankan apa pun.

Ini adalah keduanya sama.

Sekarang bahwa kita punya file build.xml kami, mari kita membuat tugas pertama kami.


Langkah 3: Menulis tugas pertama kami

Tasks disebut target dalam build.xml file. Periksa ini:

Plug ini ke dalam file build.xml Anda dan menjalankan call_mom semut di konsol. Anda harus output yang terlihat seperti ini:

Dalam output, semut akan memiliki sebuah entri untuk semua tugas-tugas yang dijalankan. Kemudian, output dari tugas tersebut akan ditampilkan, tab di atas nama tugas yang sesuai. Seperti yang Anda lihat, kita telah dipanggil tugas echo, yang mencetak apa pun yang kita dimasukkan ke dalamnya.

Tapi bagaimana saya tahu echo adalah tugas? Nah, Anda bisa mendapatkan daftar tugas built-in di sini dalam dokumentasi. Ini adalah waktu yang baik untuk menunjukkan bahwa banyak tugas memiliki beberapa cara mereka bisa disebut. Sebagai contoh, kita bisa juga melakukan: . Apa yang kutunjukkan kepadamu bukan satu-satunya cara untuk melakukan sesuatu.

Sekarang bahwa Anda mulai hangat ke ide-ide semut, mari kita bicara tentang properti.


Step 4: Membuat file properti

Semut memiliki sifat, yang sangat seperti variabel dalam bahasa pemrograman.

Ketika Anda menggunakan Ant lebih, Anda mungkin menemukan bahwa Anda memiliki file build.xml boilerplate yang Anda hanya men-tweak sedikit. Salah satu tweak ini mungkin nama file/folder. Semut memiliki properti, yang sangat mirip dengan variabel dalam bahasa pemrograman. Anda dapat membuatnya dengan cara ini (ini dilakukan di dalam tugas).

Anda juga bisa bergerak semua sifat-sifat ini ke dalam file terpisah, dan impor file. Itulah apa yang akan kita lakukan di sini. Ini membawa kita untuk membuat tugas (real) pertama kami:

Kami telah memanggil tugas kami, get_properties. Ini melibatkan dua tindakan: pertama, kita menggunakan tugas properti untuk mengimpor file (kita dapat melakukannya dengan atribut file). Kemudian, kami menggemakan pesan yang mengatakan bahwa itu berhasil. Sesederhana itu.

Tentu saja, kita akan perlu untuk membuat ant.properties file. Ini super sederhana; Inilah yang akan kita gunakan saat ini:

Anda mungkin berpikir ini benar-benar membuat lebih sulit, karena nama-nama variabel kami lebih dari nilai-nilai diri mereka sendiri. Yah, itu benar, tetapi itu memberi kita beberapa fleksibilitas dalam penggunaan file build.xml kami, membuatnya lebih reusable dan lebih shareable.


Step 5: Membuat beberapa tugas lain

Oke, sekarang mari kita mendapatkan serius. Kami jelas punya beberapa lebih banyak tugas untuk membuat sebelum kami memiliki file build.xml yang berguna.

Berikut adalah daftar tugas-tugas yang kita perlu membuat:

  • Satu untuk mengkompilasi file CSS.
  • Satu untuk kompres CSS file.
  • Satu untuk mengkompilasi file JavaScript.
  • Satu untuk kompres JavaScript file.
  • Satu untuk meng-upload semuanya ke server kami.
  • Satu untuk menginisialisasi tugas-tugas lain.
  • Satu untuk membersihkan apa yang orang lain lakukan.

Kita akan menggunakan beberapa taktik yang berbeda untuk melakukan semua ini, untuk memberikan gambaran yang baik tentang bagaimana Ant bekerja.

Kompilasi CSS dan JavaScript

Mari kita mulai dengan tugas kompilasi; ini mengambil satu set file dan menggabungkan mereka semua ke dalam satu file. Semut mempunyai tugas yang built-in bernama concat yang melakukan hal ini.

Saya menamakannya concat_css tugas ini. Di dalam, kami hanya menjalankan tugas concat. Seperti yang Anda lihat, file mereka akan menggabungkan ke (destfile, atau file tujuan) akan di assets/style.css. Anda akan melihat bahwa I am menggunakan sifat-sifat assets_dir, yang akan menggantikan nilai yang benar di. Anda harus membungkus penggunaan properti dalam notasi dolar tanda-dan-kawat gigi.

Dalam tugas concat, kita mendefinisikan filelist ini adalah hanya salah satu cara bahwa kita dapat mengambil banyak file. Saya menggunakan itu di sini karena hal itu memungkinkan saya untuk menentukan urutan saya ingin file ini menggabungkan. Aku memberikannya sebuah id, yang memberi kami akses ke file diatur dengan cara yang sama kita akan menggunakan parameter (meskipun kita tidak akan melakukan itu). Ini juga memiliki atribut dir, yang memberitahu tugas yang folder untuk menemukan file di. Kemudian, di dalam, hanya menentukan node file yang sesuai, dengan atribut nama mereka memegang nama file.

Ada tugas nyata pertama Anda! Mudah-mudahan, masuk akal. Sementara kita di itu, JavaScript satu tidak terlalu berbeda:

Mengompresi CSS dan JavaScript

Kompresi mendapat sedikit trickier, karena itu tidak dibangun dalam Ant. Namun, semut mendukung tugas-tugas di luar melalui Jawa .guci file. Hal ini sangat berguna bagi kita, karena YUI Compressor tersedia sebagai file .guci (yang satu-satunya cara yang tersedia). Anda dapat men-download di halaman download YUI Perpustakaan. Anda akan ingin menyimpannya ke lokasi yang cerdas, dan mungkin mengubah nama itu. Saya telah disimpan untuk MY_USER_FOLDER/bin/yui.jar. Melakukan apa yang menyenangkan Anda.

Sekarang, YUI Compressor akan memampatkan JavaScript dan CSS. Apa yang bisa kita lakukan di sini adalah membuat satu tugas kompres, dan kemudian memanggil dari dua tugas yang lebih spesifik. Kita dapat melakukan ini karena semut memiliki dukungan untuk memanggil tugas-tugas lain dan lewat di parameter. Mari kita lihat bagaimana ini bekerja:

Kami menggunakan perintah Jawa di sini. Hal ini sangat mirip dengan menjalankan jar file dari baris perintah. Atribut jar menunjuk ke jar file. Jika atribut garpu benar, guci akan berjalan di mesin virtual Java terpisah dari satu Ant berjalan pada. Kemudian, dalam node Jawa, kita mendefinisikan argumen. Pada baris perintah, kita akan lulus dalam input.file -o output.file. Jadi, kami melakukan hal yang sama.

Tapi, mana properti berkas datang dari? Dari sini:

Ini adalah tugas kita kompresi CSS. Pertama, perhatikan bahwa target simpul memiliki atribut kedua: tergantung. Anda mungkin bisa menebak bahwa ini berarti bahwa tugas compress_css tergantung pada tugas concat_css, jadi itu harus dijalankan pertama. Dengan cara ini, kita dapat memanggil compress_css dan ini secara otomatis akan menyebutnya concat_css pertama.

Sekarang, apa yang terjadi di dalamnya? Kami sedang melaksanakan tugas antcall, yang hanya panggilan tugas lain dalam file build.xml kami — dalam kasus ini, itu adalah tugas kita kompres. Dalam itu, kita dapat membuat sebagai banyak parameter seperti yang kita perlu, masing-masing mempunyai nama dan nilai. Ya, ini sangat banyak seperti memanggil fungsi. Ini adalah parameter file yang kita gunakan dalam tugas kompres kami.

Dan di sini adalah versi JavaScript:

Jangan lupa, ini adalah tergantung pada concat_js.

Mendapatkan bola menggelinding

Jalan kembali di atas-pada node proyek akar kami — kami mengatur tugas default sebagai menginisialisasi. Kami belum membuat tugas itu belum, jadi mari kita lakukan sekarang.

Tugas ini tergantung pada dua tugas lain (salah satu yang kita belum dibuat belum); kami hanya menggunakan daftar dipisahkan koma memerlukan beberapa tugas.

Di dalam, tugas pertama adalah untuk menciptakan direktori aset kami, dengan tugas mkdir (seperti pada baris perintah). Selanjutnya, kita membuat dua antcalls, satu untuk kompres CSS, dan satu untuk kompres JavaScript. Ingat, ini dua tugas tergantung pada fungsi masing-masing rangkaian mereka, sehingga mereka akan memanggil mereka. Akhirnya, kami akan echo pesan membiarkan pengguna mengetahui bahwa kita sudah selesai.

Membersihkan

Apa tentang tugas itu clean_up menginisialisasi tergantung pada? Hal ini cukup sederhana:

Itu hanya menghapus direktori aset. Ini tidak benar-benar diperlukan, tetapi Anda mungkin menemukan itu berguna.

Meng-upload proyek

Mari buat satu tugas lagi; kami ingin mengunggah proyek kami ke server. Berkat perintah ftp, ini mudah.

Kami menyebut ini tugas upload_files, dan itu tergantung pada inisialisasi. Kami menggunakan tugas FTP di sini. Seperti yang Anda lihat, semua info penting disimpan di atribut. Jika Anda pernah bekerja dengan klien FTP sebelumnya, semua opsi ini seharusnya tidak asing.

  • Di dalam node ftp, kami telah membuat kumpulan file yang ingin kami unggah. Dalam hal ini, kami menggunakan elemen fileset.
  • Kami memiliki atribut dir pada node filset yang mendefinisikan direktori root untuk apa yang ingin kami kumpulkan.
  • Kemudian, di dalam, kita menggunakan node include untuk mendapatkan file spesifik: kita hanya lulus sebagai atribut nama file (s) yang ingin kita dapatkan. Dalam contoh kami, kami mendapatkan semua direktori aset dan kontennya, dan file index.html.

Setelah Anda mengisi informasi server Anda dalam tugas ini, itu harus mengunggah file-file itu untuk Anda!

Perhatikan bagaimana kami telah mengatur tugas-tugas ini. Jika kami menjalankan ant pada baris perintah, kami menggabungkan dan mengompresi CSS dan JavaScript, tetapi kami tidak akan mengunggahnya; itu bukan default. Jika kami ingin mengunggahnya, kami dapat menjalankan ant upload_files; karena itu tergantung pada inisialisasi, kita tidak perlu memanggil inisialisasi terlebih dahulu. Tentu saja, kami dapat memanggil tugas individu apa pun yang kami inginkan (misalnya: ant compress_js).


Kesimpulan: Ulas Seluruhnya

Sebelum kami menutup, ada beberapa peluang dan tujuan yang ingin saya sebutkan:

  • Perhatikan bahwa saya tidak menggunakan tugas depens pada tugas rantai daisy bersama-sama. Anda dapat melakukannya, tetapi saya telah memilih untuk menyimpannya ke tugas yang bergantung pada sebenarnya, dan membuat tugas inisialisasi untuk memanggil yang lain. Ini sepertinya lebih tepat secara semantis.
  • Yang saya tunjukkan pada Anda hanyalah sepotong kecil dari apa yang dapat dilakukan oleh Semut. Jika Anda ingin mempelajari lebih lanjut, mulailah dengan melihat ikhtisar tugas. Ini akan menunjukkan kepada Anda semua tugas bawaan. Anda juga akan menyadari bahwa ada banyak cara untuk melakukan hal yang sama ini (seperti yang saya tunjukkan pada Anda dengan tugas echo). Pola yang saya gunakan tidak berarti 'satu cara yang benar.' Selain itu, Ant Wiki adalah sumber yang bagus.
  • Mungkin bagus jika kita bisa memiliki tugas yang akan menguraikan HTML, menemukan stylesheet dan skrip, dan membuatnya dalam urutan yang benar. Sayangnya — karena Semut tidak ditulis untuk pengembang web — yang tidak ada di dalamnya. Kami harus membuat antlib (ekstensi), dan itu akan ditulis di Java. Untuk saat ini, kita harus mem-hard-out daftar list stylesheet dan skrip.

Dan itu bungkus! Saya harap Anda telah mempelajari beberapa teknik baru yang akan menghemat waktu Anda di masa mendatang. Jika Anda memiliki pertanyaan, jangan ragu untuk mempostingnya di bawah ini! Terima kasih banyak telah membaca!

Advertisement
Did you find this post useful?
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.