ادمج Grunt JS في Symfony واستبدل Assetic

كنت أعرف GruntJS دون أن أستخدمه من قبل ولكن كان علي أن أسمع من أحد المطورين في symfony أعطني الكتلة حتى أبحث في هذا الحل. أولا ، استبدل أصلي من قبل GruntJS كان بالنسبة لي حلاً لجعل مشاريعي تعمل في symfony مع HHVM. الآن الخادم PHP de فيسبوك يعمل بشكل مثالي مع أصلي لكني أجد أسبابًا أقل وأقل لمواصلة استخدام أصلي. أخيرًا ، استخدام الناخر، وهو مكون إضافي يعتمد على العقدة شبيبة، يدفع معظم المطورين إلى استخدامها تعريشة، مكون إضافي آخر لإدارة التبعيات. سوف نتحدث عن تعريشة أكثر إنخفاضا. دعنا نلقي نظرة سريعة على الإيجابيات والسلبيات.

حذاري ! قبل أن تبدأ في ترحيل التطبيق الخاص بك ، أنصحك بإصدار الكود الخاص بك وإجراء بعض الاختبارات. يُنصح بشدة بقراءة المقال بالكامل قبل الشروع في هذه المهمة طويلة الأمد.

المُقدّمة

Assetic ، الصديق الذي أسيء فهمه

من ناحيتي ، أنا أعتبر ذلكأصلي يساء فهمه وإساءة استخدامه. سوف اشرح افكاري لك (بالإضافة إلى ذلك ، قمت بتصحيح هذا المقال بعد سوء فهم من جانبي ، وذلك بفضل مانويل كلاين على ملاحظاته).

مصلحة

استخدامأصلي يسمح لك بإلغاء ذاكرة التخزين المؤقت على الموارد لأن اسم موارد JS و CSS التي تم إنشاؤها يتغير في كل مرة تقوم فيها بتشغيل الأمر "Assetic: تفريغ ". ميزة معينة!

عيوب

• يقدم Assetic خيارات قليلة لتكوين كيفية إنشاء الموارد.
• من الضروري تثبيت حزم PHP لإنشاء موارد غريبة مثل LESS. يتم تثبيت كود PHP في ملف الباعة بينما هذه المهمة مفيدة فقط للعميل. لا للخادم. بالإضافة إلى ذلك ، فإنه يزيد من عدد مشروعك.
• شفرة PHP ضروري في النماذج غصين utilisant أصلي أو جميعهم تقريبًا. بينما مع Grunt ، سيتم استدعاء المورد المترجم بالاسم الذي أعطيته له.

حقًا استخدم Assetic في القوالب الخاصة بك

كثيرا ما أرى في النماذج غصين التي صادفتها ، الموارد مرتبطة أحيانًا عبر أصلي، أحيانًا عبر الأصول de سيمفوني.

1 2 3 4 5

# باستخدام Assetic @ NamespaceMyBundle / Resources / public / css / main.css # الأصول غير المستخدمة ، باستخدام الأصول /bundles/namespacemy/css/main.css

في الحالة الأولى، أصلي ينطبق حقا. في الحالة الثانية ، أصلي مخفي تمامًا حتى لا يتم استخدام ملف الأصول de في symfony. استخدام الأصول هو أيضًا خطأ في رأيي ، على الأقل للوصول إلى موارد JS و CSS. نهاية الأقواس ...

Grunt JS المترجم المرن Sooo!

GruntJS مرتكز على نود.جي إس. إنها أداة من جانب العميل تستخدم الوحدات النمطية لتنفيذ العديد من الإجراءات مثل تسلسل الملفات ، تصغير الحجم، ضغط الصور ، تجميع أقل ، TypeScript ... على عكس أصلي، سيتعين عليك إعداد تكوينات معينة ولكن كن مطمئنًا ، فإن هذا الاستثمار الأولي سيؤتي ثماره وفي النهاية أسرع بكثير منأصلي.

مقدمة إلى Bower ، الملحن. json للموارد

