1
00:00:03,510 --> 00:00:07,990
الآن بعد أن حصلنا على فهم

2
00:00:07,990 --> 00:00:12,965
لمختلف الخطوات المشاركة في بناء ونشر موقعنا،

3
00:00:12,965 --> 00:00:18,690
وأيضا مقدمة موجزة لنصوص الآلية الوقائية الوطنية في المحاضرة السابقة،

4
00:00:18,690 --> 00:00:22,830
دعونا نلقي نظرة عميقة على تطوير

5
00:00:22,830 --> 00:00:28,755
نصوص الآلية الوقائية الوطنية لأتمتة العديد من المهام التي تحدثنا عنها في وقت سابق.

6
00:00:28,755 --> 00:00:31,350
كما رأيت في المحاضرة السابقة،

7
00:00:31,350 --> 00:00:38,760
لدينا بالفعل اثنين من البرامج النصية NPM التي قمنا بتضمينها في ملف package.json الخاص بنا،

8
00:00:38,760 --> 00:00:41,735
واحد لبدء الخادم لايت والثاني

9
00:00:41,735 --> 00:00:46,240
لتحويل رمز SCSS إلى CSS.

10
00:00:46,240 --> 00:00:49,755
في هذا التمرين والقادم،

11
00:00:49,755 --> 00:00:53,055
سوف نستكشف نصوص الآلية الوقائية الوطنية بمزيد من التفصيل.

12
00:00:53,055 --> 00:01:00,810
للبدء، دعونا أولا القيام ببعض التدبير المنزلي على ملف index.html.

13
00:01:00,810 --> 00:01:03,095
الذهاب إلى ملف index.html،

14
00:01:03,095 --> 00:01:09,325
ونحن نرى أن لدينا هذا رمز جافا سكريبت في الجزء السفلي من هذا الملف index.html.

15
00:01:09,325 --> 00:01:12,930
أفضل الاحتفاظ بشفرة جافا سكريبت هذه في

16
00:01:12,930 --> 00:01:19,385
ملف منفصل يحتوي على جميع البرامج النصية الخاصة بنا،

17
00:01:19,385 --> 00:01:23,015
ثم تضمين هذا الملف في index.html الخاص بي.

18
00:01:23,015 --> 00:01:31,155
للقيام بذلك، دعونا إنشاء مجلد آخر هنا مع اسم جس.

19
00:01:31,155 --> 00:01:34,210
وفي هذا المجلد js،

20
00:01:34,210 --> 00:01:41,520
سأقوم بإنشاء ملف جديد باسم scripts.js.

21
00:01:42,120 --> 00:01:49,060
والذهاب إلى index.html،

22
00:01:49,060 --> 00:01:54,890
سأقوم ببساطة بقطع شفرة جافا سكريبت هذه من هنا

23
00:01:54,890 --> 00:02:01,120
ثم لصق ذلك في ملف scripts.js،

24
00:02:01,120 --> 00:02:05,305
ثم حفظ التغييرات على ملف scripts.js.

25
00:02:05,305 --> 00:02:10,915
الآن بعد أن قمنا بنقل جميع شفرة جافا سكريبت الخاصة بنا إلى ملفه الخاص،

26
00:02:10,915 --> 00:02:20,430
سأقوم الآن بتضمين ملف جافا سكريبت هذا إلى ملف index.html الخاص بي هناك.

27
00:02:20,430 --> 00:02:24,540
أود أن أقول <script src =

28
00:02:24,540 --> 00:02:31,040
«js/scripts.js» بهذه الطريقة،

29
00:02:31,040 --> 00:02:35,005
يتم تضمين كل شفرة جافا سكريبت الخاصة بي الآن مرة أخرى في ملف index.html الخاص بي.

30
00:02:35,005 --> 00:02:40,390
بهذه الطريقة، يحتوي ملف index.html الخاص بي على جميع شفرة html،

31
00:02:40,390 --> 00:02:46,345
ويتم إيقاف تشغيل جميع شفرة CSS وجافا سكريبت في ملفاتهم المنفصلة الخاصة بهم.

32
00:02:46,345 --> 00:02:52,590
اسمحوا لي أن نسخ هذا سطر البرامج النصية من صفحة index.html،

