Webapps tasarımı için resonable bir iş akışı nedir?


9

Önemli bir web geliştirme yaptığımdan beri bir süredir ve en son uygulamalardan yararlanmak istiyorum, ancak her şeyi dahil etmek için iş akışını görselleştirmek için mücadele ediyorum.

İşte kullanmak istediğim şey:

  • CakePHP çerçevesi
  • jsmin (JavaScript Küçült)
  • SASS (Senkronize Olarak Harika Stil Sayfaları)
  • Git

CakePHP'nin:

Oldukça açıklayıcı, değişiklikler yapın ve kaynağı güncelleyin.

JSMin'i:

Bir betiği değiştirdiğinizde, yeni küçültülmüş kodu çıkarmak için el ile jsmin çalıştırıyor musunuz, yoksa değişen javascript dosyalarının jsmin çıktılarını otomatik olarak üreten bir ön işleme kanca çalıştırmak daha iyi olur. Taahhüt kancalarını uygulama konusunda hiçbir bilgim olmadığını varsayalım.

SUKDÖ'nün:

SASS'ın sunduğu şeylerden gerçekten hoşlanıyorum, ancak SASS kodunun tarayıcılar tarafından varsayılan olarak desteklenmediğinin de farkındayım, bu yüzden bir noktada SASS kodunun normal CSS'ye dönüştürülmesi gerekiyor. Bu iş akışında hangi noktada yapılır?

Git

Kabul etmek için dehşete kapıldım, ancak son kez önemli bir web geliştirme yaptım, SCM kaynak kontrolünü kullanmadım (IE, kaynak kontrolünü kullandım ama yedeklerle çok ayrıntılı bir değişiklik günlüğünden oluşuyordu).

O zamandan beri Git'i (ayrıca cıva ve SVN'yi) masaüstü geliştirme için kullanma konusunda çok fazla deneyimim oldu, ancak web geliştirme için en iyi nasıl uygulanacağını merak ediyorum.

Değişiklikleri doğrudan üretim sunucusuna gönderebilmem için web sunucusunda uzak bir depo uygulamak yaygın bir uygulamadır mu, yoksa yalnızca değiştirilen dosyaları üretim sunucusuna yüklemeyi kolaylaştıran bazı çapraz platform (windows / linux) aracı var mı? . Uzak bir depo uygulamak kolay hale web hosting şirketleri var, ben SSH erişim, vb gerekiyor mu ...

Zaten ayrı bir uzaktan izleme şubesi ile uzak bir depo ile kendi test sunucumda bunu nasıl yapacağımı biliyorum ama daha önce bir uzaktan üretim web hosting sunucusunda hiç yapmadım, bu yüzden henüz seçeneklerin farkında değilim.

Ekstra:

Bir sayfada kullanılan ayrı javascript dosyaları, sayfa başına gereken dosya indirme sayısını sınırlamak için üretim sunucusundaki her sayfa için tek bir dosya halinde derlenmiş bir javascript çerçevesi uygulamayı düşünüyordum.

Böyle bir şey zaten var mı? Vahşi doğada kullanabileceğim ve katkıda bulunabileceğim benzer bir şey uygulayan bir açık kaynak projesi var mı?

Paranoyak web devs performans hakkında (ve bir web sitesinde dosya isteklerinin sayısı performans için büyük bir hit olduğu gerçeği) göz önünde bulundurarak net zaten bu sorunu ele almış bazı sihirbaz hacker olduğunu tahmin ediyorum.

Yanıtlar:


2

Google'ın Apache için PageSpeed ​​uzantısını kontrol edebilirsiniz : afaik, Javascript ve CSS'yi otomatik olarak toplama ve küçültme seçeneği vardır ve önbellekleme ile birlikte, bu, yayınınızın sonunda aradığınız şeyle uyumludur.


1
Harika, tüm bunların bir Apache modülü ile yapılabileceğini fark etmedim. Javascript / css minimizasyonu, javascript / css birleşimi ve diğer isteğe bağlı performans iyileştirmeleri. Bazı Google'lardan sonra Dreamhost'un paylaşılan / VPN barındırma hizmeti sağladığını bile öğrendim. Webmasters.stackexchange.com veya stackoverflow.com'da daha fazla bilgi bulunmamasına şaşırdım.
Evan Plaice

5

JSMin'i

Bir ton JS'niz yoksa, kaydet tuşuna her bastığınızda küçültülecek bir şey ayarlayabilirsiniz. Çok fazla JS'niz varsa, dağıtım işleminizin bir parçası olun (aşağıdaki Git'e bakın).

SUKDÖ'nün

Pusula Çerçevesini kullanın . SASS, ayrıca SASS dizininizi "izleyen" ve her kaydettiğinizde dosyaları CSS'de (isterseniz küçültülmüş CSS dahil) derleyen küçük bir komut dosyası içerir. RoR düşünülerek oluşturulmuştur, ancak bir Pusula yapılandırma dosyası oluşturarak ve "pusula izleme" komutunu çalıştırarak herhangi bir web çerçevesiyle kolayca kullanabilirsiniz. Compass ayrıca , Lemonade eklentisi aracılığıyla Blueprint , kullanışlı karışımlar ve otomatik hareketli grafik oluşturma gibi bir çok kullanışlı araç içerir (bir sonraki sürümde Pusula'ya eklenmelidir ).

Git

Sitenin boyutuna / karmaşıklığına bağlı olarak, Capistrano'yu takip etmeyi düşünündağıtım modeli. Capistrano'yu doğrudan CakePHP ile kullanıp kullanamayacağınızdan emin değilsiniz, ama özü şudur: her üretim sunucusunun o anda üretimde çalışan tüm kodu içeren bir "geçerli" klasörü vardır. Her yeni kod dağıtmak istediğinizde, her üretim sunucusuna ssh's içeren bir komut dosyası çalıştırırsınız ve (a) "geçerli" klasörün içeriğini bir yedekleme klasörüne kopyalar (sürüm adı / zaman damgası ile), ( b) Git'ten en son kodu "current" klasörüne kontrol edin ve (c) bu yeni kodu "current" klasöründen sunmaya başlayın. Bu şekilde, gerekirse herhangi bir önceki sürüme geri dönebilir ve hangi revizyonun üretimde olduğunu tam olarak anlayabilirsiniz. Capistrano ayrıca dağıtım işleminin bir parçası olarak JS / CSS minifaction,

Ekstra

Evet, bir grup var. "CSS / JS concat" gibi bir şey için Google. İşte CakePHP: Asset Packer için bulduğum hızlı bir tane .


Giriş için çok teşekkürler. Compass Framework ile gördüklerimi gerçekten çok seviyorum. Keşke sadece PHP'de dağıtmanın bir yolunu bilseydim. Etrafta dolaştım ama bir alternatif bulamıyorum. Capistrano da çok ilginç görünüyor ama pahalı ve kırılgan dosya kopyalama modeli yerine sadece ssh kullanarak tüm uzak sunuculardaki git istemcisine bir testte çalıştığını kontrol ettikten sonra hızlı bir 'git pull --rebase' yapmasını söyledim önce sunucu.
Evan Plaice

(devamı) Varlık paketleyicisi de çok ilginç görünüyor. Diğer cevabını seninkinden seçmem tek nedeni, işlemin sunucunun kendisinde yapıldığı tek bir çekimde yer almasıydı (bu yüzden fazladan komut dosyasına gerek yoktu). Keşke Sayfa Hızı görmek kolayca statik içerik önbelleğe alma ve / veya CDN kullanarak ele alınmaktadır statik içeriğin ilave işleme (edilmektedir olumsuz Gerçekten cevap değerli bilgiler bir yeri vardır çünkü 2 kabul isterdim..
Evan Plaice

Compass çerçevesini PHP ile "dağıtmazsınız". Kod yazarken çalıştırırsınız, kaydet tuşuna her bastığınızda CSS dosyalarınızı derler ve gerçekte konuşlandırılan CSS dosyalarıdır. Pusulayı "çalıştırmak" için önce yapılandırma dosyanızı (compass.rb) oluşturmanız gerekir - komut satırı seçeneklerini oluşturmak için bunu kullanın: jsfiddle.net/chriseppstein/PG46q/3 . Yapılandırma dosyası kurulumunu tüm yollarınızla yaptıktan sonra, yapılandırma dosyasıyla aynı klasörde "pusula saati" ni çalıştırmanız yeterlidir ve kaydet tuşuna her bastığınızda pusula SASS'ınızı yeniden derlemeye başlar. Bazı yan projelerde deneyin: ÇOK kolay ve hızlı.
Yevgeniy Brikman

Ayrıca, bildiğim kadarıyla, Capistrano fazla kopyalama yapmıyor. Her dağıttığınızda, en son kodu denetler ve klasör adlarını değiştirir. Avantajı, klasör adlarını tekrar değiştirerek her zaman önceki bir sürüme geri dönebilmenizdir.
Yevgeniy Brikman

PHP içinde nasıl çalıştırabileceği ve çalıştırabileceği hakkında bir makale buldum. Ruby projesinin dışında kullanmak beklediğimden daha kolay. Capistrano hakkındaki son yorumumu karala. Birden fazla sunucuya dağıtılmış bir komut göndermek için kullanıldığını düşündüm. Uzak sunuculara ssh erişimim varsa, üretim dalından en son değişiklikleri çekmek için bir git istemcisini bırakmayı tercih ederim. IMHO, klasör değiştirme klasörleri kötü bir fikirdir. Sürüm döngüsünde revizyonları etiketlemeyi ve şu anki sorun varsa önceki bir etiketi kontrol etmeyi çok isterim.
Evan Plaice
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.