Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Development
Code

Membangun Generator Yeoman anda sendiri

by
Difficulty:IntermediateLength:LongLanguages:

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

Yeoman's Generator adalah apa yang memberi fleksibilitas platform, memungkinkan Anda untuk menggunakan kembali tool yang sama untuk setiap jenis proyek Anda mungkin bekerja, JavaScript atau lainnya, dan itu sebelum saya menyebutkan perpustakaan besar lebih dari 400 Komunitas yang berkontribusi ke generator. Kadang-kadang walaupun, Anda mungkin memiliki beberapa pengaturan spesifik yang Anda ingin menggunakan dalam proyek Anda sendiri dan situasi seperti ini, masuk akal untuk abstrak semua boilerplate ke generator Anda sendiri.

Dalam artikel ini, kita akan membangun Yeoman generator yang akan memungkinkan kita untuk membangun sebuah situs satu halaman, satu baris pada satu waktu, ini adalah contoh yang cukup sederhana tetapi akan memungkinkan kami untuk menutupi banyak fitur yang lebih menarik Yeoman sediakan.

Ayo mengatur

Aku akan menganggap Anda memiliki Node.js setup, jika tidak, Anda dapat mengambil instalasi dari sini. Selain itu, kita akan perlu Yeoman terinstall serta generator untuk membuat Generator Yeoman. Anda dapat melakukannya melalui perintah berikut untuk npm:

Akhirnya, kita perlu membuat proyek yang sebenarnya, jadi menavigasi ke folder yang Anda pilih dan jalankan:

Ini akan mulai generator dan menanyakan beberapa pertanyaan seperti nama proyek dan akun GitHub, untuk artikel ini, saya akan nama saya generator one page.

Struktur File

Jangan khawatir oleh sejumlah besar file yang dihasilkan oleh perintah, semua akan masuk akal sebentar lagi.

File Tree for Yeoman Generator

Pertama beberapa file dotfiles untuk berbagai hal seperti Git dan Travis CI, kita memiliki sebuah file package.json untuk generator itu sendiri, readme file dan folder untuk tes. Selain itu, setiap perintah dalam generator kami mendapat folder dengan index.js file dan folder untuk template.

Index.js file membutuhkan untuk mengekspor objek sebenarnya generator yang akan mendapatkan dijalankan oleh Yeoman. Aku akan menghapus segala sesuatu di dalam generator sebenarnya sehingga kita bisa mulai dari awal, di sini adalah apa file akan terlihat seperti setelah itu:

Yeoman Generator dapat memperpanjang dari dua berbeda pre-built pilihan: generator Base, yang dapat Anda lihat ini mewarisi dari, atau generator NamedBase, yang benar-benar hal yang sama kecuali ia menambahkan parameter tunggal yang pengguna dapat mengatur ketika mereka menghubungi Generator anda. Tidak peduli terlalu banyak mana yang Anda pilih, Anda dapat selalu menambahkan parameter secara manual jika Anda membutuhkan lebih banyak.

Semua yang kode ini melakukan menciptakan objek generator ini dan mengekspor keluar, Yeoman benar-benar akan mengambil objek yang diekspor dan menjalankannya. Cara menjalankannya, adalah dengan pertama memangil metode konstruktor untuk mengatur objek dan kemudian ia akan pergi melalui semua metode yang Anda buat pada objek ini (dalam urutan yang Anda buat mereka) dan menjalankan mereka satu per satu waktu. Ini berarti benar-benar tidak peduli apa yang Anda sebut fungsi dan memberikan Anda fleksibilitas untuk nama mereka hal-hal yang masuk akal bagi Anda.

