Grunt ile SASS’ı CSS’e Derleme (grunt-sass)

Bir web arayüz programcısı olarak SASS’ı ucundan az da olsa duymuşsunuzdur. SASS, CSS’in biraz daha gelişmiş ve biraz daha pratik bir halidir. Hızlı ve çevik kod geliştirme sürecinde artık CSS’ten ziyade SASS ile önişlemci mantığı ile CSS kodları yazılıyor. Buradaki mantıkla; CSS’teki bir takım notasyonları, yani süslü parantezler, noktalı virgüller gibi işaretleri kullanmadan, bazen de değişken tanımlayarak stil yazım kuralları oluşturulmuştur. Ancak unutmayın ki sadece yazım aşamasında SASS kullanılır. SASS dosyaları mutlaka CSS’e dönüştürülmelidir.

SASS’ta süslü işaretler yerine Tab girintileri önem kazanır. Satır atlaması olduğunda da otomatik olarak noktalı virgül olarak değerlendirilir. SASS-CSS dönüşümleri hakkında pratik yapmak isterseniz http://css2sass.herokuapp.com/ adresini kullanabilirsiniz. Aşağıda bir de örnek bir dönüşüm yer almaktadır.

Devamını Oku… »

Grunt ile Gerçek Zamanlı Olarak Tüm Değişiklikleri Tarayıcıda Yansıtma (grunt-contrib-watch ve grunt-express)

Bir proje üzerinde çalışırken, sürekli olarak değişiklikler yaparız. Mesela projeyi tarayıcıda açtık ve görünüşünü test ediyoruz. Arkaplana gri verdik ama hoşumuza gitmedi, rengi biraz daha koyu yapmak istiyoruz. Bu durumda ilgili CSS’i açıp renk kodunu değiştirecek, kaydedecek ve tarayıcıda tekrar refresh yapmamız gerekir. Ancak bu işi şöyle daha pratik bir şekilde yapabiliriz. Ekranı ikiye böldüğünüzü düşünün. Sağ tarafta kodları yazdığınız alan, sol tarafta da tarayıcı. Sağ tarafta kodları yazıp kaydettiğinizde, değişikliğin anında tarayıcıda açık olan sayfada yansımasını ister misiniz? Elbette istersiniz. İşte bu da Grunt’un en çok kullanılan görevlerinden biridir.

Az önce görmüş olduğumuz grunt-contrib-watch modülü, dosya takibini yapmaktadır. Dosya takibi ile birlikte livereload metodunu da kullanarak anlık olarak okuma ve sayfanın yenilenmesini sağlıyoruz. Ancak bu eklenti ile birlikte bir de grunt-express modülüne ihtiyaç duyulur. Yani bu işlem için iki adet eklenti gereklidir.

Yükleme komutu:

npm install grunt-express –save-dev

JS Ekleme Komutu:

grunt.loadNpmTasks(‘grunt-express’);
Devamını Oku… »

Grunt için Task Yükleme ve gruntfile.js Yapılandırma Örneği (JavaScript Validation)

Şimdi basit bir şekilde basitçe bir proje oluşturalım. Bu aşamada Bootstrap’tan bağımsızız. Sadece Grunt kullanımına yönelik birkaç pratik bilgi edineceğiz. Sonrasında kendi becerilerinizle Bootstrap veya daha farklı framework’lerle çalışırken bu teknikleri uygulayacaksınız.

En basitinden Grunt ile bir JavaScript Debug kontrolü yapalım. Grunt’a bir JavaScript dosyası göstereceğiz ve bu JavaScript dosyasında herhangi bir hata var mı, varsa nerede hangi hata var diye görev yükleyeceğiz.

Adım adım aşağıdaki yolu izleyin.

1. Projenin yüklü olduğu dizine girin.

2. package.json ismi ile bir metin dosyası oluşturun.

3. Komut Satırı panelini açın ve proje klasörünün olduğu dizine girin.

4. Aşağıdaki komutu girin ve yapılandırma yapın.

npm init

5. package.json için paket tanımlamasını oluşturun.

6. Aşağıdaki komutu girin ve Grunt’ı yükleyin.

npm install grunt –save-dev

7. Yükleme bitince, proje klasörü içinde node_modules klasörü oluşturulacak.

8. Proje klasörü içinde gruntfile.js ismi ile bir metin dosyası oluşturun.

9. Aşağıdaki test kodlarını gruntfile.js içine yazın ve kaydedin. Bu komutla, js klasörü içindeki tüm JavaScript dosyaları kontrol edilecek.

Devamını Oku… »

npm Nedir ve Avantajları

Öncelikle şöyle bir düşünelim…

Bir yazılım şirketinde veya ajansta çalışıyoruz. Sürekli olarak müşterilerimizin web sayfalarını tasarlamak ve/veya kodlamakla görevliyiz. Aynı zamanda da bir ekip ile birlikte çalışıyorsunuz. Projeyi başlatacak ve süreci takip edip belirli bir zaman periyodunda raporlayacak olan sizsiniz. Sizin burada ilk aşmanız gereken ilk görünürde 4 adet probleminiz olacak ve bu problemleri de npm ile çözeceğiz.

npm (Node Package Modules), Node.js için bir takım script’lerin otomatik olarak indirilmesini, güncellenmesini, silinmesini sağlayan bir paket yöneticisidir. Komut Satırı (Command Port) üzerinden çalışır.

Problem 1: Angaryalar

Her hafta yeni bir projeyi başlatıyorsanız, her seferinde yeni bir proje klasörü açmak, gerekli kütüphaneleri eklemek, gerekli alt klasörleri açmak, index sayfası oluşturmak, versiyon dosyaları eklemek ve bir takım yapılandırıcı dosyaları hazırlamakla uğraşacaksınız. Ortalama olarak bu işi sizin iş hızınıza göre 1-3 saatlik bir zamanınızı alacak. Ayrıca oldukça sıkıcı ve angarya bir iştir.

Devamını Oku… »

Bootstrap 4 ile Ekran Boyutuna Göre DOM Elemanı Gizleme ve Gösterme

Yapacağımız örneğimizde bir makale olsun. Makalenin üst kısmında da arabanın görseli yer alsın. Ancak bu görsel, ekran boyutuna göre değişsin. Sebebini de şöyle düşünelim. Eğer kişi dar bir ekran ile giriyorsa, görüş alanı dar olacaktır. Ona göre küçük ölçekli bir resimle daha detay bir araba fotoğrafı göstermek uygun olur. Ancak geniş ekranla giriyorsa, büyükçe bir resimde otoyolda giden arabayı göstermek daha çekici olabilir. İşte bu mantıkla bir tasarım örneği geliştirelim.
Öncelikle şunu bilelim. Küçük ve büyük olan her iki resim de DOM içinde var olacak. Ancak bu resimler, Bootstrap ile ekran moduna göre otomatik olarak gizlenip gösterilecek. Bunu yapmak için de hidden-sm-down ve visible-xl-down’u büyük resmi küçük ve daha büyük ekran modu için kullanacağız. hidden-md-up’u da orta ve daha küçük ekran modlarında gizlemek için kullanacağız.