حسّن منهجيّتك في تطوير الواجهات 4 – Brunch

إذا كنت من المتابعين الدائمين لكل ما هو جديد في عالم الويب و البرمجة لا بد أن تكون قد سمعت الكثير عما يسمى بأدوات تشغيل المهام . وإذا كنت من المبرمجين الذين يحبون الاكتشاف والمغامرة في العالم الرقمي لا بد أن تكون قد قمت بتجربتها ولكن .. هل أضافة هذه الأدوات ما هو جديد لبيئة عملك أو زاد الثقل الملقى على كاهلك كمبرمج ومطور ؟!! لنعد التفكير..

grunt-gulp-brunch

هناك الكثير من أدوات تشغيل المهام التي اصبح حتى من الصعب متابعتها , ولكنك يمكنك معرفة أهمها من خلال مدونتنا عن طريق قراءة المواضيع الرائعة التي قد بدئها الزميل محمود الدعاس  ومنها :

  1.  حسّن منهجيّتك في تطوير الواجهات 1 – Bower
  2. حسّن منهجيّتك في تطوير الواجهات 2 – Grunt
  3. حسّن منهجيّتك في تطوير الواجهات 3 – Yeoman

أما في هذه المقالة فسوف أتحدث عن أداة جديدة نسبياً في عالم الويب وال HTML5  تدعى برانش (Brunch ) .

ما هي (Brunch ) ؟

برانش هي أداة لبناء تطبيقات ال HTML5 (أداة تشغيل مهام) بسرعة وسهولة دون الحاجة لكتابة مئات الأسطر التي تتكاثر كلما تقدمت في مشروعك عند استعمال أدوات مثل Grunt أو Yeoman

ما الذي يوفره برانش ؟

  1. أتمتة كاملة لبيئة العمل.
  2. القدرة على ضغط ملفات ال CSS و Javascript , Images.
  3. القدرة على فهم تقنيات الويب المتنوعة ( SASS , LESS , Stylus ,Coffescript …).
  4. القدرة على الانتقال من مرحلة التطوير إلى مرحلة الإنتاج وبالعكس بدون أي جهد يذكر.
  5. ملف إعدادت (brunch-config.coffee) بحدود  ال 12 سطر فقط  للتحكم بكامل بيئة العمل.
  6. السرعة مقارنة بالأدوات الأخرى.
  7. فهم كامل لأداة الحزم البرمجية Bower.

تنصيب Brunch

قم بتنصيب brunch  عن طريق Node.js

npm install -g brunch 

إقلاع المشروع

إن مشاريع Brunch  تعتمد على  Skeletons جاهزة يمكنك تصفحها على موقعهم الرسمي أو يمكن إنشاء الـSkeleton الخاص بك ، ولقد قمت بإنشاء العديد منها ومشاركتها مع مجتمع Brunch ، بعضها نستخدمه بمشاريعنا الفعلية هنا في جيسترا منها :

  1.  Brunch With Hyyan
  2. Brunch With Ionic
  3. Brunch With OnsenUI

ولكن لتسهيل الأمور سوف نستخدم الـSkeleton التالي : Brunch Dead Simple

الأن قم بإنشاء مجلد جديد في أي مكان تريده على جهازك ونفذ الأوامر التالية

cd /my-created-folder
brunch new gh:brunch/dead-simple 

إن gh في الأمر السابق تشير إلى أن المشروع موجود على Github وما بعد النقطتين يشير إلى اسم المشروع على Github.

إذا قمت بتصفح المجلد الذي قمت بإنشائه سوف تحصل على التالي :

├── app
│   ├── assets
├── node_modules
│   ├── ...
├── .gitignore
├── bower.json
├── brunch-config.coffee
├── package.json

في الحقيقة كل ما يهمنا في هذه الملفات هو ملف brunch-config.coffee ومجلد app

قبل البدأ قم بتفيذ الأمر التالي الذي سوف تنبه فيه برانش أن هذا المجلد هو مشروع برانش

brunch watch --server

 مجلد app :

– إن كل ما ستقوم بكتابته من ملفات CSS  سوف يتم ضغطها في ملف واحد  public/app.css الذي سوف يتم إنشائه تلقائياً

–  إن كل ما ستقوم بكتابته من ملفات Javascript سوف يتم ضغطها في ملف واحد public/app.js الذي سوف يتم إنشائه تلقائياً أيضاً

– يمكنك وضع جميع ملفات ال HTML  والصور والخطوط Fonts في مجلد app/assets  والتي سوف يتم نسخها كما هي إلى مجلد public الذي سوف يتم إنشائه تلقائياً أيضاً.

ملف brunch-config.coffee :

هو ملف الإعدادت التي تجعل برانش يفهم جميع هذه الأمور والذي لا يتجاوز التسعة أسطر

exports.config =
  # See http://brunch.io/#documentation for docs.
  files:
    javascripts:
      joinTo: 'app.js'
    stylesheets:
      joinTo: 'app.css'
    templates:
      joinTo: 'app.js'

برنش سيرفر :

برانش يأتي مع سيرفر يمكن الوصول إليه عن طريق الرابط التالي http://localhost:333  والذي يقوم بعرض محتويات مجلد public , سوف تجيد هذا الأمر مفيد جدأ عندما يكون تطبيقك يستخدم تقنية ال ajax أو إذا كنت تريد الاستفادة من ميزة التحديث التلقائي.

ميزة التحديث التقائي :

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

الإنتقال إلى مرحلة الإنتاج Production :

لا بد أن تكون قد لاحظت أن جميع الملفات في مجلد public لم يتم ضغطها بل تم دمجها فقط . وهذا طبيعي لأن هذا ما تحتاجه في مرحلة التطوير لكي تسطيع رؤية الأخطاء في متصفحك ولكنك لا ترغب في هذا عند نشر مشروعك . لذلك عليك بتنفيذ الأمر التالي قبل النشر

 brunch build --production 

 استمتع بأداتك الجديدة

لم يكن هذا سهلاً للغاية، أليس كذلك؟ ولكنه يستحق فعلاً ، فكر في الوقت الذي ستقوم بتوفيره من خلال هذه الأداة وأدوات مماثلة، لتستغلها في أمور أكثر أهمية ومتعة ، لابد أن تجربها لتشعر بمتعة واحترافية استخدام أدوات مماثلة.

 

حيان أبو فخر

مطور ويب سوري. عاشق للموسيقى والبرمجة والكوميديا الارتجالية.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
TwitterFacebook

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *