Gulp ile tema geliştirmenizi hızlandırın

Başlamadan önce, size bir soru sorayım. Bir WordPress teması (veya gerçekten herhangi bir web sitesi türü) geliştirirken yaptığınız en yaygın görev nedir? Neyi o kadar sık ​​yaparsın ki, kas hafızanda olduğu için farkına bile varmazsın?

Tarayıcıyı yenilersiniz. (Bunu senden beklemiyordum)

Peki ya size bunun otomatikleştirilebileceğini ve bir dosyada değişiklik yaptığınızda tarayıcının kendi kendine otomatik olarak yenilenebileceğini söylesem? Gulp ile bu çok kolay. Ve yalnızca yenilemekle kalmaz, aynı zamanda sass derlemesini, dosya birleştirmeyi, sözdizimi kontrollerini, dağıtımı otomatikleştirebilirsiniz, adını siz koyun.

Bu derste size Gulp'u nasıl kuracağınızı ve tema geliştiricilerin günlük olarak gerçekleştirdiği en yaygın birkaç görevi göstereceğim.

Önkoşullar

Bu eğitimde kullanacağımız tüm bileşenler, tek gereksinim olan Node.js'ye dayanmaktadır. Şaşırtıcı olmayan bir şekilde Node paket yöneticisi veya kısaca NPM adlı bir paket yöneticisi ile birlikte gelir. Düğümü kurun ve ardından düzgün çalıştığından emin olmak için $ npm -v çalıştırın (size sürüm numarasını verecektir).

Tabii ki, WordPress için VVV, HGV, MAMP veya seçtiğiniz başka bir ortam çeşidi olsun, bir çeşit geliştirme ortamına da sahip olmalısınız. WordPress'i çalıştırabiliyorsa, gitmeye hazırsınız.

Ayrıca geliştirmekte olduğunuz tarayıcı için bir canlı yeniden yükleme uzantısına ihtiyacınız olacak.

Ayrıca en azından sass/scss bilgisine sahip olmanız tavsiye edilir (fark sözdizimindedir, bu yüzden birbirinin yerine geçecek adlardan birini seçebilirim)

Not : Bu eğitimin amacı için boş bir Alt Çizgi teması kuracağım, ancak öğrenmek üzere olduğunuz şeyleri mevcut temanıza eklemekten çekinmeyin – herhangi bir zarar veremezsiniz.

gulp nedir

Resmi web sitesi, aslında bir görev yöneticisi olan şey için sadece süslü kelimeler olan akış oluşturma sistemi olduğunu söylüyor. Ve görevlerle , manuel olarak yapmanız gereken ve otomatikleştirilebilecek her şeyi kastediyorum (kod yazmak dışında, bundan kaçınamazsınız). Bir WordPress teması oluştururken yaptığınız en yaygın görevlerden bazıları:

• sass'ı CSS'ye derleyin (eğer kullanıyorsanız)
• Coffeescript'i JavaScript'te derleyin (eğer kullanıyorsanız)
• küçültme, birleştirme veya tüy bırakma (linting, kodun kötü kodlama uygulamaları için kontrol edilmesi işlemidir) CSS ve JavaScript
• görüntüleri optimize et
• dosya ve klasörler oluşturun, silin veya sıkıştırın
• değişiklikler için dosyaları izleyin ve…
• bir dosya değiştirilirse tarayıcıyı yenileyin – en yaygın olarak livereload olarak bilinen bir görev. Güle güle CMD + R .

Daha teknik bir bakış açısından, Gulp bir NPM paketidir (eklentileri destekler), bu da çalışması için Node.js'ye ihtiyaç duyduğu anlamına gelir.

Bower Nedir?