33
00:02:52,590 --> 00:02:56,330
ثم انتقل إلى صفحة aboutus.html،

34
00:02:56,330 --> 00:02:59,365
انتقل لأسفل على طول الطريق إلى أسفل حيث قمت بتضمين

35
00:02:59,365 --> 00:03:02,540
البرامج النصية الأخرى ثم لصق هذا.

36
00:03:02,540 --> 00:03:07,405
وبالمثل، اسمحوا لي أن انتقل إلى صفحة contactus.html،

37
00:03:07,405 --> 00:03:11,545
ومرة أخرى انتقل لأسفل إلى أسفل الملف هناك.

38
00:03:11,545 --> 00:03:13,975
دعني ألصق هذا الخط

39
00:03:13,975 --> 00:03:18,205
دعنا نحفظ التغييرات ثم ننتقل إلى الخطوة التالية.

40
00:03:18,205 --> 00:03:23,075
الخطوة التالية التي أود القيام بها هي تثبيت اثنين من

41
00:03:23,075 --> 00:03:29,905
وحدات الآلية الوقائية الوطنية التي سأستخدمها لأتمتة بعض المهام.

42
00:03:29,905 --> 00:03:34,310
تسمى وحدة NMP الأولى التي سأقوم بتثبيتها onchange.

43
00:03:34,310 --> 00:03:42,335
ستقوم وحدة onchange هذه بمشاهدة الملفات في مجلد مشروعي،

44
00:03:42,335 --> 00:03:44,445
ثم كلما تغيرت هذه الملفات،

45
00:03:44,445 --> 00:03:48,865
فإنها تقوم تلقائيًا بتشغيل مهمة ليتم تنفيذها.

46
00:03:48,865 --> 00:03:50,660
بهذه الطريقة، على سبيل المثال،

47
00:03:50,660 --> 00:03:56,860
إذا قمت بإعداد عرض اقتباس على بعض الملفات، على

48
00:03:56,860 --> 00:03:59,305
سبيل المثال ملف SCSS الخاص بي،

49
00:03:59,305 --> 00:04:02,270
ثم في أي وقت أقوم فيه بإجراء تغييرات على ملف SCSS الخاص بي،

50
00:04:02,270 --> 00:04:07,220
فسيتم إعادة تجميعه تلقائيًا في ملف CSS المقابل.

51
00:04:07,220 --> 00:04:11,565
لدينا بالفعل البرنامج النصي الذي يفعل recompilation.

52
00:04:11,565 --> 00:04:16,080
لذلك كل ما أحتاج إلى القيام به هو إعداد ساعة على ذلك الملف المحدد.

53
00:04:16,080 --> 00:04:20,675
الآن هذا هو المكان الذي سأستفيد فيه من وحدة الآلية الوقائية الوطنية التي تسمى Onchange.

54
00:04:20,675 --> 00:04:23,170
هناك نموذج آخر للآلية الوقائية الوطنية يسمى Watch،

55
00:04:23,170 --> 00:04:25,945
والذي يمكنك استخدامه أيضًا لنفس الغرض.

56
00:04:25,945 --> 00:04:29,240
في هذا التمرين، سأستخدم وحدة Onchange،

57
00:04:29,240 --> 00:04:34,765
ثم نتعامل مع grant و gulp في الدروس اللاحقة،

58
00:04:34,765 --> 00:04:37,580
سنستخدم وحدة Watch لنفس الغرض.

59
00:04:37,580 --> 00:04:42,845
بالإضافة إلى ذلك، سأقوم أيضًا بتثبيت وحدة NPM أخرى تسمى shell المتوازي.

60
00:04:42,845 --> 00:04:46,250
تسمح لي هذه الوحدة المتوازية بتنفيذ

61
00:04:46,250 --> 00:04:51,320
برامج نصية NPM متعددة في Parallelshells كما يوحي الاسم.

62
00:04:51,320 --> 00:04:55,095
وبهذه الطريقة، يمكن

63
00:04:55,095 --> 00:04:59,785
تنفيذ العديد من البرامج النصية NPM في وقت واحد وتمكينني من مراقبة الملفات المختلفة،

64
00:04:59,785 --> 00:05:03,835
وكذلك تنفيذ مهام أخرى.