GruntJS جيد ويتم وضعه في نفس الجزء مثلأصلي. ولكن ما دمت تستخدم نود.جي إس، وكذلك الاستخدام تعريشة ! إنه مدير تبعية. ببساطة ، أنت تحدد الموارد التي تحتاجها ، "مثل هذه المكتبة في مثل هذا الإصدار" و تعريشة يعتني بالحصول على الإصدار الذي تريده. بالطبع ، تمامًا مثل composer.json ل PHP، يمكنك إضافة نطاقات الإصدار. إذا كنت تريد مكتبة في الإصدار 3.3., * تعريشة سوف تحصل على أحدث إصدار متاح. حل لتحديث هذه الموارد بسهولة. مشكلة متكررة في مشاريعنا القياسية لأن لدينا (كان لدينا) ميلًا إلى تنزيل إصدار وعدم تحديثه مطلقًا بعد ذلك. لم يكن لدينا التحديثات البسيطة التي تكون مفيدة جدًا في بعض الأحيان.

من الناحية الفنية ، تعريشة يستخدم ملف bower.json. تركيبها بسيط جدا. أنا أحثك ​​على استخدامه حتى لو كان بإمكانك الاستمرار بدونه. سيحتاج الملف إلى إصدار بخلاف الموارد التي تعريشة سيأتي التحميل لك. لتبدأ ، سأعطيك مثالاً أدناه.

تعيين الإصدارات المترجمة من الموارد

من ناحيتي ، اعتدت على عدم إصدار مراجع مجمعة لـ أصلي لكنني قررت أن أفعل العكس GruntJS. منذ أن أفعل بدون موارد لإدارة تعريشة (انظر مقدمة إلى تعريشة) ، سأجمع مواردي و gitters. بهذه الطريقة ، يمكنني نشر تطبيقي بسرعة. لم أتلق أبدًا أي تعليقات على هذه الممارسة ، لكنها تبدو محترمة بالنسبة لي لأنه تم إلغاء عمليتين في وقت النشر (استرداد الموارد باستخدام تعريشة وتجميعها مع GruntJS) ، وكذلك الحاجة إلى وجودها نود.جي إس على جهازه.

إزالة Assetic من مشروع Symfony الخاص بنا

أصلي تم اختياره ليكون المكون الافتراضي المسؤول عن تجميع الموارد. اعلم أنه على الرغم من كل شيء ، فمن السهل جدًا إزالته.

حذف الكتل غصين نوع جافا سكريبت et أنماط. إنها ليست ضرورية. ضع جانبا الملفات التي كنت تستخدمها. في المستقبل ، سيتم تحديد الملفات التي ترغب في استخدامها في الملف Gruntfile.js. سنرى ذلك بعد قليل.

1 2 3 4 5 6 7 8

# التطبيق / config / config.yml # إزالة التكوين من Assetic. سيكون هناك أيضًا بعض الملفات في config_prod.yml و config_dev.yml والملفات الأخرى التي تم تحميلها مقيّد: تصحيح: "٪ kernel.debug٪" use_controller: زائف حزم: [] المرشحات: cssrewrite: ~

1 2 3 4 5

# app / AppKernel.php # توقف عن تحميل AsseticBundle عن طريق حذف السطر من AppKernel ... جديد SymfonyBundleAsseticBundleAsseticBundle () ...

1 2 3 4 5

# الملحن json # إزالة حزمة Assetic ... "symfony / assetic-bundle": "~ 2.3" ...

ها أنت ذا ، لقد تم إلغاء تنشيطك أصلي عالميا. بهذه الطريقة ، لم تعد تتوقع العثور على الأمر مدقع: تفريغ et Assetic: مشاهدة.

كيف سيعمل Grunt JS ضمن مشروعنا؟

سيتعين علينا تكوين مشروعنا بثلاثة ملفات:

• package.json مما سيسمح لنا بتثبيت الإضافات نود.جي إس (GruntJS ومساهماته) ؛
• bower.json للإبلاغ عن التبعيات التي يتعين حلها من أجل تجميع مواردنا ؛
• Gruntfile.js والتي ستعمل عليها أكثر من غيرها. سيحتوي على جميع الإجراءات الممكنة و / أو التي سيتم تنفيذها لتجميع جزء أو كل مشروعك.

