Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Gulp.js
Webdesign

Menggabungkan Lab Pola dengan Gulp untuk Peningkatan Alur Kerja

by
Difficulty:IntermediateLength:LongLanguages:

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

Apakah Anda dan tim Anda bekerja dengan panduan gaya? Apakah Anda memiliki dokumentasi untuk modul Anda? Jika tidak, jangan panik Dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana meningkatkan cara Anda bekerja dengan tim Anda. Kami akan mengeksplorasi konsep yang disarankan oleh Brad Frost dan Dave Olsen, menggunakan Pattern Lab untuk membuat panduan gaya, dengan Gulp untuk menangani aset. Mari kita mulai!

Apa itu Gulp?

Gulp.js adalah sistem membangun streaming dan task runner. Konsep pentingnya adalah Anda memiliki aliran tempat Anda menentukan banyak hal untuk file Anda. Lebih cepat daripada mengelola sesuatu secara manual, menghemat tenaga Anda dan menghemat waktu. Misalnya, dalam tutorial ini kami akan memasukkan semua file Sass kami ke dalam pipe (proses):

  • kompilasi Sass ke CSS,
  • menggabungkan CSS file,
  • memperkecil output,
  • dan memindahkan semuanya ke lokasi lain

Untuk mempelajari lebih lanjut tentang dasar-dasar Gulp, lihat panduan pemula Kezz Bracey The Command Line for Web Design: Automation with Gulp.

Apa yang dimaksud dengan Pattern Lab?

Pattern Lab adalah konsep untuk menciptakan sistem desain atomic; membangun modul bukannya membangun halaman secara langsung. Ini mendefinisikan beberapa komposit bagian:

  • atom
  • molekul
  • organisme
  • template
  • Halaman

Anda mulai dengan elemen terkecil, membangun ke bagian yang lebih besar, sampai Anda memiliki halaman penuh. Pendekatan ini membantu Anda menghemat waktu, berkolaborasi, dan menjamin struktur yang solid.

Atom

Atom tidak dapat dipecah menjadi potongan-potongan kecil.

Ini adalah blok yang paling sederhana, termasuk tag fundamental seperti daftar, warna, font, animasi, dll.

Molekul

Molekul adalah kelompok unsur yang berbeda (atom) yang berfungsi bersama seperti satu unit.

Misalnya, promosi dengan judul, gambar, paragraf, dan tautan seperti "Baca selengkapnya". Masing-masing adalah elemen tunggal, tetapi bersama-sama mereka menjadi sebuah molekul; bagian dari sistem yang lebih besar dan lebih kompleks.

Organisme

Organisme adalah kelompok elemen (atom dan molekul) dan bekerja seperti sebuah bagian di situs web Anda.

Pikirkan, misalnya, dari sebuah header situs web. Ini adalah sistem yang lebih besar, dibangun dari molekul seperti bentuk pencarian dan navigasi, yang keduanya pada gilirannya dibangun dari atom yang lebih kecil.

patternlab header organism
Organisme header Pola Lab, terlihat di layar kecil

Lihat demo UI online dan rasakan seluruh sistem.

Biarkan Sihir Terjadi!

Sekarang saatnya menggabungkan kedua sistem ini dan membuat alur kerja untuk tim Anda. Pola Lab akan memberi kita HTML dan mengantarkan UI sederhana, Gulp akan menangani semua aset yang kita butuhkan.

Fitur utama kita:

  • Sass-kompilasi (Libsass)
  • Server (Browser-Sync)
  • Livereload
  • Mengecilkan (Javascript, CSS, dan gambar)
  • Melepaskan / penyebaran
    • Bump up versi
    • Penandaan
    • Mendorong file dan tag untuk endpoint
    • Dorong file melalui rsync ke server

Pengenalan

Untuk menggunakan Gulp Anda harus terlebih dahulu memiliki node.js di sistem Anda. Jika tidak, lihat Kezz Bracey, The Command Line for Web Design: Mengikat Paket Pihak ke-3 untuk instruksi penyiapan.

Mari kita mulai dengan menginstal Gulp.js secara global. Di terminal, ketik:

Sekarang kita perlu mengkloning repositori Patternlab untuk memberi kita dasar untuk bekerja.

Selanjutnya kita perlu gulp file setup tugas kita. Buat gulpfile.js di root folder proyek Anda. Setelah itu kita memerlukan file konfigurasi, di mana kita mendefinisikan semua jalur, jadi buatlah build.config.json di folder Anda.

File-file berikut diperlukan juga:

  • .bowerrc
  • package.json
  • bower.json

Setelah semua langkah dasar ini, kami memiliki struktur proyek dasar. Sekarang mari kita mulai untuk membangun tugas alur kerja kita.

Mulailah dengan Gulpfile

Di bagian atas file gulpfile.js, kita memerlukan setiap dependensi. Jika Anda menginstal sebuah plugin, Anda harus "membutuhkan" dan memberinya sebuah nama.

Mulailah dengan gulp dan configfile kita untuk semua jalur dan konfigurasi.

Selama proses pengembangan kami, kita tidak perlu mengecilkan kode (itu buang-buang waktu kecuali kita siap untuk menerapkan). Dengan variabel production berikut, kita dapat mengaktifkan dan menonaktifkan beberapa tugas. Anda akan melihat ini dalam tindakan nanti.

Dengan pengaturan hal-hal, kita sekarang dapat mulai menambahkan berbagai tugas untuk membantu kita dalam pengembangan!

