Eki.27

Gulp Dersleri – Part 7 – HTML Dosyalarını Minimize Etmek (gulp-minify)

Hazırladığımız örneğimizde sadece bir adet index.html dosyamız var, ancak HTML dosyalarının sayısı bir de olsa yüzlerce de olsa hepsini tek bir komut ile minify edebiliriz.

HTML dosyalarını minify edebilmek için yeni bir modül eklememiz gerekecek. Ekleyeceğimiz modülün ismi gulp-minify-html. Aşağıdaki komutu proje klasörü içindeyken Command Prompt’a girin ve Enter ile onaylayın.

Gulp

Eki.27

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.

Gulp

Eki.27

Gulp Dersleri – Part 5 – İlk Gulp Komutlarının Yazımı

Bir önceki aşamada gulpfile.js dosyamızı oluşturmuştuk. Bu dosyayı oluştururken ANSII değil de UTF-8 olarak oluşturmaya dikkat edin!

gulpfile.js dosyamızı açın. İlk olarak gulp modüllerini import edeceğiz. Bunun için aşağıdaki kodu başlangıçta yazalım.

var gulp = require(‘gulp’);

Daha sonra da ilk görevimizi oluşturuyoruz. Görev tanımlaması yaparken aşağıdaki kalıbı kullanabiliriz.

Gulp

Eki.27

Gulp Dersleri – Part 3 – Web Projesi Oluşturmak

Command Prompt’tayken Masaüstü’ne geçelim ( cd Desktop ).

webprojesi ismi ile bir klasör oluşturalı ( mkdir webprojesi ).

Veya bu işlemleri yapmadan kendiniz de Masaüstü’nde webprojesi isminde bir klasör oluşturup içinde Command Prompt’u açabilirsiniz.

Aşağıdaki komutu girin ve bir proje oluşturmak için package.json dosyamızı oluşturalım. Bu dosya, proje hakkında bazı bilgiler taşıyacak. Komutu girdiğinizde, sırası ile sizden proje ile ilgili bilgiler istenecek. İstenilen bilgileri Command Prompt’tan sırası ile girin ve her seferinde Enter tuşuna basıp ilerleyin. Eğer istenilen bilgiyi girmek istemezseniz, yine Enter ile es geçebilirsiniz.

Gulp

Eki.27

Gulp Dersleri – Part 2 – Kurulum

Gulp’un kurulumunu gerçekleştirmek için ilk olarak sistemimizde Node.js’in kurulu olması gerekiyor.

Node.js kurulu ise Command Prompt’u açın (Komut Satır). CTRL + R ile komut satırını açın ve cmd yazıp Enter’a basın. Eğer Windows 8 üzeri kullanıyorsanız, projenizin bulunduğu klasörde sağ tıklayıp açılan menüden veya üst menüden de açabilirsiniz.

Gulp