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

Otomatisasi Alur Kerja JavaScript Menggunakan Grunt dan Gulp

by
Difficulty:BeginnerLength:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

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

Ketika Anda baru untuk pembangunan front-end dan mulai menguasai HTML5, CSS dan JavaScript, jelas langkah berikutnya adalah untuk meletakkan tangan Anda pada tools yang sebagian besar pengembang gunakan untuk tetap waras di ruang kompleks ini. Anda juga berhak untuk memiliki lebih banyak fleksibilitas dan fitur saat menulis lembar CSS anda dengan menggunakan Less. Anda juga berhak untuk mengoptimalkan bandwidth dengan minifying kode JS. Anda juga bisa untuk dapat secara otomatis memeriksa kode JS baik menggunakan JSHint.

Anda layak mendapat semua hal yang baik.

Begitu Anda mulai menggunakan semua tools besar ini dengan tangan, jalankan perintah yang lebih dan lebih secara manual. Kadang-kadang, Anda lupa untuk menjalankan kompilator Less... Kadang-kadang Anda lupa untuk menjalankan JSHint dan bug dikirim...

Dan tiba-tiba anda menemukan diri anda bertanya-tanya: Apakah ada solusi untuk mengotomatisasi semua alat-alat ini? Bagaimana anda dapat membuat alur kerja yang berulang untuk mencegah anda dari membuat kesalahan?

Jelas solusi itu ada, dan dua alat secara khusus sedang menunggu untuk anda untuk mulai: Grunt dan Gulp.

Sebagai newbie menggunakan tool ini, Anda bertanya-tanya bagaimana mereka berjalan dan mana yang digunakan, tidakkah anda? Yah, sempurna, anda membaca artikel yang tepat!

1. Contoh Kami Akan Menggunakan

Aku akan memberikan dasar untuk menggunakan Grunt dan Gulp menggunakan contoh yang sangat sederhana yang dapat anda download dari GitHub.

Ini adalah situs web sederhana yang terdiri dari tiga file:

list of files indexhtml mainjs and stylesless

Styles.less mendefinisikan CSS sheet dalam cara yang lebih kaya daripada mungkin menggunakan file CSS standar. Pada akhirnya kami menggunakan kompiler Less untuk membuat styles.css file. Menggunakan Less, kami dapatmenggunakan variabel dalam CSS file:

variables in the css file

Mendapatkan informasi lebih lanjut tentang Less dalam Getting Started guide.

Kode JavaScript dan HTML benar-benar sederhana. Halaman yang akan terlihat seperti ini:

Simple HTML web page

2. Memahami Node.js Package Manager

Anda perlu memahami terlebih dahulu bagaimana Node.js Package Manager (npm) bekerja.

NPM adalah alat yang disediakan Node.JS. Hal ini digunakan untuk mendapatkan alat-alat dan kerangka kerja sementara otomatis menyelesaikan dependensi mereka.

Misalnya, untuk menggunakan kurang dan compile ke dalam file CSS dapat digunakan web, pertama Anda harus menginstal Less menggunakan perintah ini:

Catatan: Untuk mendapatkan baris perintah npm, anda harus menginstal Node.js dari situs Node.

Setelah ini selesai, Anda dapat menjalankan perintah ini untuk mengkompilasi file .less ke dalam .css:

NPM menggunakan file yang membuat dan stores di folder lokal yang bekerja di: package.json. File ini menggunakan JavaScript Object Notation (JSON) format untuk membiarkan npm tahu mana alat dan versi diinstal dan kerangka kerja yang digunakan oleh project saat ini (yang diwakili oleh folder saat ini).

File ini penting untuk Grunt dan Gulp karena akan mengandung daftar plugin yang telah di-download dan digunakan dalam alur kerja otomatisasi Anda.

Untuk membuat file kosong package.json anda dapat menggunakan perintah npm berikut:

Anda akan mulai dengan beberapa pertanyaan yang dapat anda jawab menggunakan opsi default, dan kemudian anda akan siap untuk memulai.

