İçerik
Grunt gibi JavaScript görev koşucuları, ön uç geliştiriciler arasında son derece popüler hale geldi. Bunun nedeni, işimizde yapmak istediğimiz tek şeyi yapmaya yardımcı olmalarıdır - zamandan tasarruf edin!
Ancak şu anda mevcut olan 5.000'den fazla (ve artıyor) Grunt eklentisiyle, geliştiricilerin bu "zor durumda olan elmasları" bulması zor olabilir. Kullanmanız gereken mükemmel Grunt eklentileri tarifini bulmak için Grunt'a takılıp kaldığımız zamana bir göz attık.
01. Çirkin
Her ön uç geliştirici, JavaScript dosyalarını küçültmenin avantajlarını bilir ve bu eklentinin yaptığı da tam olarak budur. Popülerliği böyledir, aslında Grunt Başlarken Kılavuzunda yer almaktadır. İsmine rağmen, bu eklenti aynı zamanda JavaScript kodunuzu güzelleştirmek için de kullanılabilir - ancak bu özellikle üretim kullanımı için kullanışlı değildir.
02. Sass
Hangi CSS ön işlemcisinin tüneyi gerçekten yönettiği konusunda bazı tartışmalar olabilir, ancak burada Stickyeyes'te ana rakibi Less yerine Sass'a karar verdik. Bu eklenti, Sass dosyalarımızı yazmamızı ve bunları otomatik olarak CSS'ye derlememizi sağlar. CSS ön işlemcisi kullanmanın yararları, başlı başına ayrı bir makaleyi garanti eder, ancak zaten bir makaleyi kullanmıyorsanız, partiye çok geç kaldığınızı söylemek güvenlidir!
03. CSSMin
Bu eklenti, Uglify'nin CSS eşdeğeridir. Basitçe belirtilen CSS dosyalarını alır ve küçültür. Elbette bunu Sass eklentisi ile birlikte kullanacaksanız, bu görevin Sass görevinden sonra çalıştırıldığından emin olmanız gerekir.
CSSMin'e, biraz farklı teknikler kullanarak CSS dosyalarınızın boyutunu da küçültebilen birçok alternatif vardır; CSS nano, CSS sıkıştırma, CSS küçültme, vb. Bu tür şeylerle ilgileniyorsanız bu kullanışlı karşılaştırmayı okuyun.
04. Konsat
Adından da anlaşılacağı gibi, bu eklenti birden fazla dosyayı alır ve bunları tek bir dosyada birleştirir. Kod küçültmede olduğu gibi, dosyaları birleştirme de sayfa yükleme sürelerini azaltmak için çok eski bir en iyi uygulamadır.
Dosya birleştirme her zaman hem JavaScript hem de CSS için üretimde kullanılmalıdır. Bu, genellikle CSS ön işleme görevi ve küçültme görevinden sonra çalıştırılacak son görevdir. Bu eklentiye belirli bir dizindeki tüm dosyaları birleştirmesini söylemek kolaydır, ancak dosyaların birleştirilme sırasına dikkat edin - dosyalara belirli bir sıra vermeniz veya ad vermeniz gerekebilir, böylece her zaman istediğiniz sırada birleştirilirler. .
05. ImageMin
CSSMin ve Uglify ile aynı şekilde, ImageMin sayfa yüklemesi için çok eski bir problem olan görüntü dosyası boyutunun üstesinden geliyor. Görüntü 'küçültme' genellikle optimizasyon için ilk çağrı noktasıdır, bu nedenle bu eklenti, toplam sayfa dosyası boyutunu olabildiğince azaltmak için gereklidir.
JPG, PNG, GIF veya SVG (giderek daha popüler hale gelen vektör görüntü formatı) ile çalışıyorsanız, bu eklenti, parmağınızı bile kıpırdatmanıza gerek kalmadan resimlerinizin dosya boyutunda kayıpsız küçültme sağlar. Projenizde çok sayıda görüntünüz varsa, bu görevi bir izleme olayında çalıştırmak yerine, yalnızca üretime geçtiğinizde çalıştırmak iyi bir fikirdir (bir sonraki noktaya bakın).
06. İzle
Bu eklenti aslında web sitenizin ön ucunu etkilemez, ancak verimli bir Grunt süreci oluşturmada son derece yararlıdır. Watch, belirlediğiniz herhangi bir dizine göz kulak olur ve bir şey değiştiğinde, belirli Grunt görevlerini otomatik olarak tetikler.
Dolayısıyla, JavaScript görevlerinizi çalıştırmak için ’js’ dizininizde bir izleme koşulu ve CSS görevlerinizi çalıştırmak için ’css’ dizininizde başka bir izleme koşulu ayarlayabilirsiniz. Bu, ana Grunt sürecinizi hiçbir zaman manuel olarak yürütmek zorunda kalmayacağınız anlamına gelir! Değişiklik yapmaya başlamadan önce sadece homurdanma izleme görevini başlatın ve orada olduğunu bile unutabilirsiniz.
Kelimeler: Jamie Shields
Jamie Shields, dijital pazarlama ajansı Stickyeyes'te arka uç geliştiricidir.
Böyle? Oku bunu!
- Grunt vs Gulp: Hangi JavaScript oluşturma aracını seçmelisiniz?
- Grunt kurulumunuzu geliştirmenin 8 yolu
- En iyi ücretsiz WordPress temaları
