Şub.17

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ı).
Web Tasarımı ve Web Programlama 2020

Yorum bırak

Yorum