Dalam file ini anda akan memiliki dua jenis dependensi:

  • yang diperlukan untuk mengeksekusi aplikasi web atau aplikasi Node.js Anda
  • yang diperlukan untuk tahap pengembangan (seperti Less) dan yang digunakan untuk mengkompilasi atau memeriksa kode anda

NPM pada dasarnya memberikan tiga cara untuk menginstal paket:

  • global pada mesin anda menggunakan -g atau -global opsi global
  • untuk tujuan eksekusi, lokal di folder proyek Anda menggunakan tidak ada pilihan (hanya npm install [tools atau framework])
  • untuk tujuan dev, secara lokal pada proyek folder menggunakan opsi --save-dev

Yang ketiga akan membuat bagian devDependencies  section / properti di dalam file package.json.

devDependencies section property inside the packagejson file

3. Grunt

Apa itu Grunt?

Grunt merupakan pelopor dalam JavaScript otomatisasi alur kerja area. Ada banyak pengguna Grunt terkenal seperti Twitter, jQuery, dan Modernizr.

Prinsip dasar untuk Grunt adalah untuk memberikan cara mudah untuk menjalankan tasks. Task adalah satu set kode file dan file-file konfigurasi yang sudah dibuat untuk Anda. Anda bisa mendapatkan tugas baru dengan menginstal plugin grunt dengan menggunakan npm. Anda dapat menemukan sebuah plugin untuk hampir setiap alat yang mungkin anda gunakan, seperti Less dan JSHint.

Untuk menjalankan Grunt, Anda harus membuat Gruntfile di mana Anda menentukan tugas-tugas yang Anda ingin menjalankan dan konfigurasi untuk masing-masing. Setelah ini dilakukan, Anda hanya perlu menjalankan baris perintah grunt menentukan tugas Anda ingin menjalankan (default atau satu tertentu) dan ia akan melakukannya secara otomatis.

Sekarang mari kita pergi melalui panduan langkah demi langkah untuk mengatur semua ini.

Langkah 1. Membuat File Package.json

Gunakan npm untuk init file:

Anda akan harus menjawab beberapa pertanyaan seperti nama proyek dan apa defaultnya .js file. Anda juga dapat memilih untuk membuat file secara manual dan mengatur kontennya:

Langkah 2. Menginstal Grunt Secara Global dan Lokal

Anda perlu menginstal grunt global untuk mendapatkan baris perintah dan lokal untuk menginisialisasi segala sesuatu yang diperlukan untuk proyek.

Jalankan:

Kemudian jalankan di lokal:

Catatan: Jangan lupa bagian -dev untuk ditetapkan sebagai salah satu devDependencies dalam package.json file.

Langkah 3. Membuat GruntFile.js

Grunt bekerja menggunakan file bernama gruntFile.js. File ini berisi semua yang diperlukan oleh Grunt, yang mengatakan:

  • konfigurasi untuk tugas-tugas
  • kustom tugas
  • tugas loading

Grunt mengharapkan file untuk ekspor fungsi tunggal yang membawa satu parameter yang bernama "grunt". Anda akan menggunakan objek ini untuk melakukan semua tindakan relatif Grunt.

Berikut adalah gruntfile minimal yang hanya membaca package.json file dan membuat tugas default yang tidak menjalankan apa-apa.

Catatan: menempatkan file dalam folder proyek, berdampingan dengan package.json file.

Anda bisa menjalankan untuk pastikan semuanya telah dikonfigurasi dengan benar.

Untuk melakukannya, Buka prompt perintah pada folder proyek dan jalankan:

Anda harus melihat sesuatu seperti ini:

Done without errors

Langkah 4. Tambahkan Tugas Pertama Anda: JSHint

Sekarang bahwa Gruntfile Anda sudah siap, langkah berikutnya adalah untuk menambahkan sebuah plugin dan menggunakannya. Semua plugin dapat ditemukan dalam daftar situs web Grunt. Salah satu tugas yang umum dilakukan di Gruntfile memeriksa jika sintaks JavaScript benar. Untuk melakukan itu, kita biasanya menggunakan JSHint.

