May.23

Gulp Dersleri – Part 6 – Örnek Gulp Komutları ve Otomatikleştirme

Yazacağımız görevlerde basitten karmaşığa doğru ilerleyeceğiz. Şu an projemizin klasör yapısı hazır ancak hiçbir içerik yok. Öncelikle basitçe birkaç içerik oluşturalım. Aşağıdaki gibi basitçe bir web sayfamız olsun. Web sayfamızda birkaç resim, bir JavaScript dosyası, bir CSS dosyası ve bir de HTML dosyası olsun. Kodları yazarken özellikle bol TAB’lı, bol SPACE karakterli ve bol satır aralıklı yazmaya çalıştım. Böylece minify işlemini daha etkili bir şekilde görebileceğiz.

index.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8" />
     <title>Gulp Öğreniyorum</title>
     <link rel="stylesheet" href="css/index.css">
</head>
<body>
     <div class="sayfa">
          <h1>Gulp Öğreniyorum</h1>
          <hr>
          <img id="logo" src="images/gulp_logo.png" />
          <p>Gulp, Node.js tabanlı bir Task Runner (Görev Çalıştırıcısı)’dır. 2015 yılından beri yaygın olarak kullanılmaktadır. Biz de aşağıdaki konularla, Gulp'u nasıl kullanacağımızı göreceğiz.</p>
          <ul class="maddeler">
               <li>Dosyalarını Minimize Etmek</li>
               <li>Resimleri Optimize Etmek</li>
               <li>JS Kodlarını Kontrol Etmek</li>
               <li>Gulp Görevlerini Kombine Etmek</li>
          </ul>
          <hr>
          <p id="tarih"></p>
     </div>
     <script src="js/index.js"></script>
</body>
</html>

css/index.css


body{
     background-color:silver;
}

.sayfa{
     width: 400px;
     padding: 15px;
     background-color: white;
     border-radius: 15px;
     border-color: 1px solid black;
     text-align: justify;
     position: absolute;
     left: 50%;
     top: 10%;
     margin-left: -200px;
}

#logo{
     height: 100px;
     width: auto;
     float: left;
}

.maddeler {
     list-style-image: url('../images/madde.png');
}

#tarih{
     text-align: right;
     font-size: 13px;
}

js/index.js

var zaman = new Date();

var gun = zaman.getDate();
var ay = zaman.getMonth()+1;
var yil = zaman.getFullYear();

if(gun < 10){
    gun = '0' + gun;
} 

if(ay < 10){
    ay = '0' + ay;
}

var zaman = gun + '/' + ay + '/' + yil;

document.getElementById("tarih").innerHTML = zaman;	

Sayfamız, tarayıcıda aşağıdaki gibi açılacaktır.

Hazırladığımız bu sayfa için sırasıyla CSS, HTML, JS ve resim dosyalarını minify edeceğimiz kodlarımızı yazacağız. Sonrasında JavaScript kodlarımız doğru yazılmış mı diye kontrol eden bir görev tanımlayacağız (Şu an yazdığımız JavaScript kodu ile tarih yazdırılıyor, sorunsuz çalışıyor. Ancak test yapabilmek için JavaScript kodumuzun birkaç yerini bozmamız gerekeceğini unutmayın). Her 4 öğe için minify kodunu yazdıktan sonra bu 4 görevi tek bir seferde çağıracak kombine bir görev oluşturacağız. Böylelikle tek tek görevleri çağırmak zorunda kalmayacağız, daha da pratik olacak. Yine biz projede bir değişiklik yaptıkça, Gulp ile dosyaların otomatik olarak izlenmesini sağlayacak ve gerekli olan görevleri çağıracağız. En sonunda da projede herhangi bir dosyada bir değişiklik yaptıkça, projenin tarayıcıda açık olan HTML sayfasının da otomatik olarak güncellenmesini sağlayacağız. Böylece kod yazarken sonucu anında görebileceğiz (Hatırlayın, bu özellik Brackets’te de vardı).

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum