Bootstrap’i Grunt ile kullanma

Bilmeyenler için kısa açıklamalarla başlamak istedim.

Bootstrap, linkte de inceleyebileceğiniz gibi Twitter geliştiricileri tarafından yaratılan bir front-end framework.

Grunt ise resmi açıklaması ile bir “JavaScript task runner”. Yani sizin front-end geliştirmeleriniz sırasında düzenli olarak yapmak zorunda olduğunuz işlemleri arkaplanda otomatik olarak yapan bir araç, diyebiliriz.

Şimdi Bootstrap ile Grunt birleşimini nerede ve nasıl kullanmamız gerekebilir, bundan bahsedelim.

E-ticaret sitesi, emlak sitesi, haber sitesi gibi geniş kapsamlı ve fazlaca kod yazılacak bir proje geliştirdiğinizi düşünelim.

Birincisi, artık CSS size çok uzun ve vakit kaybı olarak geliyor ve bu yüzden SASS veya LESS kullanarak CSS kodlarınızı yazmak istiyorsunuz.
Kodlarınızı yazarken aynı anda arkaplanda bu SASS, LESS kodlarınızı compile edip CSS’e çevirecek bir araca ihtiyacınız olacak.

İkincisi, parçalara ayrılmış olan CSS ve JavaScript kodlarınızı birleştirmek ve minify edip tek bir dosya haline getirmek isteyeceksiniz.

Üçüncüsü de siz proje üzerinde çalışırken, örneğin bir butonun rengini değiştirdiğinizde tüm bu işlemlerin arkaplanda tıkır tıkır işlemesi gerekecek.