Mari kita tambahkan ini ke alur kerja kasar Anda.

Jika Anda mencari JSHint pada halaman plugins Grunt, Anda akan menemukan grunt-contrib-jshint, yang sesuai dengan apa yang kita butuhkan!

Dalam folder proyek, jalankan:

Salah satu yang hal ini dilakukan, Anda harus menambahkan di Gruntfile.js Anda. Ada dua langkah sederhana untuk itu:

  1. Memuat plugin.
  2. Mengkonfigurasi tugas.

Untuk memuat plugin, menggunakan fungsi loadNpmTasks:

Konfigurasi dilakukan dalam fungsi -initConfig mana Anda harus menambah sebuah properti baru ke objek diberikan dalam parameter. Ini harus menjadi nama tugas yang Anda ingin menambahkan dan berhubungan dengan plugin yang Anda gunakan. Cara terbaik untuk mengetahui nama itu dan daftar pilihan yang tersedia untuk tugas adalah untuk melihat dokumentasi plugin. Anda akan selalu menemukan sampel terdokumentasi dengan baik.

Sebagai contoh, dalam sampel kami kami ingin memeriksa semua file JavaScript kecuali gruntfile.js. Kami juga ingin mengaktifkan satu set aturan untuk check-in file JavaScript seperti eqeqeq untuk memastikan kita menggunakan triple sama bila diperlukan.

Berikut adalah fungsi initConfig diubah:

Code for the initConfig function modified

Anda dapat menjalankan tugas Anda dengan menggunakan baris perintah berikut (mana Anda menentukan nama tugas sebagai parameter untuk grunt):

Hasilnya adalah di sini:

Done without errors

Anda hanya perlu menjalankan perintah dan secara otomatis akan meminta Anda untuk kesalahan itu pertemuan.

Selamat, Anda sekarang memiliki tugas otomatis di alur kerja grunt Anda!

Langkah 5. Tambahkan Tugas Kedua: Kompilasi Less

Tugas JSHint bekerja dengan baik, tapi itu sedikit sendirian dalam alur kerja. Biasanya, kami menggunakan alat-alat seperti grunt untuk menjalankan lebih dari satu tugas.

Hal ini benar-benar mudah untuk menambahkan lebih dari mereka, karena anda hanya perlu mengikuti langkah yang sama. Katakanlah Anda sekarang ingin menambahkan kompilasi untuk file Anda yang kurang dalam proses otomatis. Jika Anda mencari plugin Grunt, Anda akan menemukan sebuah plugin grunt-contrib-less yang dapat Anda instal di folder proyek Anda:

Seperti halnya dengan tugas JSHint, Anda harus menambahkan konfigurasi:

code to add the configuration

Kemudian, memuat tugas:

code to load the task

Anda sekarang dapat menjalankan kasar dan menentukan task less: ini hanya akan meluncurkan less. Itu OK, tapi Anda ingin menjalankan semua tugas, benar? Itulah peran tugas default.

Ketika Anda hanya menjalankan grunt tanpa menentukan tugas apapun, itu akan mencari tugas default dan menjalankan semua tugas yang ditetapkan dalam rangkaian. Anda dapat mengubah itu untuk menjalankan less dan jshint. Catatan bahwa untuk menambahkan sekelompok tugas-tugas seperti default, Anda harus memanggil fungsi registerTask:

code to call the registerTask function

Dari sekarang, ketika Anda menjalankan grunt, itu akan menjalankan jshint, dan less:

Running less task done without errors

Anda dapat menambahkan apapun tugas yang Anda inginkan, dan Anda juga dapat menentukan tugas kelompok lain seperti default dan memanggil mereka dengan nama mereka melewati sebagai argumen untuk baris perintah grunt.

Mudah, kan?

Langkah 6. Gunakan Watch Jadi Anda Tidak Harus Jalankan Grunt Secara Manual

Sekarang, Anda adalah seorang pengembang yang bahagia. Semua tugas berulang otomatis di dalam alur kerja kasar, dan Anda hanya perlu menjalankan grunt untuk mengeksekusi. Tetapi dapat dilakukan bahkan lebih mudah. Hal ini dapat dilakukan secara otomatis.

Untuk melakukan itu, Anda dapat menambahkan tugas tertentu bernama watch. Tugas ini akan terus-menerus memeriksa folder kerja Anda dan, berdasarkan aturan, ketika file yang diubah, grunt akan menjalankan tugas yang terkait.

Pertama, instal watch dalam folder proyek Anda:

Load itu seperti semua tasks lain yang menggunakan fungsi loadNpmTasks, dan mengkonfigurasinya. Bagian konfigurasi sedikit berbeda di sini karena Anda perlu menentukan konfigurasi untuk setiap tugas yang ingin Anda cakup menggunakan watch.

code to specify a configuration for each task you want to cover using watch

Untuk informasi lebih lanjut, Anda dapat membaca dokumentasi lengkap untuk tugas ini.

Bila Anda ingin mengaktifkan watch, Anda hanya perlu menjalankan perintah berikut:

Dan itu akan melaksanakan tugas-tugas yang setiap kali file berubah dan file ini adalah dalam lingkup watch file untuk tugas tertentu.

execute tasks each time a file is changed and this file is in the scope of watched files for the specific task

Dan hanya itu! Anda sekarang tahu segalanya untuk menciptakan alur kerja otomatis yang menggunakan grunt.

4. Grunt

Apa itu Gulp?

Gulp adalah sebuah alternatif untuk grunt. Ini sedikit lebih baru dan memiliki reputasi sebagai lebih fleksibel daripada grunt. Sebelum memilih mana yang Anda akan menggunakan, mari kita lihat bagaimana gulp bekerja.

Gulp adalah alat otomatisasi alur kerja. Seperti grunt, kerjanya menggunakan npm dan file package.json. Semua plugin yang tersedia juga dapat didownload menggunakan npm dan ditambahkan sebagai devDependencies dalam package.json file.

Salah satu perbedaan utama adalah bahwa gulp menggunakan stream. Stream adalah satu set fungsi di mana file akan dimodifikasi dalam memori. File akan ditulis pada disk hanya pada akhir proses, sehingga lebih efisien. Grunt task, di sisi lain, bekerja sebagai Silos dan tidak terbelenggu.

Mari kita lihat sekilas bagaimana Gulp bekerja dengan mengikuti beberapa langkah mudah.

Langkah 1. Membuat File Package.json

Mirip dengan Grunt, pertama Anda harus membuat file package.json. Anda dapat menggunakan teknik yang sama persis seperti yang Anda digunakan untuk sampel grunt.

Langkah 2. Instal Gulp dan Gulp-Util Global dan Lokal

Setelah package.json file dibuat, instal gulp secara global dan lokal menggunakan:

dan

Ini akan menginstal baris perintah gulp dan semua yang diperlukan untuk menjalankan gulp alur kerja.

Anda kemudian harus menginstal gulp utils, yang berisi fungsi umum yang dimiliki oleh plugin lain:

Akhirnya, membuat minimum gulp file yang akan terlihat seperti ini:

Seperti yang Anda lihat, ini sedikit berbeda dari sintaks grunt. Di gulp, plugin dimuat menggunakan require sintaks karena Anda mungkin akan digunakan jika Anda seorang pengembang Node.js. Ada juga tugas default didefinisikan dengan menggunakan fungsi gulp.task.

Jika Anda menjalankan baris perintah gulp menggunakan command prompt dalam folder proyek, Anda harus melihat hasil seperti ini:

result of running the gulp command line using a command prompt

Langkah 3. Menggunakan Tugas Pertama Anda: Less Kompilasi

Untuk menggunakan plugin dalam gulp, Anda menggunakan fungsi yang sama seperti yang kita digunakan untuk membuat tugas default. Hal ini karena Anda tidak harus menggunakan nama khusus untuk membuat tugas. Anda hanya menyebutnya gulp.task, menetapkan nama yang Anda inginkan, dan memberikan fungsi JavaScript sebagai parameter kedua. Ketika gulp menjalankan tugas, itu akan menjalankan fungsi ini.

