Name: Tremplin Numérique
Price range: $$$

biliyordum GruntJS hiç kullanmadım ama bir geliştiriciden haber almam gerekirdi Symfony'nin bana kütleyi ver ki bu çözüme bakayım. İlk önce değiştir asetik yılından beri GruntJS benim için projelerimin işe yaraması için bir çözümdü Symfony'nin ile HHVM. Şimdi sunucu PHP de Facebook ile mükemmel çalışır asetik ama kullanmaya devam etmek için gittikçe daha az neden buluyorum asetik. Son olarak, kullanımı hırıltı, dayalı bir eklenti Düğüm JS, çoğu geliştiriciyi kullanmaya yönlendirir Çardak, bağımlılıkları yönetmek için başka bir eklenti. Hakkında konuşacağız Çardak daha düşük. Artılarına ve eksilerine hızlıca bir göz atalım.

Dikkat ! Uygulamanızı taşımaya başlamadan önce, kodunuzu sürümlendirmenizi ve bazı testler yapmanızı tavsiye ederim. Bu uzun vadeli göreve başlamadan önce tüm makaleyi okumanız şiddetle tavsiye edilir.

özet

Giriş

Assetic, yanlış anlaşılan arkadaş

Benim açımdan, bunu düşünüyorumasetik yanlış anlaşılmakta ve kötüye kullanılmaktadır. Sana düşüncelerimi açıklayacağım. (Ayrıca, Manuel Klein'ın geri bildirimi için teşekkürler, benim açımdan bir yanlış anlaşılmanın ardından bu makaleyi düzelttim).

Fayda

Kullanımıasetik " komutunu her başlattığınızda oluşturulan JS ve CSS kaynaklarının adı değiştiği için kaynaklardaki önbelleği iptal etmenize olanak tanır.varlık:döküm”. Belirli bir avantaj!

dezavantajları

Assetic, kaynakların nasıl oluşturulacağını yapılandırmak için birkaç seçenek sunar.
LESS gibi egzotik kaynaklar oluşturmak için PHP paketlerini kurmak gerekir. PHP kodu içinde yüklü satıcıları bu görev yalnızca istemci için yararlıdır. Sunucu için hayır. Ayrıca proje sayınızı da arttırır.
kod PHP içinde gereklidir şablonları Dal utilisant asetik ya da hemen hepsi. Oysa Grunt'ta derlenen kaynak, ona verdiğiniz adla çağrılacaktır.

Assetic'i şablonlarınızda gerçekten kullanın

sık sık görüyorum şablonları Dal Karşılaştığım, bazen bağlantılı kaynaklar asetik, bazen aracılığıyla varlıklar de Senfoni.

# Assetic'i kullanma
@NamespaceMyBundle/Resources/public/css/main.css
# Kullanılmayan Assetic, Varlıklar kullanılarak
/bundles/namespacemy/css/main.css

İlk durumda, asetik gerçekten geçerlidir. İkinci durumda, asetik kullanılmaması için tamamen gizlenmiştir. varlıklar de Symfony'nin. Kullanımı varlıklar en azından JS ve CSS kaynaklarına erişim için bence de bir hata. parantez sonu...

Sooo esnek derleyicisi Grunt JS!

GruntJS dayalı node.js. Dosya birleştirme gibi birçok eylemi gerçekleştirmek için modülleri kullanan istemci tarafı bir araçtır. küçültülmesi, görüntü sıkıştırma, LESS derlemesi, TypeScript… Farklı olarak asetik, belirli yapılandırmalar kurmanız gerekecek, ancak bu ilk yatırımın karşılığını alacağından ve sonunda olduğundan çok daha hızlı olacağından emin olabilirsiniz.asetik.

Kaynakların besteci.jsonu olan Bower'a giriş

GruntJS iyi ve aynı segmente yerleştirilmek üzere geliyorasetik. Ama kullandığın sürece node.js, aynı zamanda kullanım Çardak ! Bu bir bağımlılık yöneticisidir. Basitçe söylemek gerekirse, ihtiyacınız olan kaynakları "böyle bir sürümde böyle bir kitaplık" olarak tanımlarsınız ve Çardak istediğiniz sürümü elde etmekle ilgilenir. Tabii ki, tıpkı composer.json için PHP, sürüm aralıkları ekleyebilirsiniz. 3.3 sürümünde bir kitaplık istiyorsanız., *Çardak size mevcut en son sürümü verecektir. Bu kaynakları kolayca güncellemek için bir çözüm. Standart projelerimizde yinelenen bir sorun çünkü bir sürümü indirme ve daha sonra asla güncellememe eğilimimiz var (olmuştur!). Bazen çok yararlı olan küçük güncellemelere sahip değildik.

Teknik olarak, Çardak bower.json dosyasını kullanır. Sözdizimi çok basittir. Onsuz devam edebilecek olsanız bile onu kullanmanızı tavsiye ederim. Kaynaklardan farklı olarak dosyanın sürümlendirilmesi gerekir. Çardak sizin için indirmeye gelecek. Başlamanız için aşağıda size bir örnek vereceğim.

Derlenmiş kaynakların sürümlendirilmesi

Kendi adıma, derlenmiş kaynaklarımı asetik ama ben tam tersini yapmaya karar verdim GruntJS. Yönetmek için kaynaklar olmadan yaptığım için Çardak (bkz. Giriş Çardak), kaynaklarımı derleyeceğim ve huysuzlar. Bu sayede uygulamamı hızlı bir şekilde devreye alabilirim. Bu uygulama hakkında hiç geri bildirim almadım, ancak dağıtım sırasında iki işlem iptal edildiğinden (kaynakların kurtarılması Çardak ve ile derlemek GruntJS), sahip olma ihtiyacının yanı sıra node.js onun makinesinde.

Assetic'i Symfony projemizden çıkarın

asetik kaynakları derlemekten sorumlu varsayılan bileşen olarak seçildi. Her şeye rağmen çıkarılmasının çok kolay olduğunu unutmayın.

Blokları Sil Dal Tip javascript et stil. Gerekli değiller. Kullanmakta olduğunuz dosyaları bir kenara bırakın. Gelecekte, kullanmak istediğiniz dosyalar dosyada tanımlanacaktır. Gruntfile.js. Bunu biraz sonra göreceğiz.

#app/config/config.yml
# Yapılandırmayı assetic'ten kaldırın. Ayrıca config_prod.yml, config_dev.yml ve diğer yüklenen dosyalarda da olacak
aktif:
 hata ayıklama: "%kernel.debug%"
 _denetleyiciyi kullan: yanlış
 Paketler: []
 filtreler:
 css yeniden yazma: ~

#app/AppKernel.php
# AppKernel'den satırı silerek AsseticBundle'ı yüklemeyi durdurun
...
yeni SymfonyBundleAsseticBundleAsseticBundle()
...

# besteci.json
# Varlık paketini kaldır
...
“symfony/assetic paketi”: “~2.3”
...

İşte, devre dışı bıraktın asetik küresel olarak. Bu şekilde, artık komutu bulmayı beklemeyin varlık:döküm et aktif: izle.

Grunt JS projemizde nasıl çalışacak?

Projemizi üç dosya ile yapılandırmamız gerekecek:

paket.json eklentileri kurmamıza izin verecek node.js (GruntJS ve katkıları);
bower.json kaynaklarımızı derlemek için çözülecek bağımlılıkları raporlamak;
Gruntfile.js en çok üzerinde çalışacağınız. Projenizin bir kısmını veya tamamını derlemek için gerçekleştirilebilecek ve/veya gerçekleştirilebilecek tüm eylemleri içerecektir.

package.json Grunt JS'yi yüklemek için

{
“bağımlılıklar”{
"homurtu": “^0.4.5”,
“katkısız homurdanma”: “~0.11.0”,
“homurtu-katkı-çirkinleştirme”: “^0.6.0”,
“yük-homurdanma-görevleri”: “^0.6.0”
},
“geliştirme Bağımlılıkları”{
"homurtu": “^0.4.5”
}
}

İlk olarak, bu içeriği kullanın. Kurulumunu gerektirir GruntJS ve katkılardan ikisi (grunt-katkısız-az et homurdanma-katkı-çirkinleştirme) JavaScript dosyalarınızı ve dosyalarınızı derlemenizi sağlar Daha az.

bağımlılıklarımı çözmek için bower.json (bootstrap, font-awesome, …)

{
"görmezden gelmek": [
“**/.*”,
"node_modules",
"bower_bileşenleri",
" Ölçek ",
"test yapmak"
],
“bağımlılıklar”{
“önyükleme”: “3.3.*”
}
}

İşte minimal bir dosya. Benim durumumda, 3.3 şubesinin en son sürümünün Çizme atkısı indirilebilir. Varsayılan olarak, bir çardak kurulumu bağımlılıklarınız klasöre yüklenecek bower_bileşenleri. kullanarak .bowerrc hedef klasörü değiştirebilirsiniz. Bower'ın web sitesinde daha fazla bilgi bulabilirsiniz.

1 2	# Bower kullanarak bağımlılıkları kurun $ çardak kurulumu

Gruntfile.js – Her şeyin başladığı yer

Bu gerçeği dosyaya eklemek istediğiniz tüm komutlar ve eylemler Gruntfile.js. Diğer şeylerin yanı sıra, dosyaları derleyebilirsiniz. daha az et şımarıklık, her türlü dosyayı birleştirin, derleyin daktilo ile yazılmış yazı, küçültücü JavaScript dosyaları, resimler ve HTML dosyaları. Ayrıca görüntüleri yeniden boyutlandırabilir ve dosyaları (yazı tipleri gibi) kopyalayabilirsiniz.

Bugün size dosyaları nasıl derleyeceğinizi göstereceğim. .az ve dosyaları küçült . Js. Her gün yaptığım ve bugün şu ya da bu bölümü kolaylıkla kullanmamı sağlayan eylemler çizme atkısı. Hepsini kullanmak yerine çizme atkısı tek ihtiyacın olduğunda glifonlar, özel bir kitaplık üzerinde çalışmak ilginç olabilir.

modül.ihracat= işlev (hırıltı) {
gerektirir("yük homurtu-görevleri")(homurtu);
grunt.initConfig({
az{
dist{
seçenekleri{
sıkıştırmak: gerçek,
yuicompress: gerçek,
optimizasyon: 2
},
Dosyaları{
“web/css/main.css”: [
"bower_components/bootsrap/dist/css/bootstrap.css",
"src/Ad Alanı/MyBundle/Resources/public/css/main.less"
]
}
}
},
çirkinleştirmek{
seçenekleri{
bozmak: yanlış,
kaynak Haritası: gerçek
},
dist{
Dosyaları{
"web/js/main.js": [
'src/Namespace/MyBundle/Resources/public/js/main.js',
]
}
}
}
});
grunt.registTask('varsayılan', ["az", "çirkinleştirmek"]);
};

İşte mükemmel çalışan bir dosya. Ayrıca küçük bir projede kullanıyorum çerçeve Çünkü o bir API. asetik benim durumumda oldukça işe yaramazdı. Bu nedenle, sunucunun dışında bir araç kullanmak ve dağıtım sırasında mükemmel şekilde oluşturulmuş kaynakları sağlamak için onsuz yapmayı tercih ettim.

Gruntfile.js için eylemleri açıklayalım

Önceki dosyada, şu iki katkıyı yapılandırdım: GruntJS (_az _ve çirkinleştirmek) sayesinde kurduğum paket.json. Eklentilerin birbirinden kolayca ayırt edildiğini fark edeceksiniz. Uzatma durumunu ele alalım az.

Her katkı hırıltı kullanacağınız katkı için tanımlanan bir anahtar kelime ile bildirilmelidir. Örnek, için grunt-katkısız-az anahtar kelime az. Bu kısımda tanımlayabileceğimiz hedefler. terim altında hedef anlamak alt bölüm. Somut bir durumda, bir tanımlayabiliriz hedef çizme atkısı aynı isimli kütüphaneyi kaynaktan derlemek için az. Başka bir küme tanımlayabiliriz dist projemizin kaynaklarını derlemek için. Birkaç alt kümenin kullanılması bir zorunluluk değildir, ancak bunları daha sonra kullandığınızda kullanma fırsatına sahip olacaksınız. katkı izle zaman kazanma.

Daha sonra aynı uzantının alt kümelerinin yapısı ISO'dur. Contrario'da her katkının yapısı farklıdır. Standart katkılar genellikle birçok örnekle sunulur. Resmi eklentiler GitHub deposunda mevcuttur.

Örneğimize ve dosyalarımızın derlemesinin yapılandırmasına geri dönelim. .az. Oyunda Dosyaları son dosyaların adını bir anahtar olarak ve bir değer olarak derlenecek bir dizi girdi dosyası ekleriz. Sözdizimi oldukça sezgisel olduğu için daha fazla ayrıntıya gerek olmadığını düşünüyorum.

Katkı çirkinleştirmek JavaScript dosyalarının birleştirilmesi, küçültülmesi ve sıkıştırılması için kullanılan, aynı yapıyı kullanır. Bu durumda, iki katkısını kullanmak oldukça basittir.

Derleme sanatı

Ve şimdi kompozisyonilokaynaklarımız. İle asetik, şu komutu çalıştırıyoruz:

1	php uygulaması/konsol varlığı: dökümü

Şimdi kaldırdık AsseticBundle. Artık bu siparişimiz yok. Bu yüzden eklentimizi şu adresten çalıştıracağız: Düğüm.

hırıltı

Görüyorsunuz, yine de çok karmaşık değil... Bu durumda yürütülecek görevler, profil için verilen görevler olacaktır. Varsayılan. Son satırda tanımlandı.

1	grunt.registTask('varsayılan', ["az", "çirkinleştirmek"]);

Bir profili çok iyi tanımlamış olurdun javascript kim idam etmezdi çirkinleştirmek.

1	grunt.registTask("javascript", ['çirkinleştirmek']);

Komutu çalıştırmanız durumunda hırıltı sonra profil adı ile.

1	homurdanan javascript

Dilediğiniz kadar profil tanımlayabilirsiniz. profilim söz konusu olduğunda javascript, faiz daha az çünkü aşağıdaki aramayı da yapabilirdiniz.

1	homurdanmak çirkinleştirmek

Sonuç

Artık kaynaklarınızı nasıl derleyeceğinizi biliyorsunuz. Tüm incelikleri kavramadıysanız, tarafından sunulan tüm esnekliği hızla takdir edebilmelisiniz. hırıltı göreasetik. Dahası, javascript ve css gibi tipik kaynakların yanı sıra yazı tiplerini, resimleri de işleyebilirsiniz... Beni hızla kendine çeken bir varlık.

gerçek avantajı hırıltı esnekliği, kullanımıdır. hırıltı et Çardak Aralarında Assetic'e bir alternatif somutlaştırıyor. Olmadan Çardak hala çalışabilirsin hırıltı ama deneyim tam olmayacak.

Umarım bu makale, kullanımını kolayca anlamanıza izin verecektir. hırıltı. Cesur ol, neredeyse oradasın!