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

ES zināju GruntJS nekad to neizmantojot, bet man būtu nācies dzirdēt no izstrādātāja Symfony iedod man masu, lai es aplūkoju šo risinājumu. Pirmkārt, nomainiet Asētisks nominālvērtība GruntJS man bija risinājums, lai mani projekti darbotos Symfony ar HHVM. Tagad serveris PHP de Facebook lieliski strādā ar Asētisks bet es atrodu arvien mazāk iemeslu, lai turpinātu lietot Asētisks. Visbeidzot, izmantošana rukšķēšana, spraudnis, kura pamatā ir Mezgls JS, mudina lielāko daļu izstrādātāju izmantot lapene, vēl viens spraudnis atkarību pārvaldībai. Mēs runāsim par lapene zemāks. Īsi apskatīsim plusus un mīnusus.

Uzmanību! Pirms sākat migrēt savu lietojumprogrammu, iesaku versijas kodu un veikt dažas pārbaudes. Pirms uzsākt šo ilgtermiņa misiju, ļoti ieteicams izlasīt visu rakstu.

kopsavilkums

Ievads

Asētisks, nesaprastais draugs

No savas puses es tā uzskatuAsētisks tiek pārprasts un nepareizi izmantots. Es jums izskaidrošu savas domas. (Turklāt es izlaboju šo rakstu pēc pārpratuma no manas puses, paldies Manuelam Kleinam par atsauksmēm).

Pabalsts

PielietojumsAsētisks ļauj atcelt kešatmiņu resursos, jo ģenerēto JS un CSS resursu nosaukums mainās katru reizi, kad palaižat komandu "assetic:dump”. Zināma priekšrocība!

trūkumi

Assetic piedāvā dažas iespējas, lai konfigurētu resursu ģenerēšanas veidu.
Ir nepieciešams instalēt PHP komplektus, lai radītu eksotiskus resursus, piemēram, MAZĀK. PHP kods ir instalēts Pārdevēji savukārt šis uzdevums ir noderīgs tikai klientam. Nē serverim. Turklāt tas palielina jūsu projekta skaitu.
Kods PHP ir nepieciešams veidnes Saprast utilisant Asētisks vai gandrīz visas. Savukārt, izmantojot Grunt, apkopotais resurss tiks saukts jūsu norādītajā vārdā.

Tiešām izmantojiet Assetic savās veidnēs

Es bieži redzu veidnes Saprast ar kuriem saskaros, resursi, kas dažkārt ir saistīti, izmantojot Asētisks, dažreiz caur aktīvi de Simfonija.

# Izmantojot Assetic
@NamespaceMyBundle/Resources/public/css/main.css
# Nelietots Assetic, izmantojot Assets
/bundles/namespacemy/css/main.css

Pirmajā gadījumā Asētisks tiešām attiecas. Otrajā gadījumā Asētisks ir pilnībā noslēpts, lai neizmantotu aktīvi de Symfony. Pielietojums aktīvi arī manuprāt ir kļūda, vismaz attiecībā uz piekļuvi JS un CSS resursiem. Iekavas beigas...

Grunt JS tik elastīgais kompilators!

GruntJS balstoties uz Node.js. Tas ir klienta puses rīks, kas izmanto moduļus, lai veiktu daudzas darbības, piemēram, failu savienošanu, minimizēšanu, attēlu saspiešana, LESS apkopošana, TypeScript… Atšķirībā no Asētisks, jums būs jāiestata noteiktas konfigurācijas, taču esiet drošs, šis sākotnējais ieguldījums atmaksāsies un galu galā daudz ātrāk nekāAsētisks.

Ievads Bower — resursu komponists.json

GruntJS ir labs un tiks novietots tajā pašā segmentā kāAsētisks. Bet, kamēr jūs lietojat Node.js, kā arī izmantot lapene ! Tas ir atkarības pārvaldnieks. Vienkārši sakot, jūs definējat nepieciešamos resursus, "šāda bibliotēka šādā versijā" un lapene rūpējas par vajadzīgās versijas iegūšanu. Protams, tāpat kā komponists.jsons par PHP, varat pievienot versiju diapazonus. Ja vēlaties bibliotēku versijā 3.3., *Bower nodrošinās jums jaunāko pieejamo versiju. Risinājums šo resursu vienkāršai atjaunināšanai. Atkārtota problēma mūsu standarta projektos, jo mums ir (bija!) tendence lejupielādēt versiju un pēc tam to nekad neatjaunināt. Mums nebija nelielu atjauninājumu, kas dažreiz ir tik noderīgi.

Tehniski, lapene izmanto failu bower.json. Tās sintakse ir ļoti vienkārša. Es aicinu jūs to izmantot, pat ja varat turpināt bez tā. Atšķirībā no resursiem failam ir jābūt versijai lapene nāks lejupielādēt jums. Lai sāktu, es sniegšu jums piemēru.

Apkopoto resursu versijas

No savas puses man bija ieradums neveidot versijas saviem apkopotajiem resursiem Asētisks bet es nolēmu rīkoties pretēji GruntJS. Tā kā es iztieku bez resursiem, ko pārvaldīt lapene (skatiet sadaļu Ievads lapene), apkopošu savus resursus un ķites. Tādā veidā es varu ātri izvietot savu lietojumprogrammu. Man nekad nav bijusi atsauksme par šo praksi, bet man tas šķiet cienījami, jo izvietošanas laikā tiek atceltas divas darbības (resursu atgūšana ar lapene un apkopot ar GruntJS), kā arī nepieciešamība būt Node.js uz viņa mašīnas.

Noņemiet Assetic no mūsu Symfony projekta

Asētisks tika izvēlēts kā noklusējuma komponents, kas atbild par resursu apkopošanu. Jāapzinās, ka, neskatoties uz visu, to ir ļoti viegli noņemt.

Dzēst blokus Saprast Tipa javascript et stilu tabula. Tie nav nepieciešami. Paturiet malā failus, kurus izmantojāt. Nākotnē faili, kurus vēlaties izmantot, tiks definēti failā Gruntfile.js. To mēs redzēsim nedaudz vēlāk.

#app/config/config.yml
# Noņemiet konfigurāciju no assetic. Daži būs arī failos config_prod.yml, config_dev.yml un citos augšupielādētajos failos
asētisks:
 atkļūdošana: “%kernel.debug%”
 use_controller: nepatiess
 komplekti: []
 filtri:
 cssrewrite: ~

#app/AppKernel.php
# Pārtrauciet AsseticBundle ielādi, dzēšot rindu no AppKernel
...
jauns SymfonyBundleAsseticBundleAsseticBundle()
...

# composer.json
# Noņemiet aktīvu komplektu
...
“symfony/assetic-bundle”: “~2.3”
...

Lūk, jūs esat deaktivizējis Asētisks globāli. Tādā veidā vairs negaidiet, ka atradīsit komandu assetic:dump et asētisks: skatīties.

Kā Grunt JS darbosies mūsu projektā?

Mums būs jākonfigurē mūsu projekts ar trim failiem:

pack.json kas ļaus mums instalēt spraudņus Node.js (GruntJS un viņa ieguldījums);
bower.json ziņot par atrisināmajām atkarībām, lai apkopotu mūsu resursus;
Gruntfile.js pie kuras strādāsit visvairāk. Tajā būs ietvertas visas iespējamās un/vai veicamās darbības, lai apkopotu daļu vai visu jūsu projektu.

package.json, lai instalētu Grunt JS

{
"atkarības":{
"kurnēt": “^0.4.5”,
“Gunt-contrib-less”: “~0.11.0”,
“grunt-contrib-uglify”: “^0.6.0”,
“load-grunt-tasks”: “^0.6.0”
},
“Dependencies”:{
"kurnēt": “^0.4.5”
}
}

Pirmkārt, izmantojiet šo saturu. Tas prasa uzstādīšanu GruntJS un iemaksas, no kurām divas (grunt-contrib-less et grunt-contrib-uglify) ļaus jums apkopot JavaScript failus un failus Lesscss.

bower.json, lai atrisinātu manas atkarības (bootstrap, font-awesome,…)

{
"ignorēt": [
“**/.*”,
“node_modules”,
“bower_components”,
" pārbaude ",
"pārbaude"
],
"atkarības":{
"bootstrap": “3.3.*”
}
}

Šeit ir minimāls fails. Manā gadījumā es pieprasīju, lai jaunākā versija 3.3 filiāle Sāknēšanas lejupielādēt. Pēc noklusējuma, kad veicat a paklāja uzstādīšana jūsu atkarības tiks instalētas mapē bower_components. Izmantojot .bowerrc varat mainīt mērķa mapi. Plašāku informāciju varat atrast Bower vietnē.

1 2	# Instalējiet atkarības, izmantojot Bower $ bower uzstādīšana

Gruntfile.js — kur tas viss sākas

Visas komandas un darbības, kuras vēlaties pievienot šim faktam failā Gruntfile.js. Cita starpā varat apkopot failus lesscss et sass, savienot jebkāda veida failus, apkopot TypeScript, samazināt JavaScript faili, attēli, kā arī HTML faili. Varat arī mainīt attēlu izmērus un kopēt failus (piemēram, fontus).

Šodien es tikai parādīšu, kā apkopot failus .mazāk un samazināt failus . Js. Darbības, kuras es veicu katru dienu un kas ļauj man šodien viegli izmantot šo vai citu daļu bootstrap. Tā vietā, lai izmantotu visu bootstrap kad viss, kas jums nepieciešams, ir glifikonus, var būt interesanti strādāt pie pielāgotas bibliotēkas.

