Visual Studio Code ile Gulp js Kullanımı ve Otomatik Scss compile

Bu yazıda Visual Studio Code ile projemizde gulp.js kullanımı ve otomatik sass compile etme işlemini göreceğiz.


İlk olarak bir klasör oluşturalım ve bunu VS Code ile açalım, proje içeriğinide klasör yapısınıda şu şekilde ayarlayalım;

|--- projeAdi
   |-- assets
      |--- css
         |--- scss
            |--- site.scss
   |--- index.html


index.html

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>VS Code Gulp.js Kullanımı</title>
    <link rel="stylesheet" href="assets/css/site.css">
</head>
<body>
    <div class="content">
        <div class="left">
            <p>Left</p>
        </div>
        <div class="right">
            <p>Right</p>
            <a class="a-link" href="#">Test Link</a>
        </div>
    </div>
</body>
</html>


Şimdi gulp için gerekli kurumları yapalım;

1. adım;

npm install -g node-sass less


2. adım;

Terminal / Configure Tasks... ı seçin ve Create tasks.json file from template'i ardından Other'ı seçin.


3. adım;

Proje dizininde oluşan .vscode içerisindeki tasks.json içeriğini şu şekilde değiştiriyoruz;

// Sass configuration
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
      {
        "label": "Sass Compile",
        "type": "shell",
        "command": "node-sass assets/css/scss/site.scss assets/css/site.css",
        "group": "build"
      }
    ]
  }


4. adım;

Şimdi site.scss dosyasını açalım;

.content {
    display: flex;
    flex-direction: row;
    .left,
    .right {
        flex: 1;
    }
    .left {
        background-color: #f3f3f3;
    }
    .right {
        background-color: #ececec;
        .a-link {
            color: red;
        }
    }
}


5. adım;

Şimdi scss compile etmek için Ctrl + Shift + B yapıyoruz ve Sass Compile ı seçiyoruz, gelen listeden ise Never scan the task output for this task' ı seçin; Diğer seçenekler;

  • Continue without scanning the task output - Görev çıktısını taramadan devam et
  • Never scan the task output for this task - Bu görev için asla görev çıktısını tarama
  • Never scan the task output for shell tasks - Görev çıktısını asla kabuk görevleri için tarama
  • Learn more about scanning the task output - Görev çıktısını tarama hakkında daha fazla bilgi edinin



Evet bu adımdan sonra assets/css içerisinde compile edilmiş site.css dosyası oluşuyor.


Ancak bu şekilde olunca site.scss de her değişiklik yaptığımızda 5. adımı tekrarlamamız gerekiyor.


Biz şimdi bunu otomatik compile ettirelim;


1. adım;

npm install -g gulp
npm install gulp gulp-sass gulp-less


2. adım;

Proje dizininde gulpfile.js adında bir dosya oluşturalım ve içeriğini şu şekilde ayarlayalım;

// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass');


gulp.task('sass', function(cb) {
  gulp
    .src('assets/css/scss/site.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/css'));
  cb();
});


gulp.task(
  'default',
  gulp.series('sass', function(cb) {
    gulp.watch('assets/css/scss/site.scss', gulp.series('sass'));
    cb();
  })
);


3. adım;

Terminal/Run Task... ı seçin ve gulp:default u ardından Never scan the task output for this task'ı seçin.

Herhangi bir sorun yoksa terminalde aşağıdaki gibi bir işlem gerçekleşecek;


Artık site.scss de bir değişiklik yaptığımızda gulpfile otomatik olarak compile olacak ve assets/css içerisinde site.css dosyası varsa oluşacak yoksa düzenlenmiş olacak.


Daha fazla detay için şu iki linki inceleyebilirsiniz;


Umarım faydalı olur.

Mehmet Sert

HTML, CSS, Javascript ve Angular konularında tecrübe edinmiş ve Bursa'da Frontend Developer olarak bir firmada görev almaktayım. Yeni teknolojilere meraklıyım, öğrendiklerimi uygulayarak ve anlatarak pekiştirmeyi seviyorum....

"Visual Studio Code ile Gulp js Kullanımı ve Otomatik Scss compile" için 1 yorum yapıldı.
Y.C
Yasin Ceylan 23 Temmuz 2020

Çok güzel bir kaynak yazmışsınız, teşekkürler.

Yorum yap * E-posta adresiniz yayınlanmayacak.