Gulp Kullanımı

Merhaba değerli okurlar, front end projelerinin vazgeçilmez araçı Gulp nasıl kullanılır ne işe yarar bunlara değinelim.

Task Runner Nedir ?

Task runner en basit anlamıyla sırasıyla şu görevleri yerine getirir;

  • Farklı css,js dosyalarını birleştirip hepsini tek bir dosya haline getirir.
  • Sass,Less,Stylus gibi Css Pre-processors derler ve Default CSS haline getirir.
  • Kullanıdığınız resimleri otomatik olarak minify eder.
  • Sizin yerinize css,js,html kodlarınızı en minimum hale getirir.
  • Javascript dosyalarınızdaki hataları kontrol etmenize yardımcı olur.

Gulp Nedir ?

Gulp bir front-end projesi aşamasında başlangıçtaki sürekli tekrar edilen işlerinize son verir.

Gulp Nasıl Kurulur ?

Gulp kurabilmeniz için ilk öncelikle bilgisayarınız da NodeJS kurulu olması gerekir. Bu linke tıklayarak indirebilirsiniz.

İndirdikten sonra Node.js Komut satırını açalım ve aşağıdaki işlemleri sırayla yapalım.

npm install gulp-cli -g

Sıra Gulp modülünü indirmeye geldi aşağıdaki komutu yazarak kurabilirsiniz.

npm install gulp -D

Bu işlemden sonra package.json dosyasını proje klasörümüzün içine hızlıca oluşturalım.

npm init -y

-y ifadesi proje ismi , proje versiyonu , lisans , açıklama gibi bilgileri atlamamızı sağlar siz isterseniz bunları tek tek girebilirsiniz yada hiç bu işlemi yapmadan kendimiz package.json adında bir dosya oluşturalım ve aşağıdaki kodları yapıştıralım.

{
“name”: “frontend”,
“version”: “1.0.0”,
“main”: “gulpfile.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“description”: “”,
“dependencies”: {},
“devDependencies”: {
“browser-sync”: “^2.26.3”,
“del”: “^3.0.0”,
“gulp”: “^3.9.1”,
“gulp-autoprefixer”: “^6.0.0”,
“gulp-concat”: “^2.6.1”,
“gulp-csso”: “^3.0.1”,
“gulp-imagemin”: “^4.1.0”,
“gulp-sass”: “^4.0.2”,
“gulp-uglify”: “^3.0.1”,
“run-sequence”: “^2.2.1”
}
}

Gulp paketlerimizi package.json dosyasına yazdık aşağıdaki komut ile paketleri yüklemiş olacağız.

npm install

 

Gulp Kullanımı

Proje dizinimize gelelim ve burada gulpfile.js adında bir dosya oluşturalım artık tüm gulp görevlerini buraya yazacağız.

İndirdiğimiz paketleri sayfamıza dahil edelim.

const gulp = require(‘gulp’);
const browserSync = require(‘browser-sync’).create();
const sass = require(‘gulp-sass’);
const minifyCSS = require(‘gulp-csso’);
const minifyImg = require(‘gulp-imagemin’);
const minifyJS = require(‘gulp-uglify’);
const concat = require(‘gulp-concat’);
const autoprefixer = require(‘gulp-autoprefixer’);
const del = require(‘del’);
const runSequence = require(‘run-sequence’);

Şimdi klasör yapımızı ele alalım.

dist ve source adında 2 tane dosya oluşturalım

dist = > dist klasörümüz projemizin bitmiş halini.

—– Bu klasörde yazdığımız scss’ler derlenip css haline çevrilir

—– Minimize ettiğimiz image,js,html dosyaları bulunur

source = > source klasörümüz ise projemizin devam eden hali olacak.

Artık görevlerimizi yazmaya hazırız.

JavaScript Task Örneği

gulp.task(‘js’, () =>{
return gulp.src(‘src/js/**/*.js’)
.pipe(concat(‘app.min.js’))
.pipe(minifyJS())
.pipe(gulp.dest(‘dist/js’))
.pipe(browserSync.stream());
});