65
00:05:03,835 --> 00:05:06,340
لذلك يتيح تثبيت هاتين الوحدتين NPM.

66
00:05:06,340 --> 00:05:09,645
سنقوم بتثبيتها محليًا في هذا المشروع بالذات.

67
00:05:09,645 --> 00:05:14,555
لذلك للقيام بذلك سوف اكتب تثبيت npm.

68
00:05:14,555 --> 00:05:20,420
يجب علي - حفظ ديف وبعد ذلك أود أن أقول أونشانج

69
00:05:20,420 --> 00:05:27,540
و متوازي ثم انتظر هاتين وحدتي الآلية الوقائية الوطنية ليتم تثبيتها.

70
00:05:27,540 --> 00:05:29,755
بمجرد تثبيت وحدتين،

71
00:05:29,755 --> 00:05:35,745
ثم سأقوم بتضمين اثنين من البرامج النصية NPM في ملف package.json الخاص بي.

72
00:05:35,745 --> 00:05:40,930
وسأشرح لك السبب كما نقوم بتضمين تلك النصوص هناك.

73
00:05:40,930 --> 00:05:43,650
بالعودة إلى ملف package.json الخاص بي،

74
00:05:43,650 --> 00:05:46,270
مباشرة بعد هذا SCSS،

75
00:05:46,270 --> 00:05:52,565
سأقوم بتضمين برنامج نصي آخر يسمى «watch: scss».

76
00:05:52,565 --> 00:05:55,125
وكما يوحي الاسم،

77
00:05:55,125 --> 00:05:59,290
هذا هو الذهاب الى إبقاء مراقبة على ملفات SCSS.

78
00:05:59,290 --> 00:06:07,435
لذلك هذا هو المكان الذي سأستدعي وحدة NPM onchange التي قمت بتثبيتها للتو،