Tugas 1: Membersihkan semua aset

Jika Anda menghapus gambar dari folder “sumber /”, Anda akan menemukan ada salinan gambar di “publik /” juga. Karena duplikasi ini, kita akan melakukan langkah sederhana untuk membersihkan folder gambar di "publik /".

Tugas 2: Menangani Skrip

Untuk tujuan penerapan, penting untuk hanya memiliki satu file dengan semua skrip. Untuk mencapai hal ini, kita akan menggunakan plugin tegukan-concat dan menggabungkan semua skrip kami untuk menghasilkan application.js. Jika produksi variabel benar, maka application.js akan menjadi uglified dan mendapatkan nama baru: application.min.js.

Tugas 3: Font

Tugas ini akan mendorong semua font ke folder publik. Tidak ada yang lain.

Tugas 4: Gambar

Untuk langkah ini, kami akan memasang dan memerlukan plugin gulp-imagemin. Setelah selesai, kita dapat menggunakannya untuk memperkecil gambar. Ini akan menghemat memori dan meningkatkan kinerja.

Jika produksi variabel benar, maka semua gambar akan diperkecil. Setelah selesai, kita mendorong mereka ke folder tujuan.

Tugas 5: Menangani Sass 

Mari instal dan minta dependensi gulp-sass dan gulp-cssmin.

Sekarang kita akan mengambil semua file Sass, gunakan plugin Sass untuk mengkompilasinya ke CSS, kemudian jika produksi variabelnya benar, cssmin akan melakukan hal tersebut.

Tugas 6: Server Lab Pola

Lab Pola memiliki server sendiri, yang dapat Anda mulai dengan perintah shell sederhana. Untuk menjalankan perintah ini kita memerlukan plugin gulp-shell.

Pada titik ini, kita akan menyalin folder panduan gaya dari inti ke publik. Pada titik ini, Anda akan dapat melihat front-end yang kuat di browser.

Tugas 7: Mulai Server dan Perhatikan File

Lab Pola memiliki server internal, tetapi Browser-Sync menangani injeksi perubahan CSS tanpa memuat ulang halaman.

Pengamat menangani perubahan dan memicu tugas-tugas tertentu. Setelah itu, browser-sync pembaruan pandangan kami dalam browser.

Kita menentukan file untuk pengamat dan memicu tugas-tugas yang kami butuhkan jika terjadi perubahan.

Tugas 8: Tugas-Default

Menulis gulp di shell memicu tugas default. Tapi sebelum Gulp memulai ini, itu memicu clean:before tugas untuk membersihkan semua file publik.

Tugas 9: Mulai Proses

Mari buat tugas untuk dikembangkan di panduan gaya, tetapi tanpa mengurangi aset. Ini memicu browser-sync, membangun semua aset, dan memulai pengamat.

Tugas 10: Melepaskan dan penandaan

Untuk langkah ini, kita memerlukan beberapa plugin baru.

  • Plugin gulp-bump adalah untuk memperbarui nomor versi.
  • gulp-filter akan memberi kita file spesifik dari aliran.
  • gulp-git memungkinkan kita untuk menggunakan pernyataan git di gulp.
  • Dan versi gulp-tag adalah untuk menghasilkan tag.

Sekarang Anda menentukan release gulp-task, mengatur produksi variabel menjadi true (sekarang kita perlu mengecilkan) dan membuka aliran. Anda harus mengambil semua file dengan nomor versi, gunakan plugin bump dan memungkinkan untuk menentukan jenis (patch, minor atau major) melalui parameter di shell.

Jika Anda menjalankan tugas release tanpa tipe, gulp-bump akan mengambil patch - x.x.1. Setelah ini Anda mendorong file ke root dan melakukan perubahan. Sekarang saatnya membuat tag baru untuk proyek tersebut. File pakage.json diperlukan untuk mendapatkan nomor versi saat ini untuk tag baru.

Akhirnya, kita mendorong semua file dan tag asal dan cabang yang kita inginkan.

Tugas 11: Deployment

Memungkinkan untuk menerapkan semua file ke server melalui rsync; melakukannya sangat cepat dan nyaman. Ketikkan gulp deploy di terminal Anda dan setelah beberapa detik Anda memiliki proyek lokal di server. Anda tidak perlu untuk drag dan drop folder secara manual. Mengotomatisasi semua hal. Anda menentukan host dan jalur folder, yang ingin Anda terapkan di build.config.js.

Akhir Gulpfile

Anda sudah menulis banyak kode, dan ini hasil akhirnya! Anda dapat memilih untuk memiliki file terpisah untuk setiap tugas, dalam hal ini Anda dipersilakan untuk memisahkannya. Dalam hal ini, demi kesederhanaan, kita akan menampilkan semuanya dalam Gulpfile tunggal:

ConfigFile

Sekarang kita memerlukan konfigurasi untuk mengatur berbagai jalur. File ini diperlukan untuk mempertahankan jalur dan konfigurasi proyek:

Kesimpulan

Saya suka bekerja dengan kombinasi Gulp dan Pattern Lab. Saya telah bekerja di tim yang berbeda dan menetapkan dasar ini untuk setiap proyek. Umpan balik oleh setiap anggota tim selalu positif karena prosesnya mudah diikuti. Setiap orang memiliki permukaan yang solid, dapat memilih modul dan menggunakannya dengan mudah. Untuk pertanyaan atau feedback, silakan lihat bagian komentar di bawah ini.

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.