الآن بعد أن حصلنا على فهم
لمختلف الخطوات المشاركة في بناء ونشر موقعنا،
وأيضا مقدمة موجزة لنصوص الآلية الوقائية الوطنية في المحاضرة السابقة،
دعونا نلقي نظرة عميقة على تطوير
نصوص الآلية الوقائية الوطنية لأتمتة العديد من المهام التي تحدثنا عنها في وقت سابق.
كما رأيت في المحاضرة السابقة،
لدينا بالفعل اثنين من البرامج النصية NPM التي قمنا بتضمينها في ملف package.json الخاص بنا،
واحد لبدء الخادم لايت والثاني
لتحويل رمز SCSS إلى CSS.
في هذا التمرين والقادم،
سوف نستكشف نصوص الآلية الوقائية الوطنية بمزيد من التفصيل.
للبدء، دعونا أولا القيام ببعض التدبير المنزلي على ملف index.html.
الذهاب إلى ملف index.html،
ونحن نرى أن لدينا هذا رمز جافا سكريبت في الجزء السفلي من هذا الملف index.html.
أفضل الاحتفاظ بشفرة جافا سكريبت هذه في
ملف منفصل يحتوي على جميع البرامج النصية الخاصة بنا،
ثم تضمين هذا الملف في index.html الخاص بي.
للقيام بذلك، دعونا إنشاء مجلد آخر هنا مع اسم جس.
وفي هذا المجلد js،
سأقوم بإنشاء ملف جديد باسم scripts.js.
والذهاب إلى index.html،
سأقوم ببساطة بقطع شفرة جافا سكريبت هذه من هنا
ثم لصق ذلك في ملف scripts.js،
ثم حفظ التغييرات على ملف scripts.js.
الآن بعد أن قمنا بنقل جميع شفرة جافا سكريبت الخاصة بنا إلى ملفه الخاص،
سأقوم الآن بتضمين ملف جافا سكريبت هذا إلى ملف index.html الخاص بي هناك.
أود أن أقول <script src =
«js/scripts.js» بهذه الطريقة،
يتم تضمين كل شفرة جافا سكريبت الخاصة بي الآن مرة أخرى في ملف index.html الخاص بي.
بهذه الطريقة، يحتوي ملف index.html الخاص بي على جميع شفرة html،
ويتم إيقاف تشغيل جميع شفرة CSS وجافا سكريبت في ملفاتهم المنفصلة الخاصة بهم.
اسمحوا لي أن نسخ هذا سطر البرامج النصية من صفحة index.html،
ثم انتقل إلى صفحة aboutus.html،
انتقل لأسفل على طول الطريق إلى أسفل حيث قمت بتضمين
البرامج النصية الأخرى ثم لصق هذا.
وبالمثل، اسمحوا لي أن انتقل إلى صفحة contactus.html،
ومرة أخرى انتقل لأسفل إلى أسفل الملف هناك.
دعني ألصق هذا الخط
دعنا نحفظ التغييرات ثم ننتقل إلى الخطوة التالية.
الخطوة التالية التي أود القيام بها هي تثبيت اثنين من
وحدات الآلية الوقائية الوطنية التي سأستخدمها لأتمتة بعض المهام.
تسمى وحدة NMP الأولى التي سأقوم بتثبيتها onchange.
ستقوم وحدة onchange هذه بمشاهدة الملفات في مجلد مشروعي،
ثم كلما تغيرت هذه الملفات،
فإنها تقوم تلقائيًا بتشغيل مهمة ليتم تنفيذها.
بهذه الطريقة، على سبيل المثال،
إذا قمت بإعداد عرض اقتباس على بعض الملفات، على
سبيل المثال ملف SCSS الخاص بي،
ثم في أي وقت أقوم فيه بإجراء تغييرات على ملف SCSS الخاص بي،
فسيتم إعادة تجميعه تلقائيًا في ملف CSS المقابل.
لدينا بالفعل البرنامج النصي الذي يفعل recompilation.
لذلك كل ما أحتاج إلى القيام به هو إعداد ساعة على ذلك الملف المحدد.
الآن هذا هو المكان الذي سأستفيد فيه من وحدة الآلية الوقائية الوطنية التي تسمى Onchange.
هناك نموذج آخر للآلية الوقائية الوطنية يسمى Watch،
والذي يمكنك استخدامه أيضًا لنفس الغرض.
في هذا التمرين، سأستخدم وحدة Onchange،
ثم نتعامل مع grant و gulp في الدروس اللاحقة،
سنستخدم وحدة Watch لنفس الغرض.
بالإضافة إلى ذلك، سأقوم أيضًا بتثبيت وحدة NPM أخرى تسمى shell المتوازي.
تسمح لي هذه الوحدة المتوازية بتنفيذ
برامج نصية NPM متعددة في Parallelshells كما يوحي الاسم.
وبهذه الطريقة، يمكن
تنفيذ العديد من البرامج النصية NPM في وقت واحد وتمكينني من مراقبة الملفات المختلفة،
وكذلك تنفيذ مهام أخرى.
لذلك يتيح تثبيت هاتين الوحدتين NPM.
سنقوم بتثبيتها محليًا في هذا المشروع بالذات.
لذلك للقيام بذلك سوف اكتب تثبيت npm.
يجب علي - حفظ ديف وبعد ذلك أود أن أقول أونشانج
و متوازي ثم انتظر هاتين وحدتي الآلية الوقائية الوطنية ليتم تثبيتها.
بمجرد تثبيت وحدتين،
ثم سأقوم بتضمين اثنين من البرامج النصية NPM في ملف package.json الخاص بي.
وسأشرح لك السبب كما نقوم بتضمين تلك النصوص هناك.
بالعودة إلى ملف package.json الخاص بي،
مباشرة بعد هذا SCSS،
سأقوم بتضمين برنامج نصي آخر يسمى «watch: scss».
وكما يوحي الاسم،
هذا هو الذهاب الى إبقاء مراقبة على ملفات SCSS.
لذلك هذا هو المكان الذي سأستدعي وحدة NPM onchange التي قمت بتثبيتها للتو،
وبعد ذلك أود أن أقول رمز واحد «css/*.scss».
مما يعني أن مراقبة جميع ملفات SCSS الموجودة في مجلد CSS.
إذا تغير أي منها،
فأنت ستقوم
بتشغيل هذا البرنامج النصي المحدد والنص البرمجي هو «—npm run scss» لأن هذا
هو البرنامج النصي الذي سيقوم بإعادة تجميع رمز SCSS الخاص بي في رمز CSS المقابل.
لذلك مع هذا، قمت بإعداد ساعة لبلدي SCSS.
من الواضح أنني يمكن أن اكتب «nmp watch: scss».
ومن ثم فإنه سيتم تشغيل البرنامج النصي هناك مع وحدة أونشانج،
لذلك سوف تبقي ساعة على ذلك.
إذا كنت تقوم بهذا التمرين على جهاز Windows،
بدلاً من الاقتباس المفرد في البرنامج النصي،
يجب استبدال ذلك بالخط المائل العكسي والاقتباس المزدوج.
وبالمثل، فإن الاقتباس المفرد الآخر
يحل محل ذلك أيضًا بالخط المائل العكسي والاقتباس المزدوج.
لذا، هذه هي الطريقة التي سيبدو بها البرنامج النصي على جهاز كمبيوتر يعمل بنظام التشغيل Windows.
الآن، أنا ذاهب للاستفادة من Parallelshell
لتشغيل العديد من هذه البرامج النصية لتكون نشطة في وقت واحد.
لذلك أود أن أقول «متوازي»،
ثم ضمن علامات الاقتباس،
أود أن أقول «npm تشغيل مشاهدة: scss».
لذلك يأخذ Parallelshell متعددة من هذه كمعلمات،
كل واحد ضمن علامات اقتباس واحدة هناك.
والثاني هو «نبم تشغيل ليت».
لذلك يمكنك أن ترى أن هذا Parallelshell يسمح لي بتنفيذ اثنين من النصوص في وقت
واحد، واحد للحفاظ على مراقبة على ملف SCSS الخاص بي،
والآخر لتشغيل قذيفة لايت.
إذا كنت تقوم بهذا التمرين على جهاز Windows،
بدلاً من الرمز المفرد في البرنامج النصي،
يجب استبدال ذلك بالخط المائل العكسي والاقتباس المزدوج.
وبالمثل، فإن الاقتباس المفرد الآخر
يحل محل ذلك أيضًا بالخط المائل العكسي والاقتباس المزدوج.
إذن هذه هي الطريقة التي سيبدو بها البرنامج النصي على جهاز كمبيوتر يعمل بنظام التشغيل Windows.
الآن بعد إجراء هذه التغييرات،
اسمحوا لي حفظ التغييرات وبعد ذلك سوف ترتفع
هنا ومن ثم تبدأ السيناريو الذي لدي هنا.
سوف أغير ذلك من «نبم تشغيل لايت» إلى «نبم تشغيل مشاهدة: الكل».
وحفظ التغييرات هنا.
لذلك مع هذا، يتم الآن إعداد البرامج النصية التي أحتاجها.
حتى الآن، يمكنني المضي قدما والقيام
«نبم بداية» والتي سوف تبدأ أساسا هذين النصين
في وقت واحد، واحد حفظ مراقبة على بلدي ملفات سس والتي بدورها سوف
تؤدي إلى تجميع سس إلى CSS،
والآخر الذي يبدأ بلدي الخادم لايت.
الآن، لقد بدأت تحت علامة التبويب الجدول ثم انتقلت إلى مجلد المشروع،
ثم قم بإضافة المطالبة.
سأكتب «نبم ستارت».
وهذا يجب أن يؤدي إلى
كل من خادم لايت الخاص بي الذي سيوفر ما يصل الملفات من مجلد الارتباك الخاص بي،
وأيضا تشغيل وحدة أونشانج للحفاظ على مراقبة على ملفات سس.
للمساعدة في توضيح كيف يحتفظ هذا Onchange بساعة على ملفات SCSS الخاصة بي،
ما سأقوم به هو الانتقال إلى ملف styles.scss الخاص بي هنا،
وبعد ذلك سأقوم ببساطة بحفظ الملف مرة أخرى.
الآن في أي وقت يتم حفظ هذا الملف،
لن أقوم بإجراء أي تغييرات عليه.
أنا فقط ذاهب إلى ضرب حفظ على الملف.
لذلك في أي وقت يتم فيه تغيير هذا الملف،
سترى أن
Onchange على الفور سيؤدي إلى تشغيل البرنامج النصي SAS للعقدة ليتم تنفيذه،
والذي سيقوم بتجميع الملف من SCSS إلى CSS وإنشاء ملف CSS هنا،
ثم يحفظ الملف الذي سيؤدي أيضًا
إلى إعادة تحميل صفحة الويب الخاصة بي في المتصفح.
لذا، هذا هو في الأساس ما حققناه باستخدام وحدة Onchange للحفاظ
على مراقبة الملفات التي تم تغييرها بعد ذلك
سيؤدي إلى تشغيل بعض البرامج النصية للآلية الوقائية الوطنية تلقائيًا.
الآن، هذا يحررنا من المخاوف حول الحاجة إلى تشغيل هذه المهام يدويا.
على سبيل المثال، إذا كان لديك مجموعة من المهام التي تريد تشغيلها تلقائيًا،
فستحدث تغييرات معينة.
يمكنك بسهولة إعداد مهام المراقبة هذه للحفاظ على مراقبة هذه التغييرات.
الآن لقد أوضحت ذلك مع مثال واحد.
في المثال الخاص بي هنا،
أقوم فقط بتعديل ملفات CSS التي تحتاج إلى تجميعها.
ولكن في وقت لاحق، ثم نعمل مع أطر جافا سكريبت.
سترى أنك قد ترغب في تشغيل عمليات التحويل البرمجي عند تغيير ملفات مختلفة.
ويمكن إدارة كل هذه بسهولة باستخدام مهام الساعة هذه.
هل هذا، ونحن استكمال هذا التمرين.
هنا، تعلمنا كيفية إعداد عدد قليل من البرامج النصية NPM،
وتحريك بعض البرامج النصية تلقائيًا باستخدام وحدة NPM onchange.
رأينا أيضًا استخدام وحدة shell المتوازية لتنفيذ
برامج نصية NPM متعددة في وقت واحد في نافذة طرفنا.
هذه نقطة جيدة بالنسبة لك للقيام بتعليق Git مع الرسالة «NPM Scripts Part 1".