Cara Menggunakan Grunt Untuk Mengotomatiskan Alur Kerja Anda [Tutorial]

Saya seorang pendukung besar otomatisasi karena itu membuat hidup jadi lebih sederhana. Mengapa menghabiskan waktu dengan tugas-tugas kasar dan monoton yang menyedot kekuatan hidup Anda saat Anda memiliki komputer untuk melakukan sesuatu untuk Anda? Ini terutama berlaku untuk pengembangan web.

Banyak tugas pengembangan bisa menjadi tugas. Saat mengembangkan Anda mungkin ingin mengkompilasi kode, saat mendorong versi pengembangan Anda dapat menggabungkan dan memperkecil file, menghapus hanya sumber daya pengembangan, dan sebagainya. Bahkan yang relatif tidak rumit seperti menghapus banyak file, atau mengganti nama folder dapat mengambil sebagian besar waktu kita.

Pada artikel ini saya akan menunjukkan kepada Anda bagaimana Anda dapat membuat hidup Anda lebih mudah dengan memanfaatkan fungsionalitas luar biasa yang ditawarkan oleh Grunt, seorang pelari tugas Javascript. Saya akan memandu Anda melalui seluruh proses jadi jangan khawatir meskipun Anda bukan seorang penyihir Javascript!

Lebih banyak tentang Hongkiat.com:

CSSMatic memudahkan CSS untuk Desainer Web
Mengotomatiskan Tugas di Mac dengan Tindakan Folder
Mengotomatiskan file Dropbox Anda Dengan Tindakan
10 aplikasi untuk membantu mengotomatiskan Tugas di perangkat Android Anda
Cara (secara otomatis) mencadangkan situs web Anda ke Dropbox

Menginstal Grunt

Menginstal Grunt cukup mudah karena menggunakan pengelola paket simpul. Ini berarti Anda mungkin juga harus menginstal Node itu sendiri. Buka terminal atau prompt perintah (saya akan memanggil terminal ini mulai sekarang) dan masuk nmp -v.

Jika Anda melihat nomor versi yang Anda miliki npm terinstal, jika Anda melihat kesalahan "perintah tidak ditemukan", Anda harus menginstalnya dengan membuka halaman unduhan simpul dan memilih versi yang Anda butuhkan.

Setelah Node diinstal, mendapatkan Grunt adalah masalah perintah tunggal yang dikeluarkan di terminal:

npm instal -g grunt-cli

Penggunaan Dasar

Anda akan menggunakan Grunt berdasarkan proyek-ke-proyek karena setiap proyek akan memiliki persyaratan yang berbeda. Mari kita mulai proyek sekarang dengan membuat folder dan menavigasi melalui terminal kami juga.

Dua file menjadi jantung Grunt: package.json dan Gruntfile.js. File paket mendefinisikan semua dependensi pihak ketiga yang akan digunakan otomasi Anda, Gruntfile memungkinkan Anda mengontrol bagaimana tepatnya ini digunakan. Mari kita membuat file paket tanpa tulang sekarang dengan konten berikut:

"name": "test-project", "versi": "1.0", "devDependencies": "grunt": "~ 0.4.5",

Nama dan versi terserah Anda, dependensinya harus berisi semua paket yang Anda gunakan. Kami tidak melakukan apa-apa saat ini sehingga kami hanya akan memastikan Grunt sendiri ditambahkan sebagai ketergantungan.

Anda mungkin bertanya pada diri sendiri apa yang dilakukan garis tegang (~) yang disebut tilde di sana.

Versi dapat diminta menggunakan aturan dari semantic versioner untuk npm. Pendeknya:

Anda menentukan versi yang tepat suka 4.5.2
Anda dapat menggunakan lebih dari / kurang dari untuk menunjukkan versi minimum atau maksimum seperti > 4.0.3
Menggunakan tilde menentukan blok versi. Menggunakan ~ 1.2 dianggap 1.2.x, versi apa pun di atas 1.2.0 tetapi di bawah 1.3

Ada lebih banyak cara untuk menentukan versi yang tersedia tetapi ini sudah cukup untuk sebagian besar kebutuhan. Langkah selanjutnya adalah membuat Gruntfile yang akan melakukan otomatisasi kami.

 module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ;

Ini pada dasarnya adalah kerangka untuk Gruntfile; ada dua tempat menarik. Satu lokasi berada di dalam initConfig () fungsi. Di sinilah semua konfigurasi proyek Anda berjalan. Ini akan mencakup hal-hal seperti menangani kompilasi KURANG / SASS, skrip minifying, dan sebagainya.