Sekarang, hal lainnya yang perlu Anda ketahui adalah bahwa Yeoman memiliki fungsi tersendiri untuk berurusan dengan sistem file yang benar-benar membantu Anda dengan path. Semua fungsi yang Anda biasanya akan digunakan seperti mkdir, read, write, copy, dsb, telah diberikan, tetapi Yeoman akan menggunakan direktori template dalam folder perintah ini sebagai path untuk membaca data dan folder pengguna menjalankan generator Anda sebagai path root untuk menampilkan file. Ini berarti Anda bahkan tidak perlu untuk berpikir tentang full path ketika Anda bekerja dengan file, Anda hanya dapat menjalankan salinan dan yeoman akan menangani dua lokasi yang berbeda untuk Anda.

Mendapatkan Input

Yeoman memungkinkan Anda untuk menambahkan pertanyaan generator Anda sehingga Anda dapat menerima masukan dari pengguna dan menyesuaikan perilaku yang tepat. Kita akan memiliki dua pertanyaan dalam generator kami. Pertama adalah nama proyek dan kedua menjadi apakah atau tidak untuk menyertakan bagian dummy sebagai contoh.

Untuk mencapai hal ini, kita akan menambahkan fungsi yang akan meminta pengguna untuk dua potong Info dan kemudian menyimpan hasil pada objek itu sendiri:

Baris pertama dalam fungsi menetapkan variabel done dari objek async metode. Yeoman mencoba untuk menjalankan metode Anda dalam urutan bahwa mereka didefinisikan, tetapi jika Anda menjalankan kode async apapun, fungsi akan keluar sebelum pekerjaan yang sebenarnya akan selesai dan Yeoman akan mulai fungsi awal berikutnya. Untuk menyiasati hal ini, Anda dapat memanggil metode async, yang akan mengembalikan callback dan kemudian Yeoman akan menunggu untuk pergi ke fungsi berikutnya hingga panggilan balik dijalankan, yang dapat Anda lihat itu pada akhir, setelah mendorong pengguna.

Berikutnya baris mana kita hanya log yeoman, Yeoman logo yang Anda lihat ketika kami menjalankan Yeoman generator sebelumnya. Selanjutnya, kita mendefinisikan daftar prompt, prompt masing-masing memiliki tipe, nama, dan pesan. Jika jenis tidak ditentukan, itu akan secara default 'input' yang untuk entri teks standar. Ada banyak jenis masukan yang keren seperti daftar, kotak centang dan password, Anda dapat melihat daftar lengkapnya disini. Dalam aplikasi kita, kita menggunakan masukan teks satu dan satu 'confirmation' (yes/no) jenis masukan.

Dengan array pertanyaan siap, kita dapat memasukannya ke prompt metode bersama dengan fungsi callback. Parameter pertama fungsi callback adalah list jawaban-jawaban yang diterima dari pengguna. Kami kemudian melampirkan properti-properti ke objek utama dan memanggil metode done untuk pergi ke fungsi berikutnya.

Perancah aplikasi kami

Aplikasi kami memiliki kerangka luar, yang akan memasukan menu, header, footer, dan beberapa CSS, dan kemudian kita memiliki konten dalam yang akan masuk ke direktori sendiri bersama dengan file CSS kustom per bagian. Ini akan memungkinkan Anda untuk mengatur properti global di file utama dan menyesuaikan setiap baris dengan sendirinya.

Mari kita mulai dengan header file, membuat file baru di direktori template yang disebut _header.html dengan berikut:

File nama tidak perlu untuk memulai dengan undrscore, tetapi dan penerapan terbaik untuk membedakan nama dari nama Keluaran terakhir sehingga Anda dapat memberitahu yang mana yang Anda hadapi. Juga, Anda dapat melihat bahwa selain untuk memasukan file CSS utama kami, saya juga nenasukan perpustakaan UI semantik sebagai grid untuk baris dan menu (untuk tidak menyebutkan styling keren).

Hal lain yang Anda mungkin telah menyadari, adalah dulu EJS-style placeholder untuk judul dan itu akan mendapatkan diisi pada saat runtime. Yeoman menggunakan Underscore template (baik lO dash) dan dengan demikian Anda dapat membuat file Anda seperti ini dan data akan dihasilkan pada saat runtime.

Selanjutnya, mari kita membuat footer (menempatkan ini dalam sebuah file bernama _footer.html dalam folder templates):