Untuk menggunakan plugin, Anda menyebutnya menggunakan nama yang Anda pilih ketika memerlukannya. Biasanya, Anda menyebutnya sebagai bagian dari alur kerja streaming yang biasanya dimulai dengan pilihan file. Hal ini dilakukan dengan gulp.src fungsi. Itu akan memilih sekelompok file dan sungai yang dapat digunakan oleh fungsi lain yang menggunakan pipe. Itu adalah bagaimana Anda dapat berantai beberapa tindakan tanpa menulisnya ke disk. Anda hanya melewati stream dari satu plugin yang lain.

Berikut ini adalah contoh dasar Less:

basic sample for less

Kami pertama require ('gulp-less') untuk memuat plugin less untuk gulp. (Kami mendapat menggunakan npm install gulp-less--save-dev).

Maka gulp.src akan memilih semua file .less, kita 'pipa' untuk fungsi less() dan akhirnya adalah 'disalurkan' untuk gulp.dest yang menunjukkan di mana untuk menulis hasil. Sebagai gulp.src dapat memilih lebih dari satu file, gulp.dest menentukan folder.

Setelah Anda memahami piping model, Anda dapat dengan mudah mendapatkan hasil yang sama seperti yang kita punya menggunakan grunt.

Kekuatan gulp adalah bahwa Anda dapat membuat tugas-tugas khusus di mana Anda memanggil lebih dari satu plugin dan dimana Anda dapat mengaitkan mereka seperti yang Anda inginkan.

Catatan: jelas ada juga plugin gulp-watch yang dapat Anda gunakan untuk mengotomatiskan peluncuran alur kerja Anda!

Kesimpulan: Mana yang Akan Dipilih?

Saya harap Anda sekarang memiliki pemahaman yang lebih jelas tentang mengapa Anda membutuhkan alur kerja otomatisasi dan bagaimana Anda dapat menggunakan Grunt atau Gulp untuk mendapatkannya.

Memilih salah satu dari mereka lebih terkait dengan tugas yang ingin Anda capai.

Grunt mudah digunakan. Anda tidak perlu memahami piping system, dan mencapai tugas-tugas sederhana akan lebih mudah. Ini adalah tool yang benar-benar matang, yang digunakan oleh banyak dikenal editor dan pengembang, dan ada banyak plugin yang tersedia.

Itu mengatakan, Gulp dirancang dapat memberi Anda banyak fleksibilitas Ini telah ada selama beberapa waktu sekarang, dan bahkan jika Anda tidak akan menemukan banyak plugin seperti yang Anda akan untuk Grunt, semua yang klasik tersedia untuk Gulp.

Jika Anda menggunakan alur kerja yang benar-benar standar dengan langkah-langkah umum seperti JSHint, uglifying, CSS memvalidasi, dll, Grunt adalah pilihan yang baik. Jika Anda melakukan tugas yang lebih rumit, Gulp akan menjadi bantuan yang baik.

Informasi Lebih Lanjut

Lebih Banyak Hands-On Dengan JavaScript

Microsoft memiliki banyak pembelajaran gratis di banyak topik JavaScript open source, dan kami sedang dalam misi untuk membuat lebih banyak dengan Microsoft Edge. Berikut adalah beberapa untuk diperiksa:

Dan beberapa alat gratis untuk memulai: Visual Studio kode, Azure Trial, dan cross-browser testing tools — semua tersedia untuk Windows, Mac, atau Linux.

Artikel ini adalah bagian dari seri web dev teknologi dari Microsoft. Kami sangat gembira untuk berbagi Microsoft Edge dan EdgeHTML engine rendering yang baru dengan Anda. Dapatkan gratis mesin virtual atau menguji jarak jauh pada perangkat Anda Mac, iOS, Android atau Windows @ http://dev.modern.ie/.

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.