Browsersync ile iş akışınız otomatik olarak
İş akışım konusunda çok özelim. Bir şeyleri belirli şekillerde seviyorum. Kuru – Kendinizi tekrarlama, çalışma şeklim arkasındaki temel felsefe haline geldi. Bir şey kaba bir ödev gibi görünüyorsa, yaptığım bir şey, tekrar tekrar, onu otomatikleştirmek için çalışacağım. Neyse ki, WordPress otomasyon araçları ve komut dosyaları birkaç görevi optimize etmenizi sağlar. Otomatikten sonra, her şey kolaylaşır ve hatalardan kurtulur. Daha az modüler bir kodla, her zaman zor olan manuel çalışma çok zaman gerektirir ve bana çok fazla acı verir.
En sıkıcı sorunlardan biri, temanızda veya eklentinizde her şeyi değiştirdiğinizde tarayıcınıza ödünç vermektir. Bu yazıda, BrowseryNC kullanarak WordPress’te senkronize tarayıcı testinde zaman kazanmanızı tanıtacağım. Bu makalenin sonunda, tarayıcı testinizi otomatikleştirmek, diğer cihazlarla senkronize etmek ve geliştirme/evre sunucusuna herhangi bir dosya yüklemek zorunda kalmadan yerel geliştirme sitelerinizi çevrimiçi olarak paylaşmak için pratik bilgilerle donatılacaksınız. Tarayıcı ile Otomatik Tarayıcı Testi
Ayrıca, tarayıcı her sayfaya JavaScript dosyaları enjekte edin. Bu dosyanın amacı, tarayıcı kodunuzdaki veya eyleminizdeki değişiklikleri görmek için sunucular ve istemcilerle etkileşim kurmaktır. Herhangi bir değişiklik algılarken, sayfayı doğrudan yükledi. Browync, aşağıdaki şeylerle ilgili bana yardımcı olan etkileyici tarayıcı özelliklerinden oluşan bir koleksiyona sahiptir: Doğrudan Yeniden Yükleme: Çeşitli tarayıcılarda senkronize test, tarayıcının en önemli özellikleri olabilir. Kodunuzdaki ve sayfanızdaki tüm değişiklikler otomatik olarak yeniden yüklenir. Tüm tarayıcıları ve cihazları yeniden yükleme, benzer özellikleri tek bir tıklamada kaydırma, tıklama, senkronize formu girin vb. İle test etmeme yardımcı olur.
Enjeksiyon CSS: BrowseryNC’nin ana işlevlerinden biri, şu anda CSS dizininizde bulunan tüm CSS dosyalarını görmektir. Ardından, değişiklik yapıldığında, herhangi bir web sayfasının yüklenmesine izin vermeden bağlı tüm tarayıcıları günceller.
İyi etkileşime giren senkronizasyon: Bu, tüm değişikliklerin tüm tarayıcılara ve cihazlara tek bir şekilde yansıtıldığı anlamına gelir.
Tünelleme: Herkesin sürecinde bulunan bir web sitesini görüntülemek, ilk günden itibaren tarayıcı tarafından desteklenen bir özelliktir. Portu değiştirin ve tüneli rastgele genel URL (tarayıcı tarafından sağlanan) aracılığıyla ayarlayın. Bu, birkaç cihazda test etmek ve takım arkadaşlarınızla dakikalar içinde paylaşmak için iyi bir fırsat sağlar.
Daha yavaş bir bağlantı düşünerek geliştirin: İnternet hızı, küresel olarak değişebilen bir faktördür ve üzerinde hiçbir kontrolünüz yoktur. Bu nedenle, sitenizin performansının daha yavaş internet hızında nasıl olduğunu bulmak için Browsersync, site bağlantınızın hızını sınırlamak için kullanabileceğiniz özelliklere sahiptir.
Üçüncü taraf araçları: Browsersync, Gulp ve Grunt gibi birçok görev koşucusuyla kolayca entegre olabilir. Ayrıca, tüm işletim sistemleriyle iyi çalışır.
BrowseryNC, birkaç cihazdaki siteleri senkronize edebilir, kaydırabilir, tıklatabilir, giriş girişi ve tümü. Çok havalı! Varsayılan Browsersync eklentisini WordPress projenize yüklemek için tarayıcı ayarlarını yükleme aşağıdaki adımları izleyin: Adım #1: Nodejs & NPM Browsersync’i yükleme bir NPM paketidir ve Node.js’nin yüklenmesini gerektirir. Daha önce yüklediyseniz, aşağıdaki komutla kontrol edin: düğüm -v
# V7.10.0
NPM -V # 4.2.0 Adım # 2: Bir sonraki tarayıcıyı yükleyin, Terminalinize aşağıdaki komutu yazarak BrowseryNC’yi küresel olarak yükleyeceksiniz.
NPM Install -g tarayıcı -sync tüm tarayıcı dosyalarını indirecek ve projeniz için kullanılabilir olacak şekilde küresel olarak yükleyecektir. Ayarları tamamlamanın başarısını onaylamak için, terminal türünüzde: Tarayıcı -Sürümünün Senkronizasyonu
Bunu yaparak, yazma sırasında en son olan BrowseryNC sürüm 2.18.12 gibi bir yanıt alacaksınız.
Adım #3: Bir komut satırına sahip bir browserync kullanarak, komut satırınızla tarayıcı ayarlarını da kullanabilirsiniz. Aşağıda çalıştırılabilecek bir komut koleksiyonu: $ BAŞLAT SYTRANTION tarayıcısını
$ tarayıcı-sync reload http protokolü aracılığıyla yeniden yükleme olaylarını gönder
$ Tarayıcı Senkronizasyon Tarifi [Adı] Adım #4 için dosya üretin: Tarayıcı için herhangi bir yardım bulmak için komut satırında yardım edin, aşağıdaki komutu yazın: $ Browser-Synchronization -Help Projenizdeki bu komutu aşağıdaki gibi kullanabilirsiniz: # Başlat komutu için yardım alın
$ tarayıcı-synchronization başlangıç yararı
# Yalnızca tarif siparişleri için yardım alın
$ Tarayıcı senkronizasyon reçete-help Adım #5: tarayıcı-sync browser-sync komutu başlatmaya başlar “-” öncesinde bir dizi eylemi destekler. Tarayıcıdan en iyisini almak için bu argümanların bir kısmını ekleyebilirsiniz. Aşağıda eksik bir liste verilmiştir. -Server, -s yerel bir sunucu çalıştırın (CWD’nizi web kökü olarak kullanarak)
—savestatic, -ss dizininden statik dosyalar sunmak için
-Port kullanılacak bağlantı noktasını belirleyin
-Proxy, -p proxy sunucusu
–WS Proxy Modu -Activeate Proxy WebSocket
-Browser, -b otomatik olarak hangi tarayıcıyı açılacağını seçin
-Files, -f Dosya Yolu İzlenecek
-Inde Dizin sayfaları olarak hangi dosyaların kullanılacağını belirleyin
-Plugins Yükleme Tarayıcı Eklentileri
-Estansmanlar Dosya Uzatma Geri Alımını Belirleyin
-StartPath Açılan tarayıcının ilk yolu belirleyin
-Https yerel gelişim için SSL’yi etkinleştirin
-Directory sunucu için bir dizin listesi görüntüler
-XIP Mide Domain XIP.IO’yu kullanın
-Tünnel genel url kullanın
-Open Hangi URL’nin otomatik olarak açıldığını seçin (yerel, harici veya tünel) veya URL verir
-Cors her isteğe erişim için erişim ekler
-Config, -c Yapılandırma dosyasına giden yolu belirleyin
-Kullanılacak ana bilgisayarın adını belirleyin
-Lovevel Logger’ın çıkış seviyesini ayarlayın (sessiz, bilgi veya hata ayıklama)
Dosya değişikliklerini takiben yeniden yükleme olayını ertelemek için milisaniye cinsinden reload gecikme süresi
-Tarayıcı: Yeniden Yükleme olaylarının bağlı istemcilere yayılabileceği frekansları sınırlandırır
-İi-port Kullanılacak kullanıcı arayüzünün bağlantı noktasını belirleyin
-WatchEvents hangi dosyaların yanıtlanacağını belirler
-NO-NOTIFY Tarayıcıdaki bildirim öğesini devre dışı bırakın
—No-open yeni bir tarayıcı penceresi açmayın
-Çevrimiçi Çevrimdışı Kullanmaya Zorlanmadı
–no-ui kullanıcı arayüzünü başlatmayın
-Ghost-Mode Deactivate Hayalet Modu
-Noject-Changes her dosya değişikliğini yeniden yükleyin
-Teload-on-restart yeniden başlattıktan sonra tüm tarayıcıları otomatik olarak yeniden yüklemeyin, size bazı yararlı örneklerle nasıl kullanabileceğinizi göstereyim.
Adım #6: Bir BrowseryNC Çalıştırma Eminim şimdi tarayıcı ve nasıl çalıştığı hakkında iyi bir fikriniz var. Şimdi gerçek işlem komutlarını tanımlayalım ve nasıl çalıştığını görelim. Browsersync’in statik bir web sitesi için bir sunucu oluşturduğunu ve dinamik siteler için bir vekil olarak kullanılabileceğinden bahsettim. Bu nedenle, bu her biri için ayrı komutları tanımlar. Statik web sitesi Statik bir site geliştirirseniz, Site Proje Klasörünü açmanız ve kök klasöründe bu komutu terminalinizde çalıştırmanız yeterlidir. Tarayıcının senkronizasyonu -server -files “css/*. Css” “css/*. Css” anlamına gelir. Tarayıcının senkronizasyonu, burada başlangıç -server -files “**/*” Burada, **/*tüm dizin ve içindeki tüm dosyalar anlamına gelir. Dinamik web sitesi WordPress’in geliştirilmesiyle, dinamik sitenizi (örneğin Desktopserver, MAMP, VVV, vb.) Çalışan bir sunucunuz var – burada BrowseryNc’i proxy olarak kullanabilirsiniz. Diyelim ki böyle bir site için bir browserync başlatmak için local.dev adlı yerel bir siteniz var, aşağıdaki komutu çalıştırın: tarayıcının senkronizasyonu -proxy “local.dev” -files “**/*” ve tarayıcı.
Adım #7: Tüneller Daha önce de belirttiğim gibi, Browsersync, yerel geliştirme sitelerini doğrudan kendi bilgisayarınızdan internet üzerinden takım arkadaşlarınızla paylaşmanıza olanak tanır. Tarayıcıdan tünel seçeneği burada rol oynuyor. Bir tarayıcıya her başlattığınızda, aşağıdakilerden “-Tunnel” argümanını şöyle bir şekilde girin: tarayıcının -proxy “local.dev” -files “**/*” -Tünnel, bu komutu çalıştıran aşağıdaki diziyi verecektir. Bilgi: URL Yerel: Bu, değişikliğiniz için yüklemeye devam eden yerel ana bilgisayarınızın düzenli bir URL’sidir.
Harici URL: Sitemi diğer bir dizi cihazda test etmek için kullandığım yerel bir Wi-Fi ağına erişebileceğiniz URL.
Tünel URL’si: Dünyanın dört bir yanındaki takım arkadaşlarınızla herkese açık olarak paylaşabileceğiniz URL ve sahneleme sunucusunda olduğu gibi yerel sitenizi bilgisayarınızda görebilirler.
UI: Bu, tarayıcıyı yapılandırmak için varsayılan bir kullanıcı arayüzüdür.
Harici kullanıcı arayüzü: Varsayılan kullanıcı arayüzünü herhangi bir yerel ağda ayarlamak için bu harici bağlantıyı kullanın.
Tarayıcı Senkronizasyon Arayüzü UI tarayıcı bağlantısını tıklayın ve yeni tarayıcı penceresine yönlendirileceksiniz (İlginç İpuçları: Hemen açmak için terminaldeki bağlantıyı tıklarken Mac’teki komutu basılı tutabilirsiniz). Burada yapılandırılabilecek çeşitli seçenekler bulursunuz. Tek yapmanız gereken sol taraf bıçağı tıklamak ve doğru ayarlamaktır.
