Bagaimana Menggunakan Genggaman Untuk Mengganti Aliran Kerja Anda [Tutorial]

Saya seorang pembela otomatik yang besar kerana ia menjadikan kehidupan yang lebih mudah. Kenapa menghabiskan masa pada tugas-tugas menaikkan tugas yang membosankan yang menghisap gaya hidup anda apabila anda mempunyai komputer untuk melakukan sesuatu untuk anda? Ini amat sesuai untuk pembangunan web.

Banyak tugas pembangunan boleh menjadi tugas. Semasa membangunkan, anda mungkin ingin menyusun kod, apabila memajukan versi pembangunan, anda mungkin menggabungkan dan meminimumkan fail, mengeluarkan sumber pembangunan sahaja, dan sebagainya. Malah yang agak tidak rumit seperti memotong banyak fail, atau menamakan semula folder boleh mengambil sebahagian besar masa kita.

Dalam artikel ini saya akan menunjukkan kepada anda bagaimana anda boleh menjadikan kehidupan anda lebih mudah dengan memanfaatkan fungsi yang sangat baik yang ditawarkan oleh Grunt, pelari tugas Javascript. Saya akan memandu anda melalui keseluruhan proses jadi jangan risau walaupun anda bukan ahli sihir Javascript!

Lebih lanjut mengenai Hongkiat.com:

CSSMatic menjadikan CSS mudah untuk Pereka Web
Mengotomkan Tugas di Mac dengan Tindakan Folder
Automasi fail Dropbox anda Dengan Tindakan
10 apl untuk membantu mengautomasikan Tugas pada peranti Android anda
Cara (secara automatik) membuat sandaran laman web anda ke dalam Dropbox

Memasang Grunt

Memasang Grunt sangat mudah kerana ia menggunakan pengurus pakej nod. Ini bermakna anda mungkin perlu memasang Node itu sendiri. Buka terminal atau command prompt (saya akan panggil terminal ini dari sekarang) dan masukkan nmp -v.

Jika anda melihat nombor versi yang anda ada npm dipasang, jika anda melihat ralat "perintah tidak dijumpai", anda perlu memasangnya dengan pergi ke halaman unduhan node dan memilih versi yang anda perlukan.

Sebaik sahaja Node dipasang, mendapat Grunt adalah satu arahan yang dikeluarkan dalam terminal:

npm memasang -g grunt-cli

Penggunaan Asas

Anda akan menggunakan Grunt berdasarkan projek ke projek kerana setiap projek akan mempunyai keperluan yang berbeza. Mari memulakan projek sekarang dengan membuat folder dan menavigasi ke terminal itu juga.

Dua fail membentuk hati Grunt: package.json dan Gruntfile.js. Fail pakej mentakrifkan semua kebergantungan pihak ketiga yang digunakan oleh automasi anda, Gruntfile membolehkan anda mengawal bagaimana betul-betul ini digunakan. Mari buat fail pakej kosong-sekarang dengan kandungan berikut:

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

Nama dan versi terpulang kepada anda, dependensi mesti mengandungi semua pakej yang anda gunakan. Kami tidak melakukan apa-apa pada masa ini jadi kami hanya akan memastikan Grunt itu sendiri ditambah sebagai pergantungan.

Anda mungkin bertanya pada diri sendiri apa yang dimaksudkan dengan jejak (~) yang disebut tilde yang sedang dilakukan di sana.

Versi boleh dikehendaki menggunakan peraturan dari versi semantik untuk npm. Secara ringkas:

Anda menentukan versi yang tepat seperti 4.5.2
Anda boleh menggunakan lebih daripada / kurang daripada untuk menunjukkan versi minimum atau maksimum seperti > 4.0.3
Menggunakan tilde menentukan blok versi. Menggunakan ~ 1.2 dianggap sebagai 1.2.x, sebarang versi di atas 1.2.0 tetapi di bawah 1.3

Lebih banyak cara untuk menentukan versi tersedia tetapi ini cukup untuk kebanyakan keperluan. Langkah seterusnya ialah membuat Gruntfile yang akan melaksanakan automasi kami.

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

Ini pada asasnya rangka untuk Gruntfile; terdapat dua tempat yang menarik. Satu lokasi berada di dalam initConfig () fungsi. Di sinilah semua konfigurasi projek anda berjalan. Ini akan merangkumi perkara-perkara seperti mengendalikan penyusun LESS / SASS, skrip pengecam dan sebagainya.

Lokasi kedua adalah di bawah fungsi yang anda tentukan tugas. Anda boleh melihat satu tugas yang dinyatakan dinamakan “lalai”. Ia kosong pada masa ini sehingga tidak ada apa-apa, tetapi kami akan berkembang pada masa itu. Tugas secara asasnya mengetuk bit dan potongan dari konfigurasi projek kami dan melaksanakannya.

Sebagai contoh, satu tugas yang dinamakan “skrip” boleh menggabungkan semua skrip kami, kemudian meminimumkan fail yang dihasilkan dan kemudian pindahkan ke lokasi terakhirnya. Tiga tindakan ini semuanya ditakrifkan dalam konfigurasi projek tetapi adalah “ditarik bersama” oleh tugas itu. Sekiranya ini tidak jelas, jangan risau, saya akan menunjukkan kepada anda bagaimana perkara ini dilakukan.

Tugas Pertama Kita

Mari buat tugas yang meminimumkan fail javascript tunggal untuk kami.

Terdapat empat perkara yang perlu kita buat bila-bila masa kita mahu menambah tugas baru:

Pasang plugin jika perlu
Memerlukannya dalam Gruntfile
Tulis tugas
Tambahnya ke kumpulan tugas jika perlu

(1) Cari dan Pasang Plugin

Cara paling mudah untuk mencari plugin yang anda perlukan ialah mengetik sesuatu seperti ini ke Google: “tolak javascript grunt plugin”. Hasil pertama akan membawa anda kepada plug-grunt-contrib-uglify plugin yang hanya apa yang kita perlukan.

Halaman Github memberitahu anda semua yang anda perlu ketahui. Pemasangan adalah satu baris dalam terminal, inilah yang perlu anda gunakan:

 npm memasang grunt-contrib-uglify - save-dev

Anda mungkin perlu menjalankan ini dengan privasi admin. Jika anda mendapat sesuatu seperti itu npm ERR! Sila cuba menjalankan arahan ini lagi sebagai root / Administrator. di sepanjang jalan hanya taip sudo sebelum perintah dan masukkan kata laluan anda apabila diminta:

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

Perintah ini sebenarnya mem-parsing anda package.json fail dan menambahnya sebagai kekurangan di sana, anda tidak perlu melakukannya secara manual.

(2) Memerlukan Dalam Gruntfile

Langkah seterusnya adalah untuk menambah Gruntfile anda sebagai keperluan. Saya suka menambah plugin di bahagian atas fail, di sini Gruntfile lengkap saya selepas menambah 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 meminimumkan skrip

Seperti yang telah dibincangkan, ini perlu dilakukan di dalam initConfig () fungsi. Halaman Github untuk plugin (dan kebanyakan plugin lain) memberi anda banyak maklumat dan contoh. Inilah yang saya gunakan dalam projek ujian saya.

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

Ini agak mudah, saya menyatakan yang scripts.js fail dalam direktori js projek saya dan destinasi untuk fail yang diminimumkan. Terdapat banyak cara untuk menentukan fail sumber, kami akan melihatnya kemudian.

Buat masa ini, mari kita lihat Gruntfile lengkap selepas ini telah ditambahkan, untuk memastikan anda tahu bagaimana perkara-perkara yang sesuai bersama.

 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 kumpulan tugas

Sekarang anda boleh pergi ke terminal dan jenis anda tolify uglify tetapi kami memerlukan kumpulan tugas untuk menjalankan pelbagai tugas di kemudian hari. Kami mempunyai tugas lalai kosong, hanya menunggu sesuatu yang perlu ditambah jadi mari kita ubah suai ke yang berikut:

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

Pada tahap ini, anda sepatutnya dapat pergi ke terminal, jenis mengerang dan lihat pengurangan berlaku. Jangan lupa buat sesuatu scripts.js fail kursus!

Itu tidak mengambil banyak masa untuk membuatnya? Sekalipun anda baru kepada semua ini dan mengambil sedikit masa untuk bekerja melalui langkah-langkah, masa yang ia dapat menjimatkan akan melebihi masa yang dibelanjakan untuknya dalam beberapa kegunaan.

Berkonsepkan Fail

Mari kita lihat menggabungkan fail dan belajar cara menentukan beberapa fail sebagai sasaran sepanjang jalan.

Concatenation adalah proses menggabungkan kandungan beberapa fail ke dalam satu fail. Kami akan memerlukan plugin grunt-contrib-concat. Mari kerja melalui langkah-langkah:

Untuk memasang penggunaan plugin npm memasang grunt-contrib-concat - save-dev di terminal. Setelah selesai, pastikan untuk menambahnya pada Gruntfile anda seperti sebelum menggunakan grunt.loadNpmTasks ('grunt-contrib-concat');.

Seterusnya ialah konfigurasi. Mari gabungkan tiga fail tertentu, sintaks akan biasa.

 'dev / js / header.js', 'dev / ,,

Kod di atas mengambil tiga fail yang diberikan sebagai sumber dan menggabungkannya ke dalam fail yang diberikan sebagai destinasi.

Ini sudah cukup kuat tetapi bagaimana jika fail baru ditambah? Adakah kita perlu kembali ke sini sepanjang masa? Sudah tentu tidak, kita boleh menentukan keseluruhan folder fail untuk concatenate.

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

Kini, sebarang fail javascript dalam folder dev / js akan digabungkan menjadi satu fail besar: js / scripts.js, lebih baik!

Kini tiba masanya untuk mencipta tugas supaya kita dapat menggabungkan beberapa fail.

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

Ini bukan tugas lalai lagi jadi kami perlu menaip namanya di terminal ketika kami mengeluarkannya mengerang perintah.

 merajuk mergejs

Automasi Automasi kami

Kami sudah membuat banyak kemajuan tetapi ada lagi! Buat masa sekarang, apabila anda mahu menggabungkan atau meminimumkan anda perlu pergi ke terminal dan taip arahan yang sesuai. Sudah tiba masanya untuk kita melihat menonton perintah yang akan melakukan ini untuk kita. Kami juga akan belajar bagaimana untuk melaksanakan tugas mulitple sekaligus, di sepanjang jalan.

Untuk meneruskan, kita perlu meraih tontonan-tontonan. Saya yakin bahawa anda boleh memasangnya dan menambahnya kepada Gruntfile pada halaman sendiri sekarang, jadi saya akan mulakan dengan menunjukkan kepada anda apa yang saya gunakan dalam projek ujian saya.

 tonton: skrip: fail: ['dev / js / * js'], tugas: ['concat', 'uglify'],,

Saya menamakan satu set fail untuk ditonton “skrip”, jadi saya tahu apa yang berlaku. Dalam objek ini saya telah menetapkan fail untuk menonton dan tugas dijalankan. Dalam contoh penyambungan sebelumnya kami menarik bersama-sama semua fail dalam direktori dev / js.

Dalam contoh minification kami meminimumkan fail ini. Ia masuk akal untuk melihat folder dev / js untuk perubahan dan menjalankan tugas-tugas ini apabila terdapat apa-apa.

Seperti yang anda dapat lihat, pelbagai tugas boleh dipanggil dengan mudah dengan memisahkannya dengan koma. Mereka akan dilakukan secara berturutan, terlebih dahulu penggabungan, maka pengurangan dalam hal ini. Ini juga boleh dilakukan dengan kumpulan tugas, yang jenisnya mengapa ia wujud.

Kita kini boleh mengubah suai tugas lalai kita:

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

Sekarang kita mempunyai dua pilihan. Setiap kali anda ingin menggabungkan dan meminimumkan skrip anda, anda boleh beralih ke terminal dan taip mengerang. Anda juga boleh menggunakan arahan menonton untuk memulakan pemerhatian fail anda: menonton gerombolan.

Ia akan duduk di sana, menunggu anda mengubah suai fail ini. Sebaik sahaja anda melakukannya, ia akan melaksanakan semua tugas yang diberikan kepadanya, teruskan, mencubanya.

Itu jauh lebih baik, tiada input diperlukan dari kami. Anda kini boleh bekerja dengan fail anda dan semuanya akan dilakukan dengan baik untuk anda.

Gambaran keseluruhan

Dengan pengetahuan asas tentang bagaimana plugin boleh dipasang dan digunakan dan bagaimana arahan menonton berfungsi, anda semua bersedia menjadi penagih automasi sendiri. Terdapat banyak lagi untuk Grunt daripada apa yang kita bincangkan tetapi tiada apa yang anda tidak dapat mengendalikan sendiri.

Menggunakan arahan untuk menyusun SASS, mengoptimumkan imej, autoprefixing, dan banyak lagi adalah hanya perkara yang mengikuti langkah-langkah yang kami membincangkan dan membaca sintaks yang memerlukan plugin.

Sekiranya anda mengetahui beberapa kegunaan hebat untuk Grunt sila beritahu kami di dalam komen, kami sentiasa berminat untuk mendengar bagaimana anda menggunakan alat seperti Grunt!