(Bu ihtiyaç listesi çok daha fazla uzayabilir tabi şimdilik temel ihtiyaç gibi düşünebilirsiniz 🙂

Ve işte tüm bunları yapacak isim karşımızda: Grunt

grunt-logo

Şimdi birlikte arkaplanda Grunt’ın çalıştığı bir Bootstrap projesi oluşturalım. (Yazının sonunda projenin download linkini de bulacaksınız)

Grunt, Node.js üzerinde çalıştığı için, öncelikle Node’u indirip kurmanız gerekiyor. Bu linkten kurulumu yapabilirsiniz.

Command prompt veya terminalinize aşağıdaki node -v komutunu yazdığınızda hata almayıp Node’un versiyon numarasını görüyorsanız, Node.js’i sorunsuz yüklemişsiniz demektir.

Grunt arayüzünü kurmak için de aşağıdaki komutu çalıştırın.

Şimdi sıra projenize Grunt’ı kurmaya geldi.

Öncelikle projenizin dizinine, yine Terminal veya Command Prompt kullanarak gidin.

Projenizin dizinindeyken aşağıdaki komutu çalıştırın.

Bu komutu yazdıktan sonra projenizin içinde package.json dosyası oluşacak ve bu dosyayı doldurmak için komutu yazdıktan sonra çıkan adımları doldurmanız gerekiyor.

Doldurduktan sonra şöyle bir görüntüyle karşılaşmanız gerekiyor. Enter’a bastıktan sonra package.json dosyanız hazır demektir.

Burada benden farklı olarak girmeniz gereken tek bölüm git repository’si… Eğer oluşturmak isterseniz kendi Git repository’nizi oluşturup linkini sorulan adımda yazabilirsiniz.


 

Şimdi sıra kullanacağımız modülleri eklemeye geldi. Grunt ile ihtiyacımız olan işlemleri yapabilmemiz için bu işlemleri yapan modülleri projemize kurmamız gerekiyor.

Şimdi o işlemleri yapalım. İhtiyacımız olan modüller ve işlevleri şöyle:

  • “grunt-contrib-concat”: Dosyaları birleştirmek ve tek bir dosya oluşturmak
  • “grunt-contrib-uglify”: JavaScript dosyalarının minify edilmesi
  • “grunt-contrib-watch”: Dosyalardaki anlık değişiklilerin izlenmesi ve bazı işlemlerin bu değişikliklerin ardından tekrar yapılması
  • “grunt-contrib-sass”: SASS dosyalarının compile edilip CSS’e çevrilmesi
  • “grunt-contrib-cssmin”: CSS dosyalarının minify edilmesi

Şimdi bu modülleri kurmak için sırasıyla aşağıdaki komutları çalıştıralım.

Eğer komutların çalışması sırasında hata alırsanız büyük ihtimalle yetki sorunu yaşıyorsunuz demektir. Aynı komutları başlarına sudo yazarak tekrar deneyin.

Package.json dosyanıza aşağıdaki bölüm eklendiyse, modülleri sorunsuz yüklemişsiniz demektir.

Şimdi Bootstrap’in sayfasından SASS dosyalarını indiriyoruz. Şu sayfada “Download SASS” butonunu göreceksiniz. Tıklayıp indirin.

Sıkıştırılmış dosyanın içinden çıkan “assets” klasörünü kopyaların ve projenize ekleyin. Bu klasörün içinde parçalanmış halde, Bootstrap içindeki tüm componentlerin .scss ve .js dosyalarını bulacaksınız. Yazının başında anlattığım gibi, Grunt kullanarak bu dosyaları birleştirecek, minify edecek ve compile edeceğiz.

Bu arada indirdiğimiz klasörlerde parçalı js ve scss dosyalarının birleştirilmiş halleri de bulunuyor. Bunları grunt ile yapacağımız için silmemiz gerekiyor.

Assets klasörünüzün içindeki javascripts ve stylesheets klasörünüzün içi şu şekilde olmalı. Burada görmediğiniz dosyaları silin.

Screen Shot 2015-06-25 at 10.48.00

Screen Shot 2015-06-25 at 10.48.12

Şimdi grunt konfigürasyonlarımızı yapacağımız dosyamızı oluşturmaya geldi sıra. Projenizin içinde gruntfile.js isimli bir dosya yaratın.

Aşağıdaki kodu dosyanızın içine yapıştırın. Boş alanları sırasıyla dolduracağız.

Concat Modülü

Şimdi öncelikle concat modülü için ayarlarımızı yapalım.

Gördüğünüz gibi modülün içinde bazı parametreler var. Örneğin banner parametresi birleştirilen dosyanın en tepesine otomatik olarak yazılan açıklama kısmının şablonu. Bu bölümü istediğiniz şekilde düzenleyebilirsiniz. Kendi adınızı, web sitenizin url’ini yazabilirsiniz.

src alanına görmüş olduğunuz gibi js dosyalarımızın path’ini yazıyoruz. Yani Grunt’a assets klasörünün içinde gördüğün tüm js dosyaları ile çalış, diyoruz.

dest kısmı da oluşturulacak olan birleştirilmiş dosyanın adresi…  Ben dosyanın adını project.js yaptım. Siz kendi pojenize göre bunu özelleştirebilirsiniz.

Bu ayarları tamamladıktan sonra aşağıdaki komutu çalıştırın.

Aşağıdaki uyarıyı aldığınızda, assets dizininizde project.js dosyanız oluşacaktır.

Uglify Modülü

Şimdi diğer taskımız olan uglify’ı ekleyelim.

Bu task da project.js dosyasını alıyor ve minify edip project.min.js adıyla yeni bir dosya kaydediyor.

SASS Modülü

assets/stylesheets klasörünüzün içindeki _bootstrap.scss dosyasını görmüşsünüzdür. Bu dosya bir partial dosyasıdır. Yani başka bir .scss dosyasının içine çağrılabilir. Bu dosyanın içine girdiğinizde de Bootstrap’a ait diğer partial dosyalarını göreceksiniz.

İleride farklı .scss dosyaları da oluşturacağımızı düşünerek bu dosyanın adını project.scss olarak değiştirelim ve ileride oluşturacağımız yeni .scss dosyalarını da bu dosyanın içine çağırarak devam edelim.

SASS modülümüzün ayarlarını da aşağıdaki şekilde yapalım.

Bu task da gördüğünüz gibi project.scss dosyasını (ve içinde çağrılan partialları) alıp, compile edip, assets klasörünün içinde project.css adında yeni bir dosya oluşturacak.

CSSmin Modülü

CSSmin modülü için aşağıdaki kodu gruntfile.js dosyamıza ekleyerek SASS modülü tarafından oluşturulan project.css dosyasını minify edip project.min.css adıyla yeni bir dosya oluşturuyoruz.

Watch Modülü

Şu ana kadar her şey iyi hoş da, biz her yazdığımız koddan sonra ilgili modülü bulup onun komutunu mu gireceğiz dediğinizi duyar gibiyim; tabiki hayır…
Watch modülünü aşağıdaki şekilde yazıyoruz ve bu modülün .scss dosyalarında değişiklik yaptığımızda sass ve cssmin; .js dosyalarında değişiklik yaptığımızda ise concat ve uglify tasklarını çalıştırmasını istiyoruz.

Son olarak yapmamız gereken 2 iş kaldı.

Gerekli eklentileri yüklemek ve grunt komutuyla çalışacak olan default task’ı belirlemek

Böylelikle çalışırken tek yapmanız gereken projenizin olduğu dizine gidip grunt komutunu 1 kez çalıştırmak.
Sonrasında kodda yaptığınız tüm değişiklikler watch taskı ile izlenecek ve diğer modüller de sonrasında üzerine düşeni yapacak.

İşte gruntfile.js dosyasının son hali:

Projenin son halini de buradan indirebilirsiniz.

 

Etiketler: ,

TÜM YAZILAR