package.json لتثبيت Grunt JS

1 2 3 4 5 6 7 8 9 10 11

{ "التبعيات": { "الناخر": "^ 0.4.5", "grunt-Contrib-less": "~ 0.11.0", "grunt-Contrib-uglify": "^ 0.6.0", "مهام الحمل الناخر": "^ 0.6.0" }, "devDependencies": { "الناخر": "^ 0.4.5" } }

أولاً ، استخدم هذا المحتوى. يتطلب تركيب GruntJS والمساهمات ، اثنان منها (نخر-مساهمة أقل et نخر-مساهم-uglify) يسمح لك بتجميع ملفات جافا سكريبت وملفاتك ليسكسس.

bower.json لحل التبعيات (bootstrap، font-awesome، ...)

1 2 3 4 5 6 7 8 9 10 11 12

{ "يتجاهل": [ "** /. *", "node_modules", "bower_components", " امتحان ", "اختبارات" ], "التبعيات": { "التمهيد": "3.3. *" } }

هنا ملف بسيط. في حالتي ، طلبت الحصول على أحدث إصدار من 3.3 فرع من التمهيد يمكن تنزيله. بشكل افتراضي ، عندما تقوم بعمل ملف تثبيت التعريشة سيتم تثبيت تبعياتك في المجلد bower_components. من خلال استخدام .bowerrc يمكنك تغيير مجلد الوجهة. يمكنك العثور على مزيد من المعلومات على موقع الويب الخاص بـ Bower.

1 2	# تثبيت التبعيات باستخدام Bower تثبيت $ bower

Gruntfile.js - حيث يبدأ كل شيء

كل الأوامر والإجراءات التي ترغب في إضافة هذه الحقيقة إليها في الملف Gruntfile.js. من بين أشياء أخرى ، يمكنك تجميع الملفات Lesscss et ساس، تسلسل أي نوع من الملفات ، وتجميعها نسخة مطبوعة على الآلة الكاتبة, minifier ملفات JavaScript والصور وكذلك ملفات HTML. يمكنك أيضًا تغيير حجم الصور ونسخ الملفات (مثل الخطوط).

اليوم سوف أريكم فقط كيفية تجميع الملفات .أقل وتصغير الملفات . شبيبة. الإجراءات التي أقوم بها كل يوم والتي تسمح لي اليوم بسهولة استخدام هذا الجزء أو ذاك منه ألبس الحذاء. بدلا من استخدام كل ألبس الحذاء عندما يكون كل ما تحتاجه الحروف الرسومية، قد يكون من الممتع العمل على مكتبة مخصصة.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

وحدة.exports = وظيفة (الناخر) { تطلب("مهام الحمل الناخر")(الناخر)؛ grunt.initConfig ({ أقل: { حي: { الخيارات: { ضغط: صحيح, yuicompress: صحيح, التحسين: 2 }, ملفات: { "web / css / main.css": [ "bower_components / bootsrap / dist / css / bootstrap.css", "src / Namespace / MyBundle / Resources / public / css / main.less" ] } } }, قبح: { الخيارات: { مفقود: زائف, مصدر الخريطة: صحيح }, حي: { ملفات: { "web / js / main.js": [ "src / Namespace / MyBundle / Resources / public / js / main.js", ] } } } })؛ نخر.'إفتراضي'، ["أقل", "قبح"])؟ };

هذا ملف يعمل بشكل مثالي. أنا أيضا أستخدمه في مشروع مع القليل هيكل لأنه هو API. أصلي كان في حالتي عديم الفائدة تمامًا. لذلك فضلت الاستغناء عنها لاستخدام أداة خارج الخادم وتقديم الموارد التي تم إنشاؤها بشكل مثالي في وقت النشر.

دعنا نصف إجراءات Gruntfile.js

