Gulp.js 4.0 versiyon güncelleme

1 Ocak 2018 itibari ile çıkan gulp 4.0 sürümü, içerisinde yeni özellikler barındırıyor. Ne yazık ki yeni gelen sürümde bazı değişiklikler, gulp’ın 3.9.1 versiyonu ile yazılmış gulpfile.js dosyasının çalışmamasına neden oldu. Eğer gulp dosyanızı v4.0+ bir sürüme nasıl güncelleyeceğinizden emin değilseniz bu makale tam size göre.

Benim de kullandığım v3.9.1 ile yazılmış gulpfile.js kodlarını inceleyelim.

 1const gulp = require('gulp')
 2const browserSync = require('browser-sync').create()
 3const sass = require('gulp-sass')
 4const prefix = require('gulp-autoprefixer')
 5const plumber = require('gulp-plumber')
 6const reload = browserSync.reload
 7const php = require('gulp-connect-php');
 8 
 9gulp.task('browser-sync', function () { 
10      php.server({}, function () {
11            browserSync.init({
12                  proxy: '127.0.0.1:8000'
13            })
14      }); //browser-sync'in hangi dosyaları izleyeceğini belirle
15 
16      gulp.watch('./*.html').on('change', reload);
17      gulp.watch('./*.php').on('change', reload);
18      gulp.watch('./includes/**/*.php').on('change', reload);
19      gulp.watch('./js/*.js').on('change', reload);
20      gulp.watch('./scss/**/*.scss', ['css']);
21})
22 
23gulp.task('css', () => {
24      return gulp.src('./scss/main.scss').pipe(plumber([{
25            errorHandler: false
26      }])).pipe(sass()).pipe(prefix()).pipe(gulp.dest('./css/')).pipe(browserSync.stream())
27})
28 
29gulp.task('default', ['browser-sync', 'css']) 

Yeni gulp sürümü ile, task() fonksiyonu kalktı, onun yerine 2 tane fonksiyon geldi. Bunlar serialize() ve parallel() fonksiyonlarıdır. Bu fonksiyonları, elektrik devrelerindeki seri ve paralel bağlama olarak düşünebiliriz. Oluşturmuş olduğumuz fonksiyonları art arda ya da aynı anda çalıştırmamıza olanak sağlıyor bu iki fonksiyon.

Şimdi de adım adım v4.0+’a uygun bir şekilde kodumuzu güncelleyelim.

Önce pluginlerimizi ekleyelim. Burda değişen bir şey yok. Aynı kalıyor.

1//tanımlamalarımız yine aynı kalıyor
2const gulp = require('gulp')
3const browserSync = require('browser-sync').create()
4const sass = require('gulp-sass')
5const prefix = require('gulp-autoprefixer')
6const plumber = require('gulp-plumber')
7const reload = browserSync.reload
8const php = require('gulp-connect-php');

Daha sonra browser-syncimizi ouşturalım. Artık watch() fonksiyonlarımızı, ayrı bir fonksiyon içinde tanımlayıp browser-sync ile paralel olarak çalıştırmamız lazım.

1//browser-sync
2function browser_sync() {
3php.server({}, () => browserSync.init({proxy: '127.0.0.1:8000'}));
4//eskiden watch() fonksiyonlarımız burada bulunmaktaydı.
5}

Dosyalarımızı izlemek için watchFiles() adında bir fonksiyon oluşturuyorum.

1function watchFiles() {
2      gulp.watch('./*.html').on('change', reload);
3      gulp.watch('./*.php').on('change', reload);
4      gulp.watch('./*.php').on('add', reload);
5      gulp.watch('./includes/**/*.php').on('change', reload);
6      gulp.watch('./front/js/*.js').on('change', reload);
7      gulp.watch('./front/scss/**/*.scss', gulp.series(css));
8}

Burada bir satır dikkatimizi çekiyor. Eskiden gulp.watch('./scss/\*\*/\*.scss', \['css'\]) olarak izlediğimiz dosyayı artık gulp.watch('./front/scss/\*\*/\*.scss', gulp.series(css)) şeklinde izliyoruz.

Şimdi sırada css fonksiyonumuzu yazmak var. Yine her şey hemen hemen aynı, sadece fonksiyon içine alıyoruz kodlarımızı.

1function css() {
2      return gulp.src('./front/scss/main.scss')
3      .pipe(plumber([{errorHandler: false}]))
4      .pipe(sass())
5      .pipe(prefix('last 2 versions'))
6      .pipe(gulp.dest('./front/css/'))
7      .pipe(browserSync.stream())
8}

Şimdi sıra en önemli kısımda. Yazdığımız fonksiyonları birşetirip (eski adıyla) task oluşturmada.

1//browser_sync ve watchFiles fonksiyonlarımızı paralel olarak bağlayığ değişkene atıyoruz.
2const browser = gulp.parallel(browser_sync, watchFiles);
3 
4//browser ie css'i paralel bir şekilde çalıştırıyoruz.
5exports.default = gulp.parallel(browser, css);

En son haliyle kodumuz şu şekli almakta:

 1const gulp = require('gulp')
 2const browserSync = require('browser-sync').create()
 3const sass = require('gulp-sass')
 4const prefix = require('gulp-autoprefixer')
 5const plumber = require('gulp-plumber')
 6const reload = browserSync.reload
 7const php = require('gulp-connect-php');
 8 
 9function watchFiles() { 
10      gulp.watch('./*.html').on('change', reload);
11      gulp.watch('./*.php').on('change', reload);
12      gulp.watch('./*.php').on('add', reload);
13      gulp.watch('./includes/**/*.php').on('change', reload);
14      gulp.watch('./front/js/*.js').on('change', reload);
15      gulp.watch('./front/scss/**/*.scss', gulp.series(css));
16}
17 
18function browser_sync() {
19      php.server({}, () => browserSync.init({proxy: '127.0.0.1:8000'}));
20}
21 
22function css() {
23      return gulp.src('./front/scss/main.scss')
24      .pipe(plumber([{errorHandler: false}]))
25      .pipe(sass())
26      .pipe(prefix('last 2 versions'))
27      .pipe(gulp.dest('./front/css/'))
28      .pipe(browserSync.stream())
29} 
30 
31const browser = gulp.parallel(browser_sync, watchFiles);
32 
33exports.default = gulp.parallel(browser, css);