Amaran: ini adalah screencast peringkat menengah yang berkelok-kelok di mana kita melihat kod yang memberi kuasa kepada proses membina laman web. Kami tidak menulis sebarang kod.
"Proses membina" adalah semua perkara yang berlaku antara kod yang anda tulis dan kod yang dikeluarkan ke laman web langsung. Kami telah bercakap sebelum ini mengenai penggunaan Grunt untuk ini. Sass diproses, aset digabungkan, pengurangan dan pengoptimuman berlaku, dan lain-lain. Terdapat banyak perkara yang boleh dilakukan oleh proses membina untuk anda.
Saya telah bekerjasama dengan Katie Kovalcin untuk membina laman web peribadi baru untuknya. Ini adalah percubaan untuk kami berdua dalam mempelajari proses baru dan mencuba perkara baru. Dalam kes ini, saya menggunakan Jekyll untuk pertama kalinya, dan saya mengautomatikkan sistem SVG untuk pertama kalinya.
Pada masa screencast, saya betul-betul berada di tengah-tengah semuanya, tetapi sistem binaan saya berfungsi dengan lancar jadi saya fikir ia adalah masa yang tepat untuk membagikannya. Saya selalu berfikir bahawa ini adalah masa yang sesuai untuk dikongsi - tepat pada masa di mana sesuatu mengklik untuk anda.
Perkara yang sedang berlaku:
- Grunt menjalankan semua tugas.
- Laman web ini dibina dengan Jekyll. Bermakna ia memproses susun atur dan kandungan ke laman web penuh. Apabila kandungan atau susun atur berubah, Grunt menjalankan binaan Jekyll.
- Jekyll juga menjalankan pelayan tempatan.
- Sass adalah preprocessor CSS. Apabila fail Sass berubah, Grunt menjalankan komplikasi Sass. Kemudian Grunt menjalankan Autoprefixer pada hasilnya. Kemudian Grunt menjalankan binaan Jekyll sekali lagi untuk memastikan semua barang baru dapat digunakan oleh laman web yang diproses.
- Laman web ini menggunakan sistem SVG. Untuk ikon, tetapi juga logo, dan siapa-tahu-apa-apa-apa lagi pada akhir itu. Fail SVG disimpan semua terpisah dalam folder "svg". Apabila ada yang berubah, Grunt menjalankan tugas svgstore untuk memproses semuanya bersama-sama. Kemudian Grunt menjalankan pembinaan Jekyll sehingga semua SVG terkini tersedia di laman web ini.
- Kerana ini adalah repo di GitHub, dan Halaman GitHub menyokong Jekyll, kami secara automatik dapat memperoleh versi langsung dari laman web yang dihoskan ini. Kami juga dapat menunjukkan domain lain di laman web ini.