Lokasi kedua di bawah fungsi di mana Anda menentukan tugas. Anda dapat melihat satu tugas yang ditentukan bernama “standar”. Saat ini kosong sehingga tidak melakukan apa-apa, tapi kami akan mengembangkannya nanti. Tugas-tugas pada dasarnya mengantri sedikit demi sedikit dari konfigurasi proyek kami dan menjalankannya.

Misalnya, tugas yang diberi nama “skrip” dapat menggabungkan semua skrip kami, lalu memperkecil file yang dihasilkan dan kemudian memindahkannya ke lokasi akhirnya. Ketiga tindakan ini semuanya didefinisikan dalam konfigurasi proyek tetapi adalah “ditarik bersama” oleh tugas. Jika ini belum jelas, jangan khawatir, saya akan menunjukkan kepada Anda bagaimana ini dilakukan.

Tugas Pertama Kami

Mari kita buat tugas yang mengecilkan satu file javascript untuk kita.

Ada empat hal yang perlu kita lakukan setiap saat kita ingin menambahkan tugas baru:

Instal plugin jika perlu
Membutuhkannya di Gruntfile
Tulis tugas
Tambahkan ke grup tugas jika perlu

(1) Temukan Dan Instal Plugin

Cara termudah untuk menemukan plugin yang Anda butuhkan adalah mengetikkan sesuatu seperti ini ke Google: “minify javascript grunt plugin”. Hasil pertama harus mengarahkan Anda ke plugin grunt-contrib-uglify yang hanya kami butuhkan.

Halaman Github memberi tahu Anda semua yang perlu Anda ketahui. Instalasi adalah satu baris di terminal, inilah yang perlu Anda gunakan:

 npm instal grunt-contrib-uglify --save-dev

Anda mungkin perlu menjalankan ini dengan hak admin. Jika Anda mendapatkan sesuatu seperti npm ERR! Silakan coba jalankan perintah ini lagi sebagai root / Administrator. di sepanjang jalan cukup ketik sudo sebelum perintah dan masukkan kata sandi Anda ketika diminta:

 sudo npm instal grunt-contrib-uglify --save-dev

Perintah ini sebenarnya mem-parsing package.json file dan menambahkannya sebagai ketergantungan di sana, Anda tidak perlu melakukannya secara manual.

(2) Membutuhkan Gruntfile

Langkah selanjutnya adalah menambahkan Gruntfile Anda sebagai persyaratan. Saya ingin menambahkan plugin di bagian atas file, inilah Gruntfile lengkap saya setelah menambahkan grunt.loadNpmTasks ('grunt-contrib-uglify');.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ;

(3) Buat tugas untuk meminimalkan skrip

Seperti yang kita diskusikan, ini harus dilakukan di dalam initConfig () fungsi. Halaman Github untuk plugin (dan sebagian besar plugin lainnya) memberi Anda banyak informasi dan contoh. Inilah yang saya gunakan dalam proyek pengujian saya.

 uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js'

Ini cukup mudah, saya tentukan scripts.js file di direktori js proyek saya dan tujuan untuk file yang diperkecil. Ada banyak cara untuk menentukan file sumber, kita akan melihatnya nanti.

Untuk sekarang, mari kita lihat Gruntfile yang lengkap setelah ini ditambahkan, untuk memastikan Anda tahu bagaimana semuanya cocok.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('default', []); ;

(4) Tambahkan konfigurasi ini ke grup tugas

Saat ini Anda bisa pergi ke terminal dan mengetik mendengus uglify tetapi kita akan memerlukan grup tugas untuk menjalankan banyak tugas nanti. Kami memiliki tugas default yang kosong, hanya menunggu sesuatu untuk ditambahkan, jadi mari kita ubah ke yang berikut:

 grunt.registerTask ('default', ['uglify']);

Pada tahap ini Anda harus bisa pergi ke terminal, ketik mendengus dan melihat minifikasi berlangsung. Jangan lupa untuk membuat scripts.js file tentu saja!

Tidak butuh banyak waktu untuk mengaturnya, kan? Bahkan jika Anda baru mengenal semua ini dan butuh beberapa waktu untuk mengerjakan langkah-langkahnya, waktu yang dihematnya akan melampaui waktu yang dihabiskan untuknya dalam beberapa penggunaan..

File Penggabungan

Mari kita lihat file gabungan dan pelajari cara menentukan beberapa file sebagai target sepanjang jalan.

Concatenation adalah proses menggabungkan isi beberapa file menjadi satu file. Kita membutuhkan plugin grunt-contrib-concat. Mari kita bekerja melalui langkah-langkah ini:

Untuk menginstal penggunaan plugin npm instal grunt-contrib-concat --save-dev di terminal. Setelah selesai, pastikan untuk menambahkannya ke Gruntfile Anda seperti sebelum menggunakannya grunt.loadNpmTasks ('grunt-contrib-concat');.

Selanjutnya adalah konfigurasi. Mari kita gabungkan tiga file spesifik, sintaks akan menjadi akrab.

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js', ,,

Kode di atas mengambil tiga file yang diberikan sebagai sumber dan menggabungkannya ke dalam file yang diberikan sebagai tujuan.

Ini sudah cukup kuat tetapi bagaimana jika file baru ditambahkan? Apakah kita perlu kembali ke sini sepanjang waktu? Tentu saja tidak, kami dapat menentukan seluruh folder file untuk digabungkan.

 concat: dist: src: 'dev / js / *. js "], dest:' js / scripts.js ',,,

Sekarang, file javascript di folder dev / js akan digabung menjadi satu file besar: js / scripts.js, jauh lebih baik!

Sekarang saatnya membuat tugas sehingga kita dapat menggabungkan beberapa file.

 grunt.registerTask ('mergejs', ['concat']);

Ini bukan tugas default lagi jadi kita harus mengetikkan namanya di terminal ketika kita menerbitkan mendengus perintah.

 gerutuan kasar

Mengotomasi Otomasi Kami

Kami telah membuat banyak kemajuan tetapi masih ada lagi! Untuk saat ini, ketika Anda ingin menggabungkan atau meminimalkan Anda harus pergi ke terminal dan ketik perintah yang sesuai. Sudah saatnya kita melihat menonton perintah yang akan melakukan ini untuk kita. Kami juga akan belajar cara menjalankan tugas mulitple sekaligus, di sepanjang jalan.

Untuk bisa maju, kita harus mengambil arloji-contrib-watch. Saya yakin Anda dapat menginstalnya dan menambahkannya ke Gruntfile pada Anda sendiri sekarang, jadi saya akan mulai dengan menunjukkan kepada Anda apa yang saya gunakan dalam proyek pengujian saya.

 tonton: script: file: ['dev / js / *. js'], tugas: ['concat', 'uglify'],,

Saya menamai satu set file untuk ditonton “skrip”, supaya aku tahu apa fungsinya. Di dalam objek ini saya telah menentukan file untuk ditonton dan tugas yang harus dijalankan. Dalam contoh gabungan sebelumnya, kami mengumpulkan semua file di direktori dev / js.

Dalam contoh minifikasi, kami memperkecil file ini. Masuk akal untuk menonton folder dev / js untuk perubahan dan menjalankan tugas-tugas ini setiap kali ada.

Seperti yang Anda lihat, banyak tugas dapat dipanggil dengan mudah dengan memisahkannya dengan koma. Mereka akan dilakukan secara berurutan, pertama penggabungan, kemudian minifikasi dalam kasus ini. Ini juga dapat dilakukan dengan kelompok tugas, yang merupakan alasan mengapa mereka ada.

Kami sekarang dapat mengubah tugas default kami:

 grunt.registerTask ('default', ['concat', 'uglify']);

Sekarang kita punya dua pilihan. Setiap kali Anda ingin menggabungkan dan memperkecil skrip Anda, Anda dapat beralih ke terminal dan mengetik mendengus. Anda juga dapat menggunakan perintah arloji untuk memulai menonton file Anda: menonton kasar.

Itu akan duduk di sana, menunggu Anda untuk memodifikasi file-file ini. Setelah Anda melakukannya, itu akan melakukan semua tugas yang diberikan padanya, silakan, coba.

Itu jauh lebih baik, tidak ada input yang diperlukan dari kami. Anda sekarang dapat bekerja dengan file Anda dan semuanya akan dilakukan dengan baik untuk Anda.

Ikhtisar

Dengan pengetahuan yang belum sempurna tentang bagaimana plugin dapat diinstal dan digunakan dan bagaimana perintah arloji bekerja, Anda siap untuk menjadi pecandu otomatisasi sendiri. Ada lebih banyak hal untuk Grunt daripada yang kita diskusikan tetapi tidak ada yang tidak bisa Anda tangani sendiri.

Menggunakan perintah untuk mengkompilasi SASS, mengoptimalkan gambar, memperbaiki kembali secara otomatis, dan banyak lagi hanya masalah mengikuti langkah-langkah yang kita bahas dan membaca sintaks yang dibutuhkan plugin.

Jika Anda mengetahui beberapa kegunaan luar biasa untuk Grunt, silakan beri tahu kami di komentar, kami selalu tertarik untuk mendengar bagaimana Anda menggunakan alat seperti Grunt.!