Tıpkı Gulp gibi, Bower (başlangıçta Twitter'da geliştirildi) de ön uç paketlerini ve bağımlılıklarını sizin için yöneten bir NPM paketidir. Önlü paket nedir? jQuery'dir. Çoğu jQuery eklentisi de öyledir – tarayıcıda çalışan ve genellikle bir CSS dosyası (veya daha fazlası) ile birlikte gelen JavaScript kitaplıkları hemen hemen bir ön uç paketidir. Aynı zamanda benim kişisel kalite ölçütümdür; Bir JavaScript kitaplığı aynı zamanda bir NPM paketi ise, genellikle yazarın modern uygulamaları ve yaklaşımları takip ettiği anlamına gelir. Her zaman değil ama sık sık.

Örneğin açılış sayfamızda, jQuery ve Slick (referanslar için) adlı bir kaydırıcı eklentisi (WordPress eklentileriyle karıştırmayın) kullanıyoruz.

Bower'ın çözdüğü sorun mu? Bu kitaplıkların/paketlerin bağımlılıkları ve güncelliği. $ bower update kolayca çalıştırabilirsiniz ve otomatik olarak en son sürümleri getirir. Çünkü bunu önemsiyorum. Ve sen de yapmalısın.

Gulp'u yükleyin

Gulp'un çalışması için iki başlangıç ​​dosyası gerekir: package.json ve gulpfile.js bu yüzden ilkini oluşturan init betiğini çalıştıracağız (ikincisini manuel olarak oluşturmanız gerekecek):

 $ npm init .

Size bir JSON yapılandırmasına dönüştürülecek ve package.json kaydedilecek bir dizi soru soracaktır (bilmiyorsanız veya emin değilseniz enter tuşuna basmanız yeterlidir). Biraz temizlemeden sonra, başlangıç ​​sürümüm şöyle görünüyordu:

 { "name": "Kickstart", "version": "1.0.0", "description": "Underscores, enhanced with Gulp workflow", "main": "gulpfile.js", "author": "Tomaz Zaman <[email protected]>" }

Şimdi, Gulp'un kurulu olmasına ihtiyacımız var, bu nedenle belgelerine göre $ npm install --save-dev gulp çalıştırın.

Şimdi, Gulp yüklendiğine göre, tema kök dizininizde gulpfile.js adlı bir dosya oluşturun ve aşağıdakileri yerleştirin:

 var gulp = require('gulp'); gulp.task('default', function() { });

Gulp'un düzgün şekilde kurulup kurulmadığını test etmek için $ gulp çalıştırın – varsayılan görevi çalıştıracak (şimdilik hiçbir şey yapmıyor), sonra çıkın.

Şimdi, herhangi bir Gulp paketi kurmadan önce, hangi görevleri otomatikleştirmek istediğimizi düşünmemiz gerekiyor:

• Sass kullanıyorum, bu yüzden CSS'yi bundan çıkaracak bir önişlemciye ihtiyacımız var.
• JavaScript'i birden çok dosyaya ayırma eğilimindeyim (netlik ve organizasyon için) ve tek bir küçültülmüş dosya ile bitirmek istiyorum
• JavaScript'imin en iyi uygulamaları takip edip etmediğini bilmek istiyorum
• Ben kod yazarken tarayıcının otomatik olarak yenilenmesini seviyorum.
• Gulp'un hatalar oluştuğunda çalışmaya devam etmesini istiyorum (varsayılan olarak çıkar)

Bunlar temel gereksinimlerdir ve bazıları birden fazla paket gerektirir, örneğin bir dosya değiştiğinde yeniden yüklemeyi tetikleyecek bir izleyiciye ihtiyacınız vardır.

Hepsini tek seferde yükleyelim – şu komutu çalıştırın:

$ npm install —save-dev gulp-plumber gulp-watch gulp-livereload gulp-minify-css gulp-jshint jshint-stylish gulp-uglify gulp-rename gulp-notify gulp-include gulp-sass


(Bu paketleri daha önce duymadıysanız merak etmeyin birazdan netleşecek)

Gulp'u yapılandır

Bu öğreticinin geri kalanını harcayacağımız yer olan gulpfile.js açın. En üstte, önceki adımda kurduğumuz tüm paketlere ihtiyacımız var, bu yüzden şunu yapıştırın:

 var gulp = require( 'gulp' ), plumber = require( 'gulp-plumber' ), watch = require( 'gulp-watch' ), livereload = require( 'gulp-livereload' ), minifycss = require( 'gulp-minify-css' ), jshint = require( 'gulp-jshint' ), stylish = require( 'jshint-stylish' ), uglify = require( 'gulp-uglify' ), rename = require( 'gulp-rename' ), notify = require( 'gulp-notify' ), include = require( 'gulp-include' ), sass = require( 'gulp-sass' );

Ardından, varsayılan hata işleyiciyi tanımlamanın zamanı geldi ( gulp-plumber buna bağlıdır):

 var onError = function( err ) { console.log( 'An error occurred:', err.message ); this.emit( 'end' ); }

Ve şimdi, nihayet, sass'ı normal CSS'de derleyecek olan ilk görevimiz (hala elle yazmıyorsunuz değil mi?):

 gulp.task( 'scss', function() { return gulp.src( './scss/style.scss' ) .pipe( plumber( { errorHandler: onError } ) ) .pipe( sass() ) .pipe( gulp.dest( '.' ) ) .pipe( minifycss() ) .pipe( rename( { suffix: '.min' } ) ) .pipe( gulp.dest( '.' ) ) .pipe( livereload() ); } );

Not : Borunun ne yaptığını bilmiyorsanız endişelenmeyin, dahili olarak bu, veri akışı için bir işlevdir (bizim vaka dosyalarımızda), her adımda bu veriler üzerinde belirli işlemleri gerçekleştirirken.

Biraz önce tanımladığımız bu göreve bakalım; İlk olarak style.scss , tesisatçıya kaydettirmesini (sass'ımızın sözdizimi hataları olması durumunda) sonra sass() ile normal CSS'de derlemesini ve son olarak da mevcut dizine yazmasını söylüyoruz. Orada durabilirken, – eğitim amaçlı – birkaç ekstra adım ekliyorum; style.css dosyasını kaydettikten sonra bir minifikatör aracılığıyla iletir, style.min.css olarak yeniden adlandırır, kaydeder ve sonunda tarayıcıyı yeniden yükler.

Birkaç ay öncesine kadar, şımarık derleme için Compass kullanıyordum, ama bu gerçekten yavaş, bu yüzden LibSass'a geçtim – delicesine hızlı ama biraz hatalı bir seçenek. Yukarıdaki gulp komutuyla otomatik olarak yüklendiği için endişelenmenize gerek yok, yani herhangi bir hata görmüyorsanız zaten düzgün çalışıyor.

---

Bu görevin çalışıp çalışmadığını test etmeden önce, aşağıdaki örnek içeriğe sahip /scss/style.scss dosyasına ihtiyacımız var:

 $color: #36A9E1; body { background: $color; }

Şimdi, hakikat anı. $ gulp scss çalıştırın ve kök klasörünüzde iki dosya oluşturma görevinizi görmelisiniz: style.css ve style.min.css . Kaldırılan tüm boşlukları ve yorumları görmek için ikincisini açın – WordPress'te hangisini kuyruğa aldığınız, sunucuda küçültme yapıp yapmadığınıza bağlıdır.

Muhtemelen bir sass dosyasını her güncellediğinizde bu görevi çalıştırmak istemezsiniz, bu yüzden watch görevini ayarlayacağız:

 gulp.task( 'watch', function() { livereload.listen(); gulp.watch( './scss/**/*.scss', [ 'scss' ] ); gulp.watch( './**/*.php' ).on( 'change', function( file ) { livereload.changed( file ); } ); } );

Son adım olarak, varsayılan görevi şöyle görünecek şekilde değiştirin:

 gulp.task( 'default', [ 'scss', 'watch' ], function() { } );

Köşeli parantez içindeki iki görevi fark ettiniz mi? Bunlara bağımlı görevler denir ve çağrıldıkları görev yürütülmeden önce çalışır.

Her şeyin düzgün çalışıp çalışmadığını test etmek için $ gulp gulp komutunu çalıştırın ( CTRL + C tuşlarına basarak çıkana kadar çalışmaya devam eder), WordPress sitesini açın ve Livereload uzantısını açtığınızdan emin olun. Daha önce oluşturduğumuz örnek css dosyasını açın, rengi #78A30D olarak değiştirin ve dosyayı kaydedin. Sayfa yenilenmeden arka planınız maviden yeşile döndüyse, kendinize arkaya dokunun, aferin!

Not : Bu öğreticinin artık olmaması için JavaScript işlemeyi kasıtlı olarak dışarıda bıraktım. Ama korkmayın, buna dahil bir öz oluşturdum.

Bower'dan ne haber?

Normalize.css'nin sass versiyonunu Bower üzerinden yükleyelim. Gulp'ta olduğu gibi, tema kök dizininize şu komutu girerek projeyi başlatmanız gerekir:

 $ bower init .

Yine, birkaç soru, hepsinden enter tuşuna basabilir ve oluşturulan bower.json düzenleyebilirsiniz. İşte benimki şöyle görünüyor:

 { "name": "Kickstart", "version": "1.0.0", "authors": [ "Tomaz Zaman <[email protected]>" ], "description": "Underscores + Gulp + Bower", "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ] }

Ardından Normalize'ı yükleyin:

 $ bower install --save-dev normalize-scss

Ve yeni yüklenen dosyayı ana sass stil sayfanıza ( scss/style.scss ) içe aktarın, böylece şöyle görünecek:

 @import "../bower_components/normalize-scss/_normalize.scss"; $color: #36A9E1; body { background: $color; }

Hâlâ Gulp çalışıyorsa, onu hemen çalışırken, yeni sass'ı işleyerek ve yeni style.css oluşturarak görmelisiniz. Değilse, $ gulp çalıştırın ve sihrin gerçekleştiğini görün.

Çözüm

İlk başta karmaşık görünebilir, ancak bu tür bir iş akışı yalnızca WordPress tema geliştirmenin değil, genel olarak her türlü ön uç geliştirmenin geleceğidir.

Geliştirme iş akışlarını önemli ölçüde hızlandırmak için otomasyonun gücünden yararlanan birçok tema yazarı var ve başlamak için ihtiyacınız olan tek şey bu eğitim. Yani mazeret yok – yap