في الملف السابق ، قمت بتكوين مساهمتي GruntJS (_less _ و قبح) التي قمت بتثبيتها بفضل بلدي package.json. ستلاحظ أن الإضافات يمكن تمييزها بسهولة عن بعضها البعض. خذ حالة التمديد أقل.

كل مساهمة الناخر يجب الإعلان عن أنك ستستخدمها من خلال كلمة رئيسية محددة للمساهمة. على سبيل المثال ، لـ نخر-مساهمة أقل الكلمة الأساسية هي أقل. تحت هذا الجزء ، يمكننا تحديد الأهداف. تحت المصطلح الهدف تفهم جزء ثانوي. في حالة ملموسة ، يمكننا تحديد ملف الهدف ألبس الحذاء لتجميع المكتبة التي تحمل الاسم نفسه من المصدر أقل. يمكننا تحديد مجموعة أخرى حي لتجميع مصادر مشروعنا. لا يعد استخدام العديد من المجموعات الفرعية ضرورة ولكن ستتاح لك الفرصة لاستخدامها لاحقًا عند استخدام ملف مشاهدة المساهمة لربح الوقت.

ثم هيكل المجموعات الفرعية من نفس الامتداد هو ISO. في Contrario ، يختلف هيكل كل مساهمة. غالبًا ما يتم تقديم المساهمات القياسية مع العديد من الأمثلة. تتوفر المكونات الإضافية الرسمية في مستودع GitHub.

دعنا نعود إلى مثالنا وتكوين تجميع ملفاتنا .أقل. في اللعبة ملفات نضيف اسم الملفات النهائية كمفتاح وكمجموعة من ملفات الإدخال ليتم تجميعها. أعتقد أنه ليس من الضروري تقديم المزيد من التفاصيل لأن بناء الجملة بديهي تمامًا.

إسهام قبح تستخدم لتسلسل وتصغير وضغط ملفات جافا سكريبت ، وتستخدم نفس البنية. في هذه الحالة ، من السهل جدًا استخدام مساهمتيها.

فن التجميع

والآن شركاتiloمصادرنا. مع أصلي، نقوم بتشغيل هذا الأمر:

1	php app / console assetic: dump

الآن أزلنا AsseticBundle. لم يعد لدينا هذا الطلب. لذلك سنقوم بتشغيل المكون الإضافي الخاص بنا من العقدة.

1

الناخر

ترى أنه لا يزال غير معقد للغاية ... في هذه الحالة ، ستكون المهام التي سيتم تنفيذها هي المهمة المعطاة للملف الشخصي افتراضي. تم تعريفه في السطر الأخير.

1	نخر.'إفتراضي'، ["أقل", "قبح"])؟

سيكون لديك ملف تعريف جيد جدًا جافا سكريبت الذي لم يعدم قبح.

1	نخر."جافا سكريبت"، ['قبح'])؟

في حال كان بإمكانك تشغيل الأمر الناخر مع اسم الملف الشخصي بعد.

1	نخر جافا سكريبت

يمكنك تحديد العديد من الملفات الشخصية كما تريد. في حالة ملفي الشخصي جافا سكريبت، تكون الفائدة أقل لأنه كان بإمكانك أيضًا إجراء المكالمة التالية.

1

نخر قبيح

في الختام

الآن أنت تعرف كيفية تجميع مواردك. إذا لم تكن قد استوعبت كل التفاصيل الدقيقة ، فيجب أن تكون قادرًا بسرعة على تقدير كل المرونة التي توفرها الناخر بالنسبة إلىأصلي. علاوة على ذلك ، بصرف النظر عن الموارد القياسية مثل javascript و css ، يمكنك أيضًا معالجة الخطوط والصور ... أحد الأصول التي استحوذت على المزيد بسرعة.

الميزة الحقيقية لـ الناخر هي مرونته في استخدامه. الناخر et تعريشة بينهما يجسد بديلاً للأسيتيك. بدون تعريشة لا يزال بإمكانك العمل معها الناخر لكن التجربة لن تكون كاملة.

آمل أن تسمح لك هذه المقالة بفهم استخدام الناخر. كن شجاعًا ، لقد أوشكت على الانتهاء!