Uyarı: Bu, bir site için derleme sürecini destekleyen koda baktığımız dolambaçlı, orta düzey bir ekran video kaydıdır. Herhangi bir kod yazmıyoruz.
"Oluşturma süreci", yazdığınız kod ile canlı bir web sitesine giden kod arasında gerçekleşen her şeydir. Bunun için Grunt kullanımı hakkında daha önce konuştuk. Sass işlenir, varlıklar birleştirilir, küçültme ve optimizasyon gerçekleşir, vb. Bir inşa sürecinin sizin için yapabileceği sonsuz şeyler vardır.
Katie Kovalcin ile onun için yeni bir kişisel site oluşturmak için çalışıyorum. Bu ikimiz için de yeni süreçleri öğrenme ve yeni şeyler denemede bir deney. Bu durumda, Jekyll'i ilk kez kullanıyorum ve bir SVG sistemini ilk kez otomatikleştiriyorum.
Ekran video kaydı sırasında, her şeyin tam ortasındayım, ancak derleme sistemini sorunsuz bir şekilde çalıştırdım, bu yüzden bunu paylaşmak için iyi bir zaman olduğunu düşündüm. Her zaman bunun paylaşmak için iyi bir zaman olduğunu düşünüyorum - tam da sizin için bir şeylerin tıkladığı anda.
Devam eden şeyler:
- Grunt tüm görevleri yürütür.
- Site Jekyll ile inşa ediliyor. Yani, düzenleri ve içeriği tam web sayfalarına dönüştürür. İçerik veya düzen değiştiğinde Grunt, Jekyll yapısını çalıştırır.
- Jekyll ayrıca yerel sunucuyu çalıştırır.
- Sass, CSS ön işlemcisidir. Bir Sass dosyası değiştiğinde Grunt, Sass komplikasyonunu çalıştırır. Ardından Grunt, sonuç üzerinde Autoprefixer'ı çalıştırır. Ardından Grunt, tüm yeni öğelerin işlenen site tarafından kullanılabilir olduğundan emin olmak için Jekyll yapısını yeniden çalıştırır.
- Site bir SVG sistemi kullanıyor. Simgeler için, ama aynı zamanda logo ve sonunda kim bilir diğer her şeyi. SVG dosyaları, bir "svg" klasöründe ayrı tutulur. Herhangi biri değiştiğinde, Grunt hepsini birlikte işlemek için svgstore görevini çalıştırır. Ardından Grunt, Jekyll yapısını çalıştırır, böylece mevcut tüm SVG site tarafından kullanılabilir.
- Bu GitHub'daki bir repo ve GitHub Pages Jekyll'i desteklediğinden, bu sitenin canlı, barındırılan bir sürümünü otomatik olarak alabiliriz. Bu siteye başka bir alanı da işaret edebiliriz.