79
00:06:07,435 --> 00:06:12,610
وبعد ذلك أود أن أقول رمز واحد «css/*.scss».

80
00:06:13,960 --> 00:06:20,465
مما يعني أن مراقبة جميع ملفات SCSS الموجودة في مجلد CSS.

81
00:06:20,465 --> 00:06:22,095
إذا تغير أي منها،

82
00:06:22,095 --> 00:06:29,535
فأنت ستقوم

83
00:06:29,535 --> 00:06:35,915
بتشغيل هذا البرنامج النصي المحدد والنص البرمجي هو «—npm run scss» لأن هذا

84
00:06:35,915 --> 00:06:42,380
هو البرنامج النصي الذي سيقوم بإعادة تجميع رمز SCSS الخاص بي في رمز CSS المقابل.

85
00:06:42,380 --> 00:06:46,075
لذلك مع هذا، قمت بإعداد ساعة لبلدي SCSS.

86
00:06:46,075 --> 00:06:49,160
من الواضح أنني يمكن أن اكتب «nmp watch: scss».

87
00:06:49,160 --> 00:06:56,700
ومن ثم فإنه سيتم تشغيل البرنامج النصي هناك مع وحدة أونشانج،

88
00:06:56,700 --> 00:06:58,690
لذلك سوف تبقي ساعة على ذلك.

89
00:06:58,690 --> 00:07:02,960
إذا كنت تقوم بهذا التمرين على جهاز Windows،

90
00:07:02,960 --> 00:07:06,345
بدلاً من الاقتباس المفرد في البرنامج النصي،

91
00:07:06,345 --> 00:07:10,760
يجب استبدال ذلك بالخط المائل العكسي والاقتباس المزدوج.

92
00:07:10,760 --> 00:07:13,660
وبالمثل، فإن الاقتباس المفرد الآخر

93
00:07:13,660 --> 00:07:16,490
يحل محل ذلك أيضًا بالخط المائل العكسي والاقتباس المزدوج.

94
00:07:16,490 --> 00:07:22,770
لذا، هذه هي الطريقة التي سيبدو بها البرنامج النصي على جهاز كمبيوتر يعمل بنظام التشغيل Windows.

95
00:07:22,770 --> 00:07:28,385
الآن، أنا ذاهب للاستفادة من Parallelshell

96
00:07:28,385 --> 00:07:35,765
لتشغيل العديد من هذه البرامج النصية لتكون نشطة في وقت واحد.

97
00:07:35,765 --> 00:07:39,670
لذلك أود أن أقول «متوازي»،

98
00:07:39,990 --> 00:07:42,660
ثم ضمن علامات الاقتباس،

99
00:07:42,660 --> 00:07:49,150
أود أن أقول «npm تشغيل مشاهدة: scss».

100
00:07:49,590 --> 00:07:55,605
لذلك يأخذ Parallelshell متعددة من هذه كمعلمات،

101
00:07:55,605 --> 00:07:58,380
كل واحد ضمن علامات اقتباس واحدة هناك.

102
00:07:58,380 --> 00:08:05,380
والثاني هو «نبم تشغيل ليت».

103
00:08:05,550 --> 00:08:11,630
لذلك يمكنك أن ترى أن هذا Parallelshell يسمح لي بتنفيذ اثنين من النصوص في وقت

104
00:08:11,630 --> 00:08:14,370
واحد، واحد للحفاظ على مراقبة على ملف SCSS الخاص بي،

105
00:08:14,370 --> 00:08:17,745
والآخر لتشغيل قذيفة لايت.

106
00:08:17,745 --> 00:08:21,840
إذا كنت تقوم بهذا التمرين على جهاز Windows،

107
00:08:21,840 --> 00:08:25,245
بدلاً من الرمز المفرد في البرنامج النصي،

108
00:08:25,245 --> 00:08:29,665
يجب استبدال ذلك بالخط المائل العكسي والاقتباس المزدوج.

109
00:08:29,665 --> 00:08:32,560
وبالمثل، فإن الاقتباس المفرد الآخر

110
00:08:32,560 --> 00:08:35,390
يحل محل ذلك أيضًا بالخط المائل العكسي والاقتباس المزدوج.

111
00:08:35,390 --> 00:08:41,685
إذن هذه هي الطريقة التي سيبدو بها البرنامج النصي على جهاز كمبيوتر يعمل بنظام التشغيل Windows.

112
00:08:41,685 --> 00:08:44,335
الآن بعد إجراء هذه التغييرات،

113
00:08:44,335 --> 00:08:48,160
اسمحوا لي حفظ التغييرات وبعد ذلك سوف ترتفع

114
00:08:48,160 --> 00:08:52,890
هنا ومن ثم تبدأ السيناريو الذي لدي هنا.

115
00:08:52,890 --> 00:08:59,480
سوف أغير ذلك من «نبم تشغيل لايت» إلى «نبم تشغيل مشاهدة: الكل».

116
00:09:01,950 --> 00:09:05,145
وحفظ التغييرات هنا.

117
00:09:05,145 --> 00:09:10,460
لذلك مع هذا، يتم الآن إعداد البرامج النصية التي أحتاجها.

118
00:09:10,460 --> 00:09:15,745
حتى الآن، يمكنني المضي قدما والقيام

119
00:09:15,745 --> 00:09:21,124
«نبم بداية» والتي سوف تبدأ أساسا هذين النصين

120
00:09:21,124 --> 00:09:24,850
في وقت واحد، واحد حفظ مراقبة على بلدي ملفات سس والتي بدورها سوف

121
00:09:24,850 --> 00:09:28,825
تؤدي إلى تجميع سس إلى CSS،

122
00:09:28,825 --> 00:09:32,150
والآخر الذي يبدأ بلدي الخادم لايت.

123
00:09:32,150 --> 00:09:41,125
الآن، لقد بدأت تحت علامة التبويب الجدول ثم انتقلت إلى مجلد المشروع،

124
00:09:41,125 --> 00:09:42,665
ثم قم بإضافة المطالبة.

125
00:09:42,665 --> 00:09:44,705
سأكتب «نبم ستارت».

126
00:09:44,705 --> 00:09:46,585
وهذا يجب أن يؤدي إلى

127
00:09:46,585 --> 00:09:54,435
كل من خادم لايت الخاص بي الذي سيوفر ما يصل الملفات من مجلد الارتباك الخاص بي،

128
00:09:54,435 --> 00:10:02,290
وأيضا تشغيل وحدة أونشانج للحفاظ على مراقبة على ملفات سس.

129
00:10:02,290 --> 00:10:09,100
للمساعدة في توضيح كيف يحتفظ هذا Onchange بساعة على ملفات SCSS الخاصة بي،

130
00:10:09,100 --> 00:10:14,705
ما سأقوم به هو الانتقال إلى ملف styles.scss الخاص بي هنا،

131
00:10:14,705 --> 00:10:18,675
وبعد ذلك سأقوم ببساطة بحفظ الملف مرة أخرى.

132
00:10:18,675 --> 00:10:20,860
الآن في أي وقت يتم حفظ هذا الملف،

133
00:10:20,860 --> 00:10:22,620
لن أقوم بإجراء أي تغييرات عليه.

134
00:10:22,620 --> 00:10:25,755
أنا فقط ذاهب إلى ضرب حفظ على الملف.

135
00:10:25,755 --> 00:10:27,840
لذلك في أي وقت يتم فيه تغيير هذا الملف،

136
00:10:27,840 --> 00:10:30,620
سترى أن

137
00:10:32,750 --> 00:10:40,495
Onchange على الفور سيؤدي إلى تشغيل البرنامج النصي SAS للعقدة ليتم تنفيذه،

138
00:10:40,495 --> 00:10:47,555
والذي سيقوم بتجميع الملف من SCSS إلى CSS وإنشاء ملف CSS هنا،

139
00:10:47,555 --> 00:10:50,335
ثم يحفظ الملف الذي سيؤدي أيضًا

140
00:10:50,335 --> 00:10:55,450
إلى إعادة تحميل صفحة الويب الخاصة بي في المتصفح.

141
00:10:55,450 --> 00:11:03,285
لذا، هذا هو في الأساس ما حققناه باستخدام وحدة Onchange للحفاظ

142
00:11:03,285 --> 00:11:07,660
على مراقبة الملفات التي تم تغييرها بعد ذلك

143
00:11:07,660 --> 00:11:12,395
سيؤدي إلى تشغيل بعض البرامج النصية للآلية الوقائية الوطنية تلقائيًا.

144
00:11:12,395 --> 00:11:20,790
الآن، هذا يحررنا من المخاوف حول الحاجة إلى تشغيل هذه المهام يدويا.

145
00:11:20,790 --> 00:11:25,390
على سبيل المثال، إذا كان لديك مجموعة من المهام التي تريد تشغيلها تلقائيًا،

146
00:11:25,390 --> 00:11:27,395
فستحدث تغييرات معينة.

147
00:11:27,395 --> 00:11:35,100
يمكنك بسهولة إعداد مهام المراقبة هذه للحفاظ على مراقبة هذه التغييرات.

148
00:11:35,100 --> 00:11:37,785
الآن لقد أوضحت ذلك مع مثال واحد.

149
00:11:37,785 --> 00:11:39,985
في المثال الخاص بي هنا،

150
00:11:39,985 --> 00:11:45,260
أقوم فقط بتعديل ملفات CSS التي تحتاج إلى تجميعها.

151
00:11:45,260 --> 00:11:50,125
ولكن في وقت لاحق، ثم نعمل مع أطر جافا سكريبت.

152
00:11:50,125 --> 00:11:57,335
سترى أنك قد ترغب في تشغيل عمليات التحويل البرمجي عند تغيير ملفات مختلفة.

153
00:11:57,335 --> 00:12:02,964
ويمكن إدارة كل هذه بسهولة باستخدام مهام الساعة هذه.

154
00:12:02,964 --> 00:12:07,560
هل هذا، ونحن استكمال هذا التمرين.

155
00:12:07,560 --> 00:12:13,685
هنا، تعلمنا كيفية إعداد عدد قليل من البرامج النصية NPM،

156
00:12:13,685 --> 00:12:20,855
وتحريك بعض البرامج النصية تلقائيًا باستخدام وحدة NPM onchange.

157
00:12:20,855 --> 00:12:24,550
رأينا أيضًا استخدام وحدة shell المتوازية لتنفيذ

158
00:12:24,550 --> 00:12:32,050
برامج نصية NPM متعددة في وقت واحد في نافذة طرفنا.

159
00:12:32,200 --> 00:12:42,890
هذه نقطة جيدة بالنسبة لك للقيام بتعليق Git مع الرسالة «NPM Scripts Part 1".