Itu hanya menutup dokumen HTML bagi kita, karena kita tidak akan memiliki setiap JavaScript di aplikasi kita. File HTML yang terakhir diperlukan untuk luar perancah menu, kita akan menghasilkan link sebenarnya pada saat runtime, tetapi kita dapat menulis wadah luar dalam file template bernama _menu.html:

Ini adalah div polos dengan beberapa class yang disediakan oleh UI semantik. Kami akan mendapatkan di link sebenarnya berdasarkan bagian yang dihasilkan kemudian. Selanjutnya, mari kita membuat _main.css file:

Hanya beberapa kode untuk membantu dengan posisi menu dan mengubah font, tapi ini adalah mana Anda dapat menempatkan default setiap style yang Anda inginkan di seluruh dokumen. Sekarang kita harus membuat template untuk masing-masing bagian dan file CSS yang menyertai mereka, ini adalah file cukup mendasar seperti yang kita akan meninggalkan mereka cukup kosong bagi pengguna untuk menyesuaikan, jadi dalam _section.html menambahkan berikut:

Div luar dengan id unik yang kita akan generate berdasarkan nama bagian dan class untuk sistem grid semantik. Kemudian, aku hanya menambahkan tag H1 yang sekali lagi akan hanya berisi nama bagian. Selanjutnya, mari kita membuat CSS file, sehingga membuat sebuah file bernama section.css dengan berikut:

Hal ini lebih placeholder dengan ID yang sama seperti wadah luar, tapi itu umum untuk mengubah latar belakang setiap baris untuk memisahkan konten, jadi saya menambahkan properti di untuk kenyamanan. Sekarang, hanya untuk penyelesaian, mari kita membuat sebuah file bernama _gruntfile.js, tapi kami akan mengisi itu kemudian dan mari kita mengisi file _package.json yang disediakan:

Itu adalah sedikit spoiler untuk apa yang akan kita lakukan kemudian, tapi itu dependensi kita akan membutuhkan untuk tugas-tugas Grunt kami.

Dengan semua file ini siap, mari kita pergi menambahkan metode untuk perancah proyek baru. Jadi kembali dalam file index.js kami, tepat setelah promptUser metode, mari kita tambahkan fungsi untuk menciptakan semua folder yang kita akan butuhkan:

Saya menambahkan app folder dan didalam, dua direktori lain: css dan sections, ini adalah dimana pengguna akhir akan membangun aplikasi yang ada. Saya juga membuat folder build yang mana bagian yang berbeda dan file CSS akan mendapatkan disusun bersama dan dibangun ke satu file.

Selanjutnya, mari kita menambahkan metode lain untuk menyalin lebih dari beberapa template kami:

Di sini kita menggunakan dua metode baru, copy dan template, yang cukup mirip dalam fungsi. copy akan mengambil file dari direktori template dan memindahkannya ke folder output, menggunakan path yang disediakan. template melakukan hal yang sama, kecuali sebelum menulis ke folder output itu akan dijalankan melalui fungsi template Underscore's bersama dengan konteks untuk mengisi placeholder.

Saya tidak menyalin menu karena untuk itu, kita perlu untuk generate link, tapi kita tidak bisa benar-benar menghasilkan link sampai kami menambahkan bagian demo. Jadi metode berikutnya kita membuat, akan menambahkan bagian demo:

Fungsi lain yang Anda mungkin tidak akrab dengan adalah fungsi classify, yang disediakan kepada Anda oleh Underscore string. Apa yang dilakukannya adalah dibutuhkan string dan menciptakan versi "class", itu akan menghapus hal-hal seperti ruang dan membuat versi camelcase, cocok untuk hal-hal seperti HTML class dan id; undrscored melakukan hal yang sama kecuali bukan camel-casing snake-case mereka. Selain itu, Semua hal yang telah kita lakukan di fungsi sebelumnya, satu-satunya hal layak disebut adalah bahwa kita menunda dalam time-stamp, baik untuk menjaga file unik tetapi juga untuk penjgurutan. Ketika kita memuat file dalam, mereka adalah menurut abjad sehingga memiliki waktu sebagai awalan akan menjaga mereka dalam urutan.

