July 30th, 2023

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);
Yorumlar
Lermiliaminlesy
Привет! Так случилось, что моя двоюродная сестра нашла у Вас интересного мужчину и вышла за него замуж ^_^ Неужели здесь есть красивые люди! ;) Я Изабелла, мне 26 лет. Я работаю моделью, преуспеваю - надеюсь, и вы тоже! Хотя, если вы очень хороши в постели, то вы вне очереди!))) Поставьте лайк мне здесь, плз: <a href=https://bit.ly/42OUc1a>@topsecret7847</a> (если жена рядом, не щелкай! :D) Кстати, секса давно не было, найти достойного очень сложно... И нет! Я не проститутка! Я предпочитаю гармоничные, теплые и надежные отношения. Я вкусно готовлю и не только ;) У меня ученая степень в области маркетинга. Моя фотография: <a href=https://bit.ly/42OUc1a><img src="https://i.ibb.co/hBVyhq4/00131-483565854.png"></a> P.S live:i2JpMMlvzyCGRbRLi4iI P.S Еще обо мне: <a href=http://adeptlenses.org>Ищу достойного мужчину!</a> <a href=http://adyp.es>Ищу достойного мужчину!</a> <a href=http://agathaestilistas.com>Ищу достойного мужчину!</a> 1db94e5
PillsInope
Erectile dysfunction treatments available online from TruePills. Discreet, next day delivery and lowest price guarantee. Viagra is a well-known, branded and common erectile dysfunction (ED) treatment for men. It's available through our Online TruePills service. Trial ED Pack consists of the following ED drugs: Viagra Active Ingredient: Sildenafil 100mg 5 pills Cialis 20mg 5 pills Levitra 20mg 5 pills https://cutt.ly/7wC5m1Id https://70.biqund.com/index/d1?diff=0&utm_source=ogdd&utm_campaign=20823&utm_content=&utm_clickid=sm8goc0ckkwccw0k&aurl=https://true-pill.top/ https://wolomin.praca.gov.pl/be/rynek-pracy/bazy-danych/klasyfikacja-zawodow-i-specjalnosci/wyszukiwarka-opisow-zawodow/-/klasyfikacja_zawodow/zawod/712703?_jobclassificationportlet_WAR_nnkportlet_backUrl=http%3a%2f%2ftrue-pill.top http://ljbnya.3nx.ru/loc.php?url=https://true-pill.top/ http://catalog.data.ug/mn_MN/api/1/util/snippet/api_info.html?resource_id=36b8dad3-d29b-4bbb-9355-f8f94b0d5075&datastore_root_url=https://true-pill.top/ https://manly-pro.ru/bitrix/redirect.php?goto=https://true-pill.top/ Clavix Cardivas Uniclor Lokar Funet Unidene Enacor Vertigo-vomex Alental Cilostazol Vikrol Teamic Co lisinopril Sinvacor Doxyprotect Mapryl Naprofidex Baclon Fluxet Apo-mefenamic Allobenz Wormazol Arketis Optiflox Neorex Dexamethasone Meloflex Ulran Farmemax Clopidogrelum Spirolacton Medorisper Pediacort Fermil Pesatril Izra Lacine Modipin Anol Risedronato
XRumer23tog
Bases for Xrumer https://dims-tudio.ru
solar_aekn
solar panel for mobile home <a href=http://www.larpan-mobi4omes.ru/>http://www.larpan-mobi4omes.ru/</a> .
bkvap
<a href=https://samoylovaoxana.ru/samye-interesnye-ekskyrsii-na-phykete-tailand-2023/>Самые интересные экскурсии на Пхукете, Таиланд 2023</a> или <a href=https://samoylovaoxana.ru/tag/plyazhnyj-sezon/>пляжный сезон</a> <a href=https://samoylovaoxana.ru/tag/otdyh-v-abhazii/>отдых в Абхазии</a> https://samoylovaoxana.ru/tag/gde-otdohnut-v-oktyabre/ Ещё можно узнать: <a href=http://yourdesires.ru/home-and-family/cookery/1143-ananas-polza-i-vred.html>чем полезны консервированные ананасы</a> Лучшие туристические направления
MichaelDaw
SEO-оптимизация сайта SEO — это комплекс действий непосредственно на сайте и вне его, необходимых для повышения позиций ресурса в поисковой органической выдаче Google по релевантным запросам, и как результат — его видимости целевой аудитории. Мы разделяем SEO на два этапа — это SEO-оптимизация и SEO-продвижение. Ведь без технически правильной SEO-оптимизации дальнейшее SEO-продвижение невозможно. При качественном SEO-продвижении, ваш сайт будет находиться на первой странице поисковиков, а значит — получать больше трафика и целевых действий от посетителей. Для сравнения, веб-ресурсы, которые не оптимизируют и не продвигают для поисковых систем, зачастую вообще не отображаются в выдаче и соответственно не имеют органических переходов. При формировании поисковой выдачи по запросу используется сложная формула сортировки, учитывающая десятки параметров. Алгоритмы ранжирования регулярно обновляются, дополняются и модернизируются с единой целью — обеспечить максимально релевантные ответы на запросы пользователей. Точный алгоритм построения выдачи результатов не разглашается работниками поисковиков, сообщаются лишь общие требования и критерии заточенного под SEO ресурса, позволяющие попасть в ТОП (первую десятку результатов). При этом каждый новый апдейт Google ужесточает правила для игроков на рынке маркетинга и добавляет работы SEO-специалистам и владельцам бизнесов. Побеждают сильнейшие — те, кто готов адаптироваться и постоянно работать над веб-ресурсом. Но в качестве вознаграждения — постоянный бесплатный органический трафик, повышение позиций и удержание ТОПа. На практике, без активных работ по поисковой оптимизации и продвижению практически невозможно вывести сайт на первую страницу выдачи в высококонкурентных коммерческих тематиках, даже если его контент и техническая реализация будут идеальными. Продолжить чтение на <a href=https://seoglossary.ru/>Автоматическое продвижение сайта</a>
PillsInope
Erectile dysfunction treatments available online from TruePills. Discreet, next day delivery and lowest price guarantee. Viagra is a well-known, branded and common erectile dysfunction (ED) treatment for men. It's available through our Online TruePills service. Trial ED Pack consists of the following ED drugs: Viagra Active Ingredient: Sildenafil 100mg 5 pills Cialis 20mg 5 pills Levitra 20mg 5 pills https://true-pill.top/ Ermes Farcomethacin Wellbutrin Tramazole
PillsInope
Erectile dysfunction treatments available online from TruePills. Discreet, next day delivery and lowest price guarantee. Viagra is a well-known, branded and common erectile dysfunction (ED) treatment for men. It's available through our Online TruePills service. Trial ED Pack consists of the following ED drugs: Viagra Active Ingredient: Sildenafil 100mg 5 pills Cialis 20mg 5 pills Levitra 20mg 5 pills https://true-pill.top/ Ermes Farcomethacin Wellbutrin Tramazole
PillsInope
Erectile dysfunction treatments available online from TruePills. Discreet, next day delivery and lowest price guarantee. Viagra is a well-known, branded and common erectile dysfunction (ED) treatment for men. It's available through our Online TruePills service. Trial ED Pack consists of the following ED drugs: Viagra Active Ingredient: Sildenafil 100mg 5 pills Cialis 20mg 5 pills Levitra 20mg 5 pills https://true-pill.top/ Ermes Farcomethacin Wellbutrin Tramazole
PillsInope
Erectile dysfunction treatments available online from TruePills. Discreet, next day delivery and lowest price guarantee. Viagra is a well-known, branded and common erectile dysfunction (ED) treatment for men. It's available through our Online TruePills service. Trial ED Pack consists of the following ED drugs: Viagra Active Ingredient: Sildenafil 100mg 5 pills Cialis 20mg 5 pills Levitra 20mg 5 pills https://true-pill.top/ Ermes Farcomethacin Wellbutrin Tramazole
Yorum Yap

Email adresiniz yorumlarda gözükmeyecektir.