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.