File yang terakhir yang perlu dapat disalin di atas adalah menu.html file tetapi untuk melakukan itu, kita perlu untuk menghasilkan link. Masalahnya adalah kita tidak benar-benar tahu pada tahap ini yang file yang dihasilkan sebelum atau jika pengguna menambahkan bagian secara manual. Jadi untuk membangun menu, kita perlu membaca dari path output dan setelah membaca bagian-bagian yang ada di sana, kita perlu membangun link menu. Ada beberapa fungsi baru yang kita belum digunakan lagi, jadi kita akan pergi melalui itu baris demi baris:

Baris pertama membaca di menu's luar HTML dan kemudian saya menciptakan serangkaian template yang bisa kita gunakan untuk setiap link. Setelah itu, saya menggunakan expand fungsi, yang menerima path resource, relatif terhadap folder generator yang dipanggil (path output) dan mengembalikan sebuah array dari semua file yang cocok dengan pola yang disediakan, dalam kasus kami ini akan mengembalikan semua bagian file HTML.

Kemudian kami siklus meskipun daftar file dan untuk masing-masing, kami menggunakan Underscore string untuk menghapus ekstensi timestamp dan file sehingga kita tinggalkan dengan hanya nama file. Metode humanize yang akan membawa hal-hal yang camel-cased atau karakter seperti garis bawah dan dash dan mengkonversikannya ke spasi, sehingga Anda mendapatkan string dapat dibaca manusia. Itu juga akan memanfaatkan huruf pertama dari string yang akan bekerja keluar besar untuk menu kami. Dengan nama yang terpisah, kami membuat konteks objek dengan ID kami digunakan sebelumnya, sehingga link akan benar-benar membawa kami ke bagian yang benar.

Sekarang kita memiliki dua baru fungsi yang belum kita lihat sebelumnya, engine dan append. engine mengambil serangkaian template sebagai parameter dan konteks objek sebagai kedua dan akan berjalan melalui template engine dan mengembalikan hasil. append menerima string HTML sebagai parameter pertama, sebuah selector sebagai kedua, dan sesuatu untuk memasukkan sebagai parameter ketiga. Apa yang akan dilakukan adalah memasukkan konten yang disediakan pada akhir semua elemen yang cocok dengan selector. Di sini kita menambahkan link ke akhir menu div.

Terakhir, tetapi tidak sedikit, kami memiliki metode write yang akan mengambil HTML yang dihitung dan menulis itu ke file. Sekarang, hanya untuk menyelesaikan sini, mari kita tambahkan sebuah metode untuk menjalankan npm:

Parameter pertama untuk npmInstall adalah path, tapi Anda hanya dapat membiarkannya kosong, selain bahwa aku hanya mencetak pesan pada akhir, memberitahu pengguna app sudah siap.

Jadi sebagai rekap cepat, ketika menjalankan generator kami, akan meminta pengguna untuk nama proyek dan apakah atau tidak untuk menyertakan bagian demo. Setelah itu, ia akan pergi untuk membuat struktur folder dan menyalin semua file yang diperlukan untuk proyek kami. Setelah selesai, itu akan menjalankan npm untuk menginstal dependensi kita didefinisikan dan itu akan menampilkan pesan kami yang ditempatkan.

Ini cukup banyak semua generator utama harus dilakukan, tetapi tidak yang berguna tanpa Grunt task. Saat ini, hanya sekelompok file terpisah tetapi untuk benar mengembangkan bagian, kita membutuhkan suatu cara untuk melihat mereka sebagai satu file dan kita juga perlu kemampuan untuk membangun hasil. Jadi buka _gruntfile.js dari direktori template dan mari kita mulai:

Sejauh ini, ini adalah hanya boilerplate standar, kita perlu untuk ekspor fungsi dan di dalam kami mencakup tiga dependensi kita ditambahkan ke package.json file, dan kemudian kita mendaftar task. Kita akan memiliki task serve yang akan bertindak seperti server dan marilah kita lihat file terpisah bersama-sama sementara kita mengembangkan situs kami dan kemudian kami punya build perintah yang akan menggabungkan semua HTML dan CSS dalam aplikasi kami bersama-sama untuk deployment. Saya juga menambahkan garis akhir, jadi jika Anda hanya menjalankan grunt dengan sendirinya, itu akan berasumsi Anda ingin membangun.

Sekarang, mari kita mulai dengan konfigurasi untuk build perintah seperti jauh lebih pendek:

Untuk HTML, kita hanya akan untuk menggabungkan semua file HTML yang bersama-sama dalam urutan yang ditetapkan ke folder build di bawah nama index.html. Dengan CSS, kami juga ingin mengecilkan, jadi kami menggunakan cssmin plugin dan kami menentukan bahwa kita ingin output file bernama main.css di dalam folder build/css dan kami ingin memasukkan versi minified dari semua CSS file dalam proyek kami.

Menghubungkan ke Server

Selanjutnya, kita perlu untuk menambahkan konfigurasi untuk Connect ke server, menghubungkan menyediakan banyak besar middleware untuk melayani statis file atau direktori, tapi di sini kita perlu untuk menggabungkan semua file pertama, jadi kita akan harus membuat beberapa penangan kustom. Untuk memulai, mari kita menempatkan konfigurasi dasar:

Pilihan penyesuaian keepalive mengatakan Grunt untuk menjaga server tetap berjalan, open pilihan akan memberitahu grunt untuk membuka URL di browser Anda secara otomatis ketika Anda mulai server (itu adalah lebih dari preferensi pribadi meskipun) dan fungsi middleware dimaksudkan untuk mengembalikan array middleware penangan untuk memproses permintaan.

Dalam aplikasi kita, ada pada dasarnya dua resource kita perlu untuk tangani, root resource (kami "index.html") di dalam hal ini kita perlu untuk menggabungkan semua file HTML kita dan mengembalikan mereka dan kemudian resource "main.css", dalam hal kita ingin mengemabalikan semua file CSS digabungkan bersama-sama. Seperti apa pun, kita hanya dapat mengembalikan 404.

Jadi mari kita mulai dengan menciptakan array untuk middleware dan mari kita tambahkan yang pertama (ini terjadi dalam fungsi milik middleware, mana saya meletakkan komentar):

Kami telah agak bergeser dari Yeoman's API ke Grunt, tapi Untungnya nama perintah hampir identik, kita masih menggunakan read untuk membaca file dan expand untuk mendapatkan daftar file. Selain itu, Semua kita lakukan adalah menetapkan konten-jenis dan mengembalikan versi concatenated semua file HTML. Jika Anda tidak terbiasa dengan  middleware berbasis server, pada dasarnya itu akan berjalan melalui stack middleware sampai di suatu tempat di sepanjang garis, fungsi yang dapat menangani permintaan.

Di baris pertama, kami memeriksa jika permintaan tersebut untuk URL root, jika kita menangani permintaan, sebaliknya kita panggil next() yang akan menyampaikan permintaan ke baris ke middleware berikutnya.

Selanjutnya, kita perlu untuk menyerahkan permintaan ke /css/main.css yang, jika Anda ingat, adalah apa yang kami setup di header:

Pada dasarnya, ini adalah fungsi yang sama sebelumnya kecuali untuk file CSS. Terakhir, tetapi tidak sedikit, saya akan menambahkan pesan 404 dan mengembalikan middleware stack:

Ini berarti jika permintaan tidak dapat ditangani oleh dua fungsi sebelumnya, maka kami akan mengirimkan pesan ini 404. Dan itu semua ada untuk itu, kami memiliki generator yang akan menciptakan proyek dan tugas Grunt yang akan memungkinkan kita untuk melihat pratinjau dan membangun aplikasi kami. Topik terakhir yang saya ingin menutupi sebentar, adalah sub generator.