moduļi.eksports= funkcija (rukšķēšana) {
pieprasīt('load-grunt-tasks')(grunt);
grunt.initConfig({
mazāk:{
dist:{
iespējas:{
saspiest: patiess,
yuicompress: patiess,
optimizācija: 2
},
faili:{
“web/css/main.css”: [
“bower_components/bootsrap/dist/css/bootstrap.css”,
“src/Namespace/MyBundle/Resources/public/css/main.less”
]
}
}
},
neglīts:{
iespējas:{
mangle: nepatiess,
avota karte: patiess
},
dist:{
faili:{
"web/js/main.js": [
"src/Namespace/MyBundle/Resources/public/js/main.js",
]
}
}
}
});
grunt. registerTask('noklusējums', ["mazāk", "apmelnot"]);
};

Šeit ir ideāli strādājošs fails. Es to izmantoju arī projektā ar maz rāmis jo tas ir a API. Asētisks manā gadījumā bija diezgan bezjēdzīgi. Tāpēc es izvēlējos iztikt bez tā, lai izmantotu serverim ārēju rīku un izvietošanas laikā piegādātu ideāli konstruētus resursus.

Aprakstīsim Gruntfile.js darbības

Iepriekšējā failā es konfigurēju divus ieguldījumus GruntJS (_mazāk _et neglīts), ko es instalēju, pateicoties manam pack.json. Jūs ievērosiet, ka spraudņi ir viegli atšķirami viens no otra. Paņemiet paplašinājuma gadījumu mazāk.

Katrs ieguldījums rukšķēšana ko izmantosiet, ir jādeklarē, izmantojot ieguldījumam definētu atslēgvārdu. Piemēram, priekš grunt-contrib-less atslēgas vārds ir mazāk. Saskaņā ar šo daļu mēs varam definēt mērķi. Saskaņā ar termiņu mērķis saprast Apakšnodaļa. Konkrētā gadījumā mēs varētu definēt a mērķis bootstrap lai no avota apkopotu tāda paša nosaukuma bibliotēku mazāk. Mēs varētu definēt citu kopu dist apkopot mūsu projekta avotus. Vairāku apakškopu izmantošana nav obligāta, taču jums būs iespēja tās izmantot vēlāk, kad izmantosit ieguldījumu skatīties lai ietaupītu laiku.

Tad viena paplašinājuma apakškopu struktūra ir ISO. Uzņēmums Contrario katra ieguldījuma struktūra atšķiras. Standarta ieguldījumi bieži tiek sniegti ar daudziem piemēriem. Oficiālie spraudņi ir pieejami GitHub repozitorijā.

Atgriezīsimies pie mūsu piemēra un failu apkopošanas konfigurācijas .mazāk. Spēlē faili mēs pievienojam gala failu nosaukumus kā atslēgu un kā vērtību ievades failu masīvu, ko apkopot. Es domāju, ka nav nepieciešams sīkāk aprakstīt, jo sintakse ir diezgan intuitīva.

Ieguldījums neglīts izmanto JavaScript failu savienošanai, samazināšanai un saspiešanai, izmanto to pašu struktūru. Šajā gadījumā ir pavisam vienkārši izmantot tās divus ieguldījumus.

Kompilēšanas māksla

Un tagad kompilons mūsu avoti. Ar Asētisks, mēs izpildām šo komandu:

1	php lietotne/konsole assetic:dump

Tagad mēs esam noņēmuši AsseticBundle. Mums vairs nav šī pasūtījuma. Tātad mēs palaidīsim savu spraudni no mezgls.

1	rukšķēšana

Redzi, tas joprojām nav īpaši sarežģīti... Šajā gadījumā tiks izpildīti uzdevumi, kas tiks doti profilam noklusējuma. Tas tika definēts pēdējā rindā.

1	grunt. registerTask('noklusējums', ["mazāk", "apmelnot"]);

Jums būtu ļoti labi definēts profils javascript kurš nebūtu izpildījis nāvessodu neglīts.

1	grunt. registerTask('javascript', ['neglīts']);

Ja jūs varētu palaist komandu rukšķēšana ar profila nosaukumu pēc.

1	grunts javascript

Varat definēt tik daudz profilu, cik vēlaties. Mana profila gadījumā javascript, interese ir mazāka, jo jūs būtu varējis veikt arī šādu zvanu.

1	ņurdēt neglīts

Secinājumi

Tagad jūs zināt, kā apkopot savus resursus. Ja neesat sapratis visus smalkumus, jums vajadzētu ātri novērtēt visu elastību, ko piedāvā rukšķēšana attiecībā uzAsētisks. Turklāt bez standarta resursiem, piemēram, javascript un css, varat apstrādāt arī fontus, attēlus... Aktīvs, kas mani ātri iekaroja.

Patiesā priekšrocība rukšķēšana ir tās elastība tās izmantošana. rukšķēšana et lapene starp tiem iemieso alternatīvu Assetic. Bez lapene jūs joprojām varat strādāt ar rukšķēšana bet pieredze nebūs pilnīga.

Es ceru, ka šis raksts ļaus jums viegli saprast, kā lietot rukšķēšana. Esiet drosmīgs, jūs esat gandrīz klāt!