it-swarm.asia

ما الذي يجب أن أستخدمه في دمج ملفات css / js تلقائيًا؟

أدرك --- sprockets لدمج ملفات javascript ، لكنني لم أجربها. ما هي بعض الخيارات الأخرى وكيف تكدس؟

14
Cebjyre

لقد كتبت معالجًا لـ Asp.Net يستخدم YUI لضغط الإخراج وتسلسله وتخزينه مؤقتًا.

إليك المصدر: http://Gist.github.com/13091

4
travis

سبق لي أن تناولت هذه المشكلة في سؤال آخر

بعد فوات الأوان ، كان يجب أن أطلبها من مشرفي المواقع بدلاً من موقع المبرمجين.

لديك 3 خيارات:

  1. دع إطارك يتعامل معها تلقائيًا
  2. دع خادم الويب الخاص بك يتعامل معها تلقائيًا
  3. لفة الخيار الخاص بك للقيام بذلك يدويا

الخيار 1 (باستخدام ملحق CakePHP):

قم بتنزيل وتثبيت AssetPacker في موقعك (والذي يتطلب أيضًا jsmin و CSSTidy). قم بتعديل بضعة أسطر للمصدر تتضمن ملفات js. Wash-> Rinse-> تكرار. فويلا ، يتم الباقي تلقائيًا من أجلك.

إذا كنت تستخدم بعض الأطر الأخرى ، فهناك فرص ، فهناك أداة ستحقق ذلك لك. إنه مطلب شائع في عالم webdev.

الخيار 2 (باستخدام تعديل Apache):

ألق نظرة على Google Pagespeed mod for Apache . يفعل كل شيء تصفه وأكثر من ذلك بكثير.

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

الخيار 3:

إذا كنت تريد حقًا ، فيمكنك إنشاء بعض PHP السحر الذي يربط جانب خادم ملفات JS ويجمع كل روابط الارتباط في واحد ولكن ... هذا بالضبط ما تفعله الاستراتيجيتان بالفعل على أي حال.

أنا شخصياً أوصي بشدة بعدم استخدام هذا الخيار.


بقدر ما أعرف ، فإن سلسلة Sprockets تقوم بتوصيل ملفات JS بنفس طريقة AssetPacker ، يتم تنفيذها فقط كـ Ruby جوهرة. ما لا تفعله هو تصغير رمز js. لذلك ، إذا كنت تستخدمه ، فمن المحتمل أن تكون فكرة جيدة عن الاستيلاء على جوهرة jsmin أيضًا. للحصول على معلومات حول كيفية استخدام Sprockets + JSMin في CakePHP ، تحقق من ذلك .

أعلم أنني أركز على CakePHP لكن ... أفترض أنه إذا كان من الممكن تكييف مكون إضافي مع CakePHP ، فيجب أن يكون تافهًا لتكييفه مع إطار عمل مختلف أيضًا.

2
Evan Plaice

إذا كان webapp الخاص بك في PHP ، فيجب عليك استخدام minify :

فهو يجمع بين العديد من ملفات CSS أو Javascript ، ويزيل المساحة غير الضرورية والتعليقات ، ويقدم لهم ترميز gzip ورؤوس ذاكرة التخزين المؤقت من جانب العميل المثلى.

1
Tom

يبحث بحث google السريع عن هذا الجمع بين ملفات CSS: http://www.tothepc.com/archives/combine-merge-multiple-css-files/

1
Macha

هل أنت متأكد أنك تريد الجمع بينهما؟ إذا كنت تستخدم مكتبة مشتركة ، فيمكنك الاستفادة من شبكة CDN لتسليم javascripts الخاصة بك. يمكنك بعد ذلك الاستفادة من التخزين المؤقت للمستعرض (على افتراض أن المواقع الأخرى تستخدم نفس CDN) والتسليم الموزع. Microsoft و Google لكل منهما حلول (لم أستخدمها بصراحة أيضًا ، لكنني سأبدأ بالتأكيد) وقد يكون هناك آخرون.

1
Larry Smithmier

بالنسبة لمشاريع ASP.NET ، لقد جعلتها جزءًا من عملية الإنشاء الخاصة بي بناءً على إرشادات Karl Seguin .

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

1
Raleigh Buckner

لهذا المعرفة Python قد يكون مفيدًا بالفعل. يمكنك تعلم Python بسرعة كبيرة. لقد بدأت منذ حوالي أسبوعين ، وسوف يقوم طلبي الأول (الذي لم ينته بعد) بالقيام بنفس الشيء الذي تريده بالضبط. مثل المترجم DotLess ، سيكون لديه وظيفة مراقبة ستنظر إلى الملفات أو الدلائل وإذا تغيرت ، فإنها ستنشئ ملفًا جديدًا.

تعتبر Python رائعة أيضًا لمهام الصيانة الأخرى وقرأت الكثير من مسؤولي النظام يرغبون في استخدامها.

1
Pickels

لقد أنشأت Minifpy : أداة مكتوبة في Python3 (متوافق مع Mac OS و Windows و Linux) لدمج وتقليص ملف JS و CSS باستخدام Python.

يستخدم Minifpy ملف تكوين JSON سهل جدًا لتحديد الملفات التي يجب دمجها أو تصغيرها أو عدم:

{
    "js": {
        "minify_files": [
            {"from": "static/file.js", "to":"static/file.min.js"},
        ],
        "merge_files": [
            {"from" : ["static/file1.js", "static/file2.js"], "to":"static/public.js", "to_min": "static/public.min.js"}
        ]
    },
    "css" : {
        "minify_files": [
            {"from": "static/file.css", "to":"static/file.min.css"},
        ],
        "merge_files": [
            {"from" : ["static/file1.css", "static/file2.css"], "to":"static/public.css", "to_min": "static/public.min.css"}
        ]
    }
}

يمكنك أيضًا استخدام هذه الأداة في CLI.

Minifpy الكشف عن أي تعديلات على ملفات JS/CSS ودمجها/تصغيرها تلقائيًا (مفيد للتطوير).

0
Samuel Dauzon