Sub Generator

Kami telah membuat generator utama yang membangun aplikasi kita Yeoman memungkinkan Anda untuk membuat banyak sub generator yang Anda inginkan untuk digunakan setelah perancah awal. Dalam aplikasi kita, kita membutuhkan satu untuk menghasilkan bagian baru. Untuk memulai, kita benar-benar dapat menggunakan generator sub dari generator: generator untuk perancah file, untuk melakukan ini, jalankan perintah berikut dari di dalam folder onepage kami:

Ini akan membuat folder baru bernama section dengan index.js file dan folder templates seperti generator utama (app) kami. Mari kita kosongkan generator seperti kami lakukan terakhir kali dan Anda harus pergi dengan berikut:

Anda juga mungkin memperhatikan kita memperluas dari NamedBase bukan dari Base, yang berarti Anda harus menyediakan parameter nama ketika Anda memanggil generator dan Anda akan dapat mengakses nama itu menggunakan this.name. Sekarang kode ini pada dasarnya dua fungsi yang kita sudah tulis dalam generator sebelumnya: generateDemoSection dan generateMenu, sehingga kita dapat hanya menyalin fungsi dua fungsi di sini. Saya akan mengganti nama yang pertama untuk sesuatu yang lebih tepat:

Satu-satunya perbedaan adalah alih-alih memasukkan nama secara langsung, saya menggunakan properti this.name. Satu-satunya hal yang kita harus memindahkan template file _sections.html, _section.css, dan _menu.html dari app/templates ke sections/templates sebagai itu adalah di mana perintah template/read akan terlihat.

Duplikasi kode

Masalahnya sekarang adalah duplikasi kode. Jadi kembali dalam file app/index.js, daripada memiliki kode yang sama sebagai sub generator, kami hanya dapat memanggil sub generator dan memberikannya nama argumen. Anda dapat menghapus generateMenu dari app/index.js sama sekali dan kami akan mengubah generateDemoSection sebagai berikut:

Jadi jika pengguna ingin membuat bagian demo, kemudian kita invoke generator sub masukan dalam argumen pertama yang merupakan nama. Jika pengguna tidak ingin posting demo, kita masih perlu untuk membuat sesuatu untuk menu karena Grunt tugas akan mencoba dan membacanya, sehingga dalam bagian terakhir, kita hanya menulis string kosong ke menu file.

Generator akhirnya selesai dan kini kita dapat diuji.

Pengujian

Hal pertama yang perlu kita lakukan adalah menginstal generator kami pada sistem Anda. Daripada menginstal gem secara teratur, kita dapat menggunakan perintah link dengan hanya link folder ke gem path, dengan cara itu kita dapat melanjutkan untuk membuat perubahan di sini tanpa perlu menginstalnya kembali setiap waktu. Dari direktori proyek, cukup menjalankan nom link.

Langkah terakhir adalah untuk benar-benar menjalankan generator. Hanya membuat folder baru dan dalam menjalankan yo onepage ini akan menjalankan generator utama kami dan menginstal dependensi melalui npm. Kami kemudian dapat menggunakan Grunt task kami untuk melihat halaman (grunt serve) atau menambahkan beberapa bagian lain dengan generator kami menggunakan sesuatu seperti yo onpage:section "Another section" dan file baru akan ditambahkan.

Kesimpulan

Dalam artikel ini, kita membahas banyak fitur umum tetapi ada masih banyak pilihan yang menarik untuk memeriksa. Seperti yang dapat Anda mungkin tahu, ada sedikit boilerplate diperlukan ketika membangun sebuah generator, tetapi itu adalah semacam titik, Anda mendapatkan semuanya dilakukan sekali dan kemudian Anda dapat menggunakannya sepanjang semua aplikasi Anda.

Saya harap Anda menikmati membaca artikel ini, jika Anda memiliki pertanyaan atau komentar, merasa bebas untuk meninggalkan mereka 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.