Peringatan: ini adalah screencast tingkat menengah yang berkelok-kelok tempat kami melihat kode yang mendukung proses pembuatan situs. Kami tidak menulis kode apa pun.
Sebuah "proses pembangunan" adalah semua hal yang terjadi antara kode yang Anda tulis dan kode yang dikirim ke situs web langsung. Kami telah berbicara sebelumnya tentang menggunakan Grunt untuk ini. Sass diproses, aset digabungkan, minifikasi dan pengoptimalan terjadi, dll. Ada banyak hal tak terbatas yang dapat dilakukan oleh proses build untuk Anda.
Saya telah bekerja dengan Katie Kovalcin dalam membangun situs pribadi baru untuknya. Ini adalah eksperimen bagi kami berdua dalam mempelajari proses baru dan mencoba hal baru. Dalam hal ini, saya menggunakan Jekyll untuk pertama kalinya, dan saya mengotomatiskan sistem SVG untuk pertama kalinya.
Pada saat screencast, saya berada di tengah-tengah semuanya, tetapi saya mendapatkan sistem build yang berfungsi dengan lancar jadi saya pikir ini saat yang tepat untuk membagikannya. Saya selalu berpikir itulah saat yang tepat untuk berbagi - tepat pada saat ada sesuatu yang menarik bagi Anda.
Hal-hal yang terjadi:
- Grunt menjalankan semua tugas.
- Situs ini dibangun dengan Jekyll. Artinya memproses tata letak dan konten menjadi halaman web penuh. Saat konten atau tata letak berubah, Grunt menjalankan build Jekyll.
- Jekyll juga menjalankan server lokal.
- Sass adalah praprosesor CSS. Saat file Sass berubah, Grunt menjalankan komplikasi Sass. Kemudian Grunt menjalankan Autoprefixer pada hasilnya. Kemudian Grunt menjalankan pembuatan Jekyll lagi untuk memastikan semua barang baru dapat digunakan oleh situs yang diproses.
- Situs ini menggunakan sistem SVG. Untuk ikon, tetapi juga logo, dan siapa-tahu-apa-semua pada akhirnya. Semua file SVG disimpan terpisah dalam folder "svg". Ketika salah satu dari mereka berubah, Grunt menjalankan tugas svgstore untuk memproses semuanya bersama-sama. Kemudian Grunt menjalankan build Jekyll sehingga semua SVG saat ini tersedia di situs.
- Karena ini adalah repo di GitHub, dan Halaman GitHub mendukung Jekyll, kami dapat secara otomatis mendapatkan versi live yang dihosting dari situs ini. Kami juga dapat mengarahkan domain lain ke situs ini.