Bu örnekte src altında js klasörümüzün içindeki tüm JavaScript dosyalarımızı

—– minifyJS kodu ile sıkıştırıp boyutunu azaltıyoruz.

— concat ile tüm js dosyalarımızı tek bir dosya haline getirip ismini app.min.js yapıyoruz.

—– gulp.dest ile dist dosyamıza bitmiş halini atıyoruz.


Sass Task Örneği

gulp.task(‘sass’, () =>{
return gulp.src(‘src/sass/**/*.scss’)
.pipe(minifyCSS())
.pipe(autoprefixer())
.pipe(concat(‘app.min.css’))
.pipe(gulp.dest(‘dist/css’))
.pipe(browserSync.stream());
});

Sass örneğinde src altında sass klasörümüzün içindeki tüm .scss dosyalarımızı

—– minifyCSS kodu ile sıkıştırıp boyutunu azaltıyoruz.

— concat ile tüm .scss dosyalarımızı tek bir dosya haline getirip ismini app.min.css yapıyoruz.

—– gulp.dest ile dist dosyamıza bitmiş halini atıyoruz.

—– autoprefixer ile CSS3 tarayıcı desteği için -moz , -webkit gibi ekler yazmamız gerekiyordu fakat bu işlemi bir task olarak yazarsak otomatik eklenmesini sağlayabiliriz.


Image Task Örneği

gulp.task(‘image’, () => {
return gulp.src(‘src/img/**/*’)
.pipe(minifyImg())
.pipe(gulp.dest(‘dist/img’))
});

Image örneğinde src altında img klasörümüzün içindeki tüm resimlerimizi

—– minifyImg kodu ile sıkıştırıp boyutunu azaltıyoruz.

—– gulp.dest ile dist dosyamıza küçültülmüş halini atıyoruz.


Html Task Örneği

gulp.task(‘html’, () => {
gulp.src(‘src/**/*.html’)
.pipe(gulp.dest(‘dist’))
.pipe(browserSync.stream());
});

Html örneğinde src altındaki tüm html klasörlerimizi

—– gulp.dest ile dist dosyamıza son halini atıyoruz.

—– browserSync ile anlık olarak refresh yapmadan değişiklikleri görebiliyoruz.


Browser-Sync Nedir ?

Browser-Sync kütüphanesi yaptığımız degişiklikleri sayfamızı yenilemeden görmemizi sağlar.

gulp.task(‘browser-sync’, () => {
browserSync.init({
server: {
baseDir: “dist”
}
});
});

gulp.watch()

Tüm bu yazdığımız görevleri sürekli izlememiz ve server’a yollamamız gerekmektedir.

gulp.task(‘watch’, () =>{
gulp.watch(‘src/sass/**/*.scss’, [‘css’]);
gulp.watch(‘src/img/**/*’, [‘img’]);
gulp.watch(“src/**/*.html”, [‘html’]);
gulp.watch(“src/js/**/*.js”, [‘js’]);
});

gulp.task(delete)

Gulp görevleri çalıştığında dist altındaki dosyalar silinsin ve source altındaki dosyaları alıp yazsın.

gulp.task(‘delete’, () => del([‘dist/css’, ‘dist/js’, ‘dist/img’, ‘dist/**/*.html’]));

gulp.task(run)

Gulp görevlerini sırasıyla aşağıdaki kod parçası çalıştıracaktır terminal ekranına run yazmamız yeterli.

gulp.task(‘run’, () => {
runSequence(
‘delete’,
‘html’,
‘css’,
‘js’,
‘img’,
‘browser-sync’,
‘watch’
);
});

Bitmiş Hali

Bitmiş halini bu linkten indirebilirsiniz.

İndirdikten sonra;

npm install
run

Komutlarını dizinde yazarak çalıştırabilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

%d blogcu bunu beğendi: