1
00:00:00,000 --> 00:00:04,535
[MUSIC]

2
00:00:04,535 --> 00:00:10,479
سنواصل رحلتنا الآن مع نصوص الآلية الوقائية الوطنية في هذا التمرين التالي.

3
00:00:10,479 --> 00:00:15,182
هنا، ونحن في طريقنا لمعرفة كيفية أن تكون قادرة على بناء

4
00:00:15,182 --> 00:00:20,335
مجلد التوزيع الذي يحتوي على جميع الملفات

5
00:00:20,335 --> 00:00:27,970
لمشروعنا التي يمكننا ببساطة نشرها إلى خادم ويب الذي يستضيف موقعنا على الانترنت.

6
00:00:27,970 --> 00:00:33,050
لذلك بالنظر إلى ملفات HTML، CSS، وجافا سكريبت التي

7
00:00:33,050 --> 00:00:39,010
قمنا بإعدادها بالفعل في مجلد مشروعنا، سنقوم، من هذه،

8
00:00:39,010 --> 00:00:44,895
بمعالجتها باستخدام المهام المختلفة التي تحدثنا عنها.

9
00:00:44,895 --> 00:00:49,246
هذا هو إجراء تعديل CSS،

10
00:00:49,246 --> 00:00:54,740
تسلسل، و جافاسكريبت، تصغير،

11
00:00:54,740 --> 00:00:59,230
وتصغير HTML، ومن

12
00:00:59,230 --> 00:01:04,895
ثم إنشاء مجلد توزيع مع جميع الملفات.

13
00:01:04,895 --> 00:01:09,520
ولكن أساسا تشكل مجموعة من الملفات التي يمكن

14
00:01:09,520 --> 00:01:13,200
نشرها على خادم الويب لدينا الذي يستضيف موقعنا على الانترنت.

15
00:01:15,165 --> 00:01:21,005
لمساعدتك على فهم ما سنقوم به في هذا التمرين بالذات،

16
00:01:22,085 --> 00:01:29,102
كما نلاحظ من صفحة index.html لدينا، لدينا مجموعة من

17
00:01:29,102 --> 00:01:34,352
ملفات CSS التي قمت بتضمينها هنا باستخدام علامة الارتباط هذه هنا.

18
00:01:34,352 --> 00:01:38,742
وبالمثل، لديك مجموعة من البرامج النصية التي قمت بتضمينها

19
00:01:38,742 --> 00:01:42,847
في أسفل هذه الصفحة باستخدام علامة البرنامج النصي.

20
00:01:42,847 --> 00:01:46,152
لقد قمنا بتضمين مجموعة من شفرة جافا سكريبت.

21
00:01:46,152 --> 00:01:51,150
الآن، ما سنقوم به في هذا التمرين هو الجمع بين كل هذه

22
00:01:51,150 --> 00:01:56,760
الملفات في ملف جافا سكريبت واحد سيتم تسليمه

23
00:01:56,760 --> 00:02:03,710
من خادم الويب الخاص بنا إلى متصفح يحاول عرض موقعنا.

24
00:02:03,710 --> 00:02:08,480
وبهذه الطريقة، نقوم بتقليل عدد التنزيلات التي يحتاج المتصفح إلى القيام بها

25
00:02:08,480 --> 00:02:10,930
من أجل تقديم موقعنا على الانترنت.

26
00:02:10,930 --> 00:02:16,960
وبالمثل، سنقوم بدمج كل رمز CSS في ملف CSS واحد،

27
00:02:16,960 --> 00:02:18,325
بحيث يمكن تسليمه.

28
00:02:18,325 --> 00:02:24,353
لذا سيحتوي ملف CSS المدمج على جميع التعليمات البرمجية لـ

29
00:02:24,353 --> 00:02:31,751
Bootstrap بالإضافة إلى Bootstrap الاجتماعي، وكذلك Font Awesome

30
00:02:31,751 --> 00:02:36,697
وكذلك رمز CSS الذي كتبناه بأنفسنا.

31
00:02:36,697 --> 00:02:40,351
وبالمثل، سيكون هناك ملف جافا سكريبت واحد

32
00:02:40,351 --> 00:02:45,297
يحتوي على الحبل jQuery، Bootstrap ورمز جافا سكريبت الذي

33
00:02:45,297 --> 00:02:49,790
كتبناه نحن، أنفسنا، مجتمعة معا في ملف واحد واحد.

34
00:02:49,790 --> 00:02:53,610
الآن، هذه هي الطريقة التي يمكنك بها نشر صفحات الويب الخاصة بك.

35
00:02:53,610 --> 00:02:58,190
وبدلاً من وجود العديد من هذه الملفات هناك، فإن إحدى الطرق التي

36
00:02:59,560 --> 00:03:03,750
يتم بها النشر هي دمجها في ملف واحد بحيث

37
00:03:03,750 --> 00:03:08,840
تحصل على تنزيل واحد على كل شفرة جافا سكريبت اللازمة لعرض صفحة الويب الخاصة بك.

38
00:03:08,840 --> 00:03:11,810
تحميل واحد واحد تحصل على كل رمز CSS اللازمة

39
00:03:11,810 --> 00:03:13,200
لتقديم صفحة الويب الخاصة بك.

40
00:03:13,200 --> 00:03:16,590
وبعد ذلك، بالطبع، سيتم تنزيل ملف HTML نفسه.

41
00:03:18,530 --> 00:03:23,390
للحصول على هذه المهام لإكمال، نحتاج إلى استخدام

42
00:03:23,390 --> 00:03:29,070
مجموعة معينة من وحدات الآلية الوقائية الوطنية لتحقيق ذلك.

43
00:03:29,070 --> 00:03:33,810
الآن، ما سنفعله في نهاية المطاف هو بناء مجلد

44
00:03:33,810 --> 00:03:38,760
في ملف مشاريعنا، ومن ثم نسمي هذا المجلد باسم dist، D-I-S-T.

45
00:03:38,760 --> 00:03:42,580
أنا فقط تسمية عشوائيا ذلك كمجلد dist.

46
00:03:42,580 --> 00:03:47,100
في حالتي، ما أعنيه بمجلد dist هو مجلد توزيع.

47
00:03:47,100 --> 00:03:51,270
في نهاية مجموعة الخطوات التي سنقوم بها، سيحتوي هذا المجلد على جميع

48
00:03:51,270 --> 00:03:59,510
الملفات التي يمكن نسخها ببساطة إلى خادم الويب الذي يستضيف موقعنا على الويب.

49
00:03:59,510 --> 00:04:03,930
للبدء، ما سنقوم به هو إعداد مجموعة من

50
00:04:05,140 --> 00:04:10,960
البرامج النصية هنا التي من شأنها أن تساعدنا على أتمتة هذه العملية.

51
00:04:10,960 --> 00:04:13,930
لذلك أول شيء، قد نقوم

52
00:04:13,930 --> 00:04:18,850
بإعداد مجلد التوزيع مرة واحدة ثم ربما نقوم ببعض التعديلات

53
00:04:18,850 --> 00:04:23,310
على ملفاتنا المصدر ثم قد نحتاج إلى إعادة ترجمة مجلد التوزيع الخاص بنا.

54
00:04:24,420 --> 00:04:29,370
الخطوة الأولى، سنقوم بإعداد البرنامج النصي لتنظيف مجلد التوزيع هذا

55
00:04:29,370 --> 00:04:33,050
يعني بشكل أساسي، حذف مجلد التوزيع.

56
00:04:33,050 --> 00:04:37,950
لذلك للقيام بذلك، وأنا ذاهب إلى اتخاذ مساعدة من وحدة الآلية الوقائية الوطنية تسمى ريمفراف.

57
00:04:37,950 --> 00:04:47,760
لذلك سأقوم بتثبيت npm - حفظ ديف ريمفراف.

58
00:04:47,760 --> 00:04:51,920
تساعدنا هذه الوحدة على تنظيف مجلد تمامًا.

59
00:04:51,920 --> 00:04:56,370
لذلك بمجرد تثبيت هذا، سأقوم بإعداد برنامج نصي

60
00:04:56,370 --> 00:05:01,550
في ملف package.json الخاص بي لتنظيف جميع الملفات.

61
00:05:01,550 --> 00:05:05,360
الذهاب إلى ملف package.json، وأنا ذاهب إلى إضافة في، لذلك

62
00:05:05,360 --> 00:05:11,380
تذكر دائما أن غيبوبة جدا، مهم جدا في تلك البرامج النصية.

63
00:05:11,380 --> 00:05:15,200
في بعض الأحيان سوف تواجه مشاكل فقط لأنك نسيت الفاصلة.

64
00:05:15,200 --> 00:05:18,230
لذا تأكد من وضع تلك الفواصل عند الضرورة.

65
00:05:18,230 --> 00:05:21,800
الوصف التالي الذي سأقوم بإضافته هو، نظيف،

66
00:05:23,410 --> 00:05:29,000
من الواضح كما يوحي الاسم، وهذا سوف ينظف المجلد الخاص بي.

67
00:05:29,000 --> 00:05:32,510
لذا سأقول حي الرمراف

68
00:05:32,510 --> 00:05:35,610
ما يعنيه هذا هو أن هذا، عند تنفيذه،

69
00:05:35,610 --> 00:05:39,860
سيؤدي إلى تنظيف مجلد التوزيع.

70
00:05:39,860 --> 00:05:42,215
لذلك سأضيف ذلك،

71
00:05:42,215 --> 00:05:46,780
ثم سأضع تلك الفاصلة هناك لأنني سأضيف المزيد من البرامج النصية تحت هذا.

72
00:05:46,780 --> 00:05:51,814
لذلك اسمحوا لي حفظ التغييرات، والخطوة التالية التي سأقوم بها هي

73
00:05:51,814 --> 00:05:57,048
تثبيت وحدة npm تسمى ملفات النسخ التي تستخدم لنسخ

74
00:05:57,048 --> 00:06:03,206
بعض ملفات الخط من مجلد وحدات العقدة إلى مجلد التوزيع الخاص بي.

75
00:06:03,206 --> 00:06:07,430
بحيث عندما يتم نشرها، يتم نشر ملفات الخط أيضًا.

76
00:06:07,430 --> 00:06:12,840
الذهاب إلى المحطة، الحزمة التالية التي سأقوم بتثبيتها هي

77
00:06:12,840 --> 00:06:19,860
npm -g، أذكر أن هذا يعني أنه يجب تثبيتها على مستوى العالم.

78
00:06:19,860 --> 00:06:23,900
بما أنني أفعل هذا على جهاز Mac،

79
00:06:23,900 --> 00:06:30,670
يجب أن أقول sudo npm -g، إذا كنت تفعل ذلك على Windows، فأنت لا تحتاج إلى sudo.

80
00:06:30,670 --> 00:06:37,053
sudo npm -g تثبيت ملفات النسخ.

81
00:06:42,837 --> 00:06:47,493
وبعد ذلك بمجرد تثبيت ذلك، ستساعدني وحدة NPM هذه على نسخ

82
00:06:47,493 --> 00:06:50,360
الملفات من مجلد واحد إلى مجلد آخر.

83
00:06:51,390 --> 00:06:54,650
الآن، اسمحوا لي أن أقدم سيناريو آخر للآلية الوقائية الوطنية هنا.

84
00:06:56,110 --> 00:06:59,534
الذهاب إلى ملف package.json الخاص بي،

85
00:06:59,534 --> 00:07:05,046
سأقوم بإنشاء برنامج سكريب جديد هنا اسم copyfonts.

86
00:07:05,046 --> 00:07:09,666
سيمكنني هذا البرنامج النصي من نسخ كافة ملفات الخطوط من مجلد

87
00:07:09,666 --> 00:07:13,650
Font Awesome الخاص بي إلى مجلد التوزيع الخاص بي.

88
00:07:13,650 --> 00:07:17,510
بحيث عندما يتم عرض موقع الويب الخاص بي،

89
00:07:17,510 --> 00:07:21,500
يمكن أيضًا إرسال جميع ملفات الخطوط هذه، بحيث

90
00:07:21,500 --> 00:07:26,110
يتم عرض صفحات الويب الخاصة بي بشكل صحيح مع خطوط Font Awesome في مكانها.

91
00:07:26,110 --> 00:07:30,949
لذلك للقيام بذلك، سأقول، نسخ الملفات -f،

92
00:07:30,949 --> 00:07:36,530
-f يعني أنه ببساطة نسخ الملفات دون كامل التسلسل الهرمي

93
00:07:36,530 --> 00:07:40,550
وببساطة نسخ الملفات من موقع واحد إلى موقع آخر.

94
00:07:40,550 --> 00:07:53,594
لذلك سأقول نسخ الملفات -f

95
00:08:03,367 --> 00:08:09,416
node_modues/font_awesome/خطوط/نجمة وتوزيع/الخطوط،

96
00:08:12,386 --> 00:08:14,970
ومن ثم حفظ التغييرات.

97
00:08:14,970 --> 00:08:20,620
اسمحوا لي الآن أن أوضح كيف تعمل هذه البرامج النصية npm معا.

98
00:08:20,620 --> 00:08:25,605
الذهاب إلى نافذة الأوامر الخاصة بي، وسوف اكتب

99
00:08:25,605 --> 00:08:30,300
npm تشغيل copyfonts.

100
00:08:30,300 --> 00:08:34,650
عند تشغيل هذا، سيتم إنشاء مجلد

101
00:08:34,650 --> 00:08:38,640
باسم dist في التسلسل الهرمي لمجلد المشروع الخاص بي.

102
00:08:38,640 --> 00:08:39,880
ثم داخل dist،

103
00:08:39,880 --> 00:08:44,730
سيكون هناك مجلد فرعي باسم الخطوط، والذي سيحتوي على ملفات الخط.

104
00:08:44,730 --> 00:08:46,310
حتى تشغيل هذا،

105
00:08:46,310 --> 00:08:50,480
ستلاحظ على الفور أن مجلد التوزيع يتم إنشاؤه هنا.

106
00:08:50,480 --> 00:08:52,190
وداخل مجلد التوزيع،

107
00:08:52,190 --> 00:08:55,000
يمكنك أن ترى أن هناك مجلد فرعي باسم الخطوط.

108
00:08:55,000 --> 00:08:58,760
وفي الداخل هناك، تم نسخ جميع ملفات «فونتاويسوم».

109
00:09:00,070 --> 00:09:03,700
هذه هي الطريقة التي يعمل بها البرنامج النصي copyfonts.

110
00:09:04,790 --> 00:09:08,720
الآن، سأريكم كيف يعمل النص النظيف

111
00:09:08,720 --> 00:09:15,275
حتى إذا كنت اكتب في npm تشغيل نظيفة، وهذا هو الذهاب الى حذف مجلد التوزيع هذا.

112
00:09:15,275 --> 00:09:17,805
لذلك عند تشغيل ذلك، ستلاحظ أنه

113
00:09:17,805 --> 00:09:22,435
يتم حذف مجلد التوزيع من التسلسل الهرمي لمجلد المشاريع الخاصة بي.

114
00:09:22,435 --> 00:09:25,055
إذن هذه هي الطريقة التي يعمل بها النظيف.

115
00:09:25,055 --> 00:09:28,075
الآن بعد أن قمنا بإعداد هذين النصين،

116
00:09:28,075 --> 00:09:32,735
نحتاج الآن إلى أن نكون قادرين على بناء ملفات التوزيع المتبقية.

117
00:09:33,745 --> 00:09:39,034
في الخطوة التالية، سنقوم بتثبيت وحدة عقدة تسمى imagemin-cli،

118
00:09:39,034 --> 00:09:43,182
وهي واجهة سطر الأوامر لوحدة imagemin.

119
00:09:43,182 --> 00:09:51,032
ستأخذ وحدة imaginemin مجموعة من ملفات الصور ثم ضغطها لأسفل.

120
00:09:51,032 --> 00:09:57,550
لذلك يتم تصغير حجم هذه الملفات إلى أقصى حد ممكن،

121
00:09:57,550 --> 00:10:01,650
ولكن لا يزال يتم تقديمها بشكل صحيح عندما يتم تقديم موقعنا على الانترنت.

122
00:10:01,650 --> 00:10:05,060
وبهذه الطريقة، سنقوم بتقليل كمية البيانات التي

123
00:10:05,060 --> 00:10:09,870
تحتاج إلى تنزيلها من قبل المتصفح عندما تحتاج إلى عرض صفحة الويب الخاصة بنا.

124
00:10:09,870 --> 00:10:16,250
حتى إذا كنت تضمين الصور في صفحة الويب الخاصة بك، ثم مهمة إيماجيمين هو

125
00:10:16,250 --> 00:10:21,950
شيء يجب أن تتعلم من أجل تور تقليل حجم ملفات الصور الخاصة بك.

126
00:10:21,950 --> 00:10:29,740
لذلك للقيام بذلك، سأقوم بتثبيت وحدة عقدة imagemin هذه كوحدة نمطية عالمية.

127
00:10:29,740 --> 00:10:36,145
لذلك أنا اكتب في sudo، لأنني أستخدم جهاز Mac،

128
00:10:36,145 --> 00:10:41,270
npm -g تثبيت imagemin-cli،

129
00:10:41,270 --> 00:10:46,770
ثم قم بتثبيت وحدة العقدة هذه.

130
00:10:50,730 --> 00:10:56,670
في بعض الأحيان على ماك، لا يتم تثبيت بعض المكونات الإضافية إيماجيمين بشكل صحيح.

131
00:10:56,670 --> 00:11:02,979
لذلك هذا هو السبب في أنني أعطي هذه الأعلام الإضافية إلى الأمر،

132
00:11:02,979 --> 00:11:09,310
يقولون - غير آمنة بيرم = صحيح و - ألو-الجذر.

133
00:11:09,310 --> 00:11:12,497
بمجرد اكتمال هذا التثبيت،

134
00:11:12,497 --> 00:11:18,183
اسمحوا لي إعداد برنامج نصي من أجل القيام بذلك التكبير من الصور الخاصة بي.

135
00:11:18,183 --> 00:11:23,650
الذهاب إلى package.json مرة أخرى، سأقوم بإعداد البرنامج النصي التالي هنا.

136
00:11:23,650 --> 00:11:32,350
لذلك أود أن أقول إيماجيمين هو اسم البرنامج النصي الذي سأقوم به،

137
00:11:32,350 --> 00:11:36,610
وأود أن أقول إيماجيمين.

138
00:11:36,610 --> 00:11:43,930
وبعد ذلك بما أن جميع الصور الخاصة بي موجودة في مجلد img، أود أن أقول img/*،

139
00:11:43,930 --> 00:11:49,913
ثم سيتم نسخ العديد من الملفات إلى صورة dist.

140
00:11:49,913 --> 00:11:54,997
لذلك سيتم نسخ ملفات الصور الأصلية من مجلد الصور التي لدي

141
00:11:54,997 --> 00:12:00,300
في مجلد التوزيع وفي المجلد الفرعي للصورة هناك.

142
00:12:00,300 --> 00:12:03,616
لذلك هذا يكمل إيماجيمين بلدي.

143
00:12:03,616 --> 00:12:07,460
اسمحوا لي أن المضي قدما في إعداد المتبقية،

144
00:12:07,460 --> 00:12:13,070
وبعد ذلك سوف نرى كيف سنستفيد من البرامج النصية التي قمنا بإعدادها بالفعل هناك.

145
00:12:14,260 --> 00:12:19,270
الآن بعد أن لدي مجلد الاختبار هناك، والذي قد أقوم بإنشائه،

146
00:12:19,270 --> 00:12:26,450
لا أريد التحقق من مجلد dist في مستودع Git الخاص بي.

147
00:12:26,450 --> 00:12:31,640
لذلك هذا هو السبب في ملف.gitignore الخاص بي، سأقوم بإضافة في مجلد dist أيضًا.

148
00:12:31,640 --> 00:12:37,060
لذلك سيتم تجاهل مجلد dist عندما أقوم بإجراء التحقق في مستودع Git.

149
00:12:37,060 --> 00:12:43,342
لذلك دعونا حفظ التغييرات، والعودة إلى package.json.

150
00:12:43,342 --> 00:12:49,710
الآن، ما سأقوم به بعد ذلك هو تثبيت ثلاث

151
00:12:50,870 --> 00:12:56,080
وحدات عقدة مختلفة، والتي تمكني من إجراء التعديلات

152
00:12:56,080 --> 00:13:02,550
على ملف index.html وملفات HTML المتبقية هناك.

153
00:13:02,550 --> 00:13:09,280
في موجه الأوامر، اكتب npm install —save dev.

154
00:13:09,280 --> 00:13:16,498
أنا ذاهب لتثبيت وحدة تسمى usemin-cli.

155
00:13:16,498 --> 00:13:21,166
هذا usemin-cli هو الذي يسمح لي بإجراء التحويل من

156
00:13:21,166 --> 00:13:22,230
ملف HTML الخاص بي.

157
00:13:22,230 --> 00:13:26,870
ثم قم بتسلسل جميع

158
00:13:26,870 --> 00:13:30,650
ملفات CSS ودمجها في ملف CSS واحد، ثم ضعها في مجلد التوزيع.

159
00:13:30,650 --> 00:13:36,700
وبالمثل، سيتم تسلسل جميع ملفات JS ووضعها في مجلد واحد.

160
00:13:36,700 --> 00:13:38,720
لذلك هذا الاستخدام كلي مفيد.

161
00:13:38,720 --> 00:13:44,005
ولكن هذا usemin-cli يأخذ مساعدة

162
00:13:44,005 --> 00:13:51,051
من ثلاث وحدات عقدة أخرى تسمى csmin،

163
00:13:51,051 --> 00:13:56,350
ثم uglifyjs، و htmlmin.

164
00:13:56,350 --> 00:14:01,600
لذلك أنا بحاجة إلى تثبيت هذه الوحدات العقدة الثلاث بالإضافة إلى usemin-cli.

165
00:14:01,600 --> 00:14:04,610
وسأقوم بتثبيت هذا محليًا في مشروعي، لذلك هذا

166
00:14:04,610 --> 00:14:08,330
هو السبب في تثبيت npm - save-def.

167
00:14:08,330 --> 00:14:13,910
بهذه الطريقة، سيتم تذكرها في ملف package.json الخاص بي.

168
00:14:13,910 --> 00:14:15,890
لذلك دعونا المضي قدما واستكمال التثبيت.

169
00:14:17,230 --> 00:14:21,270
الآن بعد أن قمت بتثبيت usemin

170
00:14:21,270 --> 00:14:26,440
ووحدات العقدة ذات الصلة، أحتاج إلى القيام ببعض التحويل

171
00:14:26,440 --> 00:14:30,695
إلى ملف index.html وملفات HTML المتبقية.

172
00:14:30,695 --> 00:14:35,750
بحيث يتعرف usemin node_module على أن هذه المجموعة عبارة

173
00:14:35,750 --> 00:14:42,330
عن مجموعة من ملفات CSS التي تحتاج إلى ضغطها وحسابها والتحقق منها.

174
00:14:42,330 --> 00:14:47,730
وبالمثل، هذه هي مجموعة ملفات جافا سكريبت التي تحتاج إلى أن تكون

175
00:14:47,730 --> 00:14:51,130
مذكورة، مجتمعة، ومسلسلة معا.

176
00:14:51,130 --> 00:14:54,480
لذلك لمساعدة عمل حزمة usemin،

177
00:14:54,480 --> 00:15:00,430
أحتاج إلى إضافة القليل من التعليمات البرمجية في ملف index.html الخاص بي.

178
00:15:00,430 --> 00:15:07,942
حتى الحق قبل الرابط الأول هناك،

179
00:15:07,942 --> 00:15:14,747
وأنا ذاهب لإضافة في علامة فوق هنا،

180
00:15:14,747 --> 00:15:21,100
الذي يقول! - بناء:css.

181
00:15:21,100 --> 00:15:25,621
الآن، هذا! -، كما ستتعرف،

182
00:15:25,621 --> 00:15:29,640
هو تعليق من منظور أتش تي أم أل.

183
00:15:29,640 --> 00:15:33,405
حتى داخل هذا التعليق، وأنا ذاهب لتضمين أن هذا الخط معين

184
00:15:33,405 --> 00:15:38,480
سوف تستخدم من قبل قائمة الاستخدام من أجل التعرف على كتلة من

185
00:15:38,480 --> 00:15:43,370
التعليمات البرمجية التي تحدد جميع ملفات CSS التي تحتاج إلى نقلها.

186
00:15:43,370 --> 00:15:49,743
لذلك أقول build.css، وبعد ذلك سوف تحديد

187
00:15:49,743 --> 00:15:54,770
اسم الملف كما css/main.css.

188
00:15:54,770 --> 00:15:57,160
هذا هو بناء الجملة لتحديد.

189
00:15:57,160 --> 00:16:04,080
ما يعنيه هذا هو أن ملفات Block of CSS هذه سيتم دمجها معًا،

190
00:16:04,080 --> 00:16:10,510
ثم يتم تسلسلها، وتصغيرها، ثم وضعها في هذا الملف المسمى main.css.

191
00:16:10,510 --> 00:16:15,723
ومن ثم سيتم تحديد هذه الكتلة على الجانب الآخر بقول،

192
00:16:21,873 --> 00:16:27,090
واصلة —، حسنا، آسف.

193
00:16:27,090 --> 00:16:34,210
نسيت أن تشمل اندفاعة مزدوجة في النهاية هناك.

194
00:16:34,210 --> 00:16:37,050
هذا هو السبب في أن هذا لم يتحول الألوان.

195
00:16:37,050 --> 00:16:41,780
لذلك في بعض الأحيان كنت سعيدا أن

196
00:16:41,780 --> 00:16:46,540
المحرر الخاص بك يشير إلى هذه الأخطاء المحتملة التي قد تكون ارتكبت.

197
00:16:46,540 --> 00:16:51,779
لذلك هناك الحق أود أن أقول endbuild

198
00:16:51,779 --> 00:16:56,206
وبعد ذلك — قوس الحق هناك.

199
00:16:56,206 --> 00:17:00,904
الآن، أيا كان بين هذا البناء و

200
00:17:00,904 --> 00:17:06,708
endbuild، سيتم التعامل مع هذه المجموعة كوحدة

201
00:17:06,708 --> 00:17:12,252
ليتم دمجها من قبل وحدة npm usemin لدينا هناك.

202
00:17:12,252 --> 00:17:14,890
شاهد بناء الجملة الذي تستخدمه وحدة usemin هناك.

203
00:17:16,230 --> 00:17:22,020
أنا بحاجة إلى القيام بنفس التحول إلى contactus.html و aboutus.html أيضا.

204
00:17:22,020 --> 00:17:26,759
لذلك أنا ذاهب لنسخ هذا واحد

205
00:17:26,759 --> 00:17:31,306
هنا واحد كسول أن أنا.

206
00:17:31,306 --> 00:17:35,149
أنا ببساطة مجرد نسخ

207
00:17:35,149 --> 00:17:39,866
ولصق في contactus.html

208
00:17:39,866 --> 00:17:44,770
ثم أيضا aboutus.html هناك.

209
00:17:44,770 --> 00:17:50,263
وبالمثل، والعودة إلى index.html،

210
00:17:50,263 --> 00:17:56,477
سأقوم بنسخ هذا inbuild ثم نسخ ذلك إلى

211
00:17:56,477 --> 00:18:01,840
contactus.html و aboutus.html البيانات.

212
00:18:03,530 --> 00:18:08,990
حسنا، دعونا حفظ التغييرات على جميع الملفات.

213
00:18:08,990 --> 00:18:12,190
ثم، والعودة إلى index.html.

214
00:18:12,190 --> 00:18:16,670
سأكرر نفس الشيء في الأسفل

215
00:18:16,670 --> 00:18:22,220
لنصوص جافا سكريبت الخاصة بي التي قمت بتضمينها هناك.

216
00:18:22,220 --> 00:18:26,730
لذلك، الذهاب إلى أسفل هنا،

217
00:18:26,730 --> 00:18:30,026
ما أحتاج إلى القيام به هنا،

218
00:18:30,026 --> 00:18:34,883
هو تحديد <! - بناء

219
00:18:34,883 --> 00:18:39,225
شبيبة، وسوف أقول js/main.js.

220
00:18:41,216 --> 00:18:43,130
واصلة مزدوجة، شرطة مائلة

221
00:18:43,130 --> 00:18:47,781
لذلك هذا هو بداية الكتلة ومن ثم يتم تحديد النهاية من قبل،

222
00:18:51,540 --> 00:18:55,034
بناء، حسنا؟

223
00:18:55,034 --> 00:19:00,782
حتى مع هذه التغييرات، الآن، ملف index.html الخاص بي جاهز،

224
00:19:00,782 --> 00:19:07,899
ويجب أن أفعل نفس التحول إلى contactus.html في الجزء السفلي.

225
00:19:14,090 --> 00:19:18,715
و aboutus.html أيضا في الجزء السفلي.

226
00:19:25,340 --> 00:19:29,505
وبالمثل، تم نسخ هذا enbuild في.

227
00:19:32,892 --> 00:19:38,649
في contactus.html و aboutus.html ثم حفظ كافة الملفات.

228
00:19:40,130 --> 00:19:44,550
والتي تعد ملفات HTML لدينا

229
00:19:44,550 --> 00:19:48,940
ليتم تحويلها لإعداد مجلد التوزيع.

230
00:19:48,940 --> 00:19:53,540
ستبقى هذه الملفات على هذا النحو، ولكن بعد ذلك سيتم وضع الملفات المحولة في

231
00:19:53,540 --> 00:19:58,380
مجلد التوزيع الذي تم إنشاؤه من هذه الملفات.

232
00:19:58,380 --> 00:20:02,948
الآن، بمجرد الانتهاء من ذلك، دعونا إعداد بعض البرامج النصية.

233
00:20:02,948 --> 00:20:07,875
الذهاب إلى package.json، سأقوم بإعداد البرنامج النصي التالي يسمى usemin.

234
00:20:11,930 --> 00:20:15,890
ثم هذا يقول usemin،

235
00:20:19,977 --> 00:20:24,671
contactus.html -d dist، وهذا هو بناء الجملة

236
00:20:24,671 --> 00:20:29,366
لتحديد -d dist يعني أن الوجهة

237
00:20:29,366 --> 00:20:32,507
لهذا المجلد التوزيع.

238
00:20:32,507 --> 00:20:39,110
ثم أود أن أقول htmlmin، وهذا هو أيضا الذهاب إلى تقليل ملف HTML.

239
00:20:39,110 --> 00:20:43,300
لذلك ستقوم بإزالة جميع المسافات والتعليقات الدخيلة من ملف HTML.

240
00:20:43,300 --> 00:20:45,110
لكنهم يضغطون

241
00:20:45,110 --> 00:20:48,350
عليه بحيث يحتوي على الحد الأدنى لعدد الأحرف هناك.

242
00:20:48,350 --> 00:20:55,165
سنلقي نظرة على النتيجة بعد أن نكمل ونقوم بالتحول هناك.

243
00:20:55,165 --> 00:21:00,528
ذلك وبعد ذلك، ليس فقط ذلك،

244
00:21:00,528 --> 00:21:05,509
ثم htmlmin، ثم قل

245
00:21:05,509 --> 00:21:10,684
-o dist/contactus.html و

246
00:21:10,684 --> 00:21:15,664
&&، وهذا يعني أن هناك

247
00:21:15,664 --> 00:21:19,970
المزيد ليأتي بعد هذا.

248
00:21:19,970 --> 00:21:25,730
ثم سأقول usemin

249
00:21:25,730 --> 00:21:31,171
ثم aboutus.html

250
00:21:31,171 --> 00:21:36,932
-d dist —htmlmin

251
00:21:36,932 --> 00:21:45,560
-o dist/aboutus.html.

252
00:21:45,560 --> 00:21:50,078
لذلك هذا هو الثاني لتحويل ملف aboutus.html.

253
00:21:50,078 --> 00:21:55,135
وبعد ذلك &&، وهذا هو برنامج نصي طويل،

254
00:21:55,135 --> 00:21:58,139
usemin index.html،

255
00:21:58,139 --> 00:22:02,890
نحن بحاجة إلى تحويل جميع الملفات.

256
00:22:02,890 --> 00:22:08,150
لهذا السبب أحتاج إلى تحديد كل واحد بشكل صريح هناك.

257
00:22:08,150 --> 00:22:11,910
usemin لا يأخذ بطاقات البرية، لذلك

258
00:22:11,910 --> 00:22:16,080
هذا هو السبب في أنني يجب أن تحدد عقد مثل [غير مسموع].

259
00:22:16,080 --> 00:22:21,365
وهكذا usemin index.html

260
00:22:21,365 --> 00:22:27,426
-d dist —htmlmin

261
00:22:27,426 --> 00:22:34,160
-o dist/index.html.

262
00:22:34,160 --> 00:22:40,656
ثم بعد ذلك وضعت فاصلة لأنني ذاهب لتقديم النص التالي،

263
00:22:40,656 --> 00:22:45,940
وهو، ودعا بناء.

264
00:22:45,940 --> 00:22:50,490
لذلك سيقوم هذا البرنامج النصي بناء بإنشاء مجلد التوزيع الخاص بي.

265
00:22:50,490 --> 00:22:54,159
لذلك لإنشاء مجلد التوزيع الخاص بي،

266
00:22:54,159 --> 00:22:59,328
فإن أول شيء سأقوم به هو تشغيل npm نظيف.

267
00:22:59,328 --> 00:23:07,090
ثم npm تشغيل copyfonts.

268
00:23:07,090 --> 00:23:12,347
لقد رأيت بالفعل هذين في العمل في وقت سابق،

269
00:23:12,347 --> 00:23:18,950
ثم سأقول npm تشغيل imagemin لإنشاء الصور المصغرة،

270
00:23:18,950 --> 00:23:23,220
وبعد ذلك أود أن أقول npm تشغيل usemin.

271
00:23:23,220 --> 00:23:29,257
وسيقوم هذا البرنامج النصي الخاص ببناء مجلد التوزيع الخاص بي،

272
00:23:29,257 --> 00:23:36,171
ويمكن بعد ذلك نسخ محتوياته إلى خادم الويب الخاص بي لحل الملعب الخاص بي.

273
00:23:36,171 --> 00:23:39,238
احفظ التغييرات.

274
00:23:39,238 --> 00:23:45,837
دعونا نرى الآن كيف نبني الموقع.

275
00:23:45,837 --> 00:23:49,431
عند هذه النقطة، لبناء موقعنا على الانترنت

276
00:23:49,431 --> 00:23:55,950
وموجه الأوامر هو ببساطة اكتب npm run build ثم تنفيذ فقط.

277
00:23:55,950 --> 00:24:00,430
هذا البرنامج النصي، والذي بدوره سيتم تنفيذ مجموعة

278
00:24:00,430 --> 00:24:05,440
من أي من البرامج النصية، والتي بدورها سوف تكمل مجموعة كاملة

279
00:24:05,440 --> 00:24:10,870
من المهام التي يجب تنفيذها من أجل إعداد مجلد التوزيع الخاص بي.

280
00:24:10,870 --> 00:24:13,690
لذلك، دعونا المضي قدما وتشغيل هذا الشيء

281
00:24:13,690 --> 00:24:18,520
ومن ثم هذا سوف تعمل من خلال جميع البرامج النصية المختلفة هناك.

282
00:24:18,520 --> 00:24:23,320
يستغرق الأمر بضع دقائق حتى يكتمل، وعندما يكتمل،

283
00:24:23,320 --> 00:24:29,838
سيكون مجلد التوزيع الخاص بك جاهزًا الآن للنشر على خادم الويب الخاص بك.

284
00:24:29,838 --> 00:24:34,950
الذهاب إلى المحرر لدينا،

285
00:24:34,950 --> 00:24:38,750
ترى الآن أن مجلد التوزيع جاهز الآن.

286
00:24:38,750 --> 00:24:44,020
داخل مجلد التوزيع سترى ملفات الفهرس الثلاثة،

287
00:24:44,020 --> 00:24:48,580
وفي مجلد CSS، سترى الملف المفرد المسمى m ain.css،

288
00:24:48,580 --> 00:24:55,050
والذي يحتوي على جميع Bootstraps CSS، و Bootstraps CSS،

289
00:24:55,050 --> 00:24:57,660
ورمز CSS الذي قمت بإنشائه.

290
00:24:58,690 --> 00:25:01,863
وسوف يحتوي مجلد JS على main.js،

291
00:25:01,863 --> 00:25:05,287
الذي يحتوي على Bootstrap، و jQuery،

292
00:25:05,287 --> 00:25:10,905
وجميع مجموعة كاملة من شفرة جافا سكريبت مجتمعة معا في ملف واحد.

293
00:25:10,905 --> 00:25:15,638
سوف تحتوي الصورة على الصور المحسنة، والخطوط، من الواضح،

294
00:25:15,638 --> 00:25:18,730
كنت قد رأيت في وقت سابق، تحتوي على ملفات الخط.

295
00:25:18,730 --> 00:25:24,030
الآن، دعونا نلقي نظرة سريعة على index.html التي تم إنشاؤها هنا.

296
00:25:24,030 --> 00:25:27,290
لذلك عندما تنظر إلى index.html الذي تم إنشاؤه هنا،

297
00:25:27,290 --> 00:25:31,120
ستلاحظ أن كل شيء غير قابل للقراءة حرفياً،

298
00:25:32,530 --> 00:25:37,850
لأنه عندما فعلت HTML min، فقد جردت جميع

299
00:25:39,500 --> 00:25:42,800
التعليقات الدخيلة، فقد جردت جميع المساحات،

300
00:25:42,800 --> 00:25:48,100
ثم أنشأت مجموعة تشغيل كاملة من الأحرف.

301
00:25:49,540 --> 00:25:52,800
إلى الكمبيوتر لا يحدث أي فرق لأنه سيعرض

302
00:25:52,800 --> 00:25:55,190
صفحة الويب هذه أيضًا.

303
00:25:55,190 --> 00:25:58,727
بالنسبة لي ولكم، هذا يحدث فرقاً، لأننا لا نستطيع قراءة هذا بسهولة.

304
00:26:01,038 --> 00:26:05,620
لذلك هذا هو ما يسبب تصغير ملف HTML الخاص بك.

305
00:26:05,620 --> 00:26:08,180
دعونا نلقي نظرة على main.css.

306
00:26:08,180 --> 00:26:12,200
عندما تنظر إلى main.css ترى كل شيء هو مطحون حتى

307
00:26:12,200 --> 00:26:15,090
في وحدة واحدة، كما تذهب إلى أسفل.

308
00:26:16,300 --> 00:26:20,808
إذا كنت شجاعا بما فيه الكفاية, النزول إلى أسفل وبعد ذلك

309
00:26:24,793 --> 00:26:29,683
سترى, سترى ساعات مكتوبة خصيصا

310
00:26:29,683 --> 00:26:34,870
الطبقات CSS الحق في أسفل هنا.

311
00:26:37,220 --> 00:26:42,801
هناك حق، يمكنك التعرف على زر دائري، وأشياء أخرى،

312
00:26:42,801 --> 00:26:49,693
قبض الظلام، وأشياء أخرى هناك، لذلك كل شيء سكرونشد تصل إلى.

313
00:26:49,693 --> 00:26:52,896
لذلك هذا هو ما التصغير، والتكاليف.

314
00:26:52,896 --> 00:26:55,530
Main.js، نفس الشيء.

315
00:26:55,530 --> 00:26:56,545
رمز غير قابل للقراءة هناك.

316
00:26:56,545 --> 00:26:59,440
جهاز الكمبيوتر الخاص بهم، لا فرق.

317
00:26:59,440 --> 00:27:03,580
لذلك مع هذا، مجلد التوزيع لدينا اكتمل الآن.

318
00:27:03,580 --> 00:27:06,250
دعونا تحقق من مجلد التوزيع لدينا.

319
00:27:06,250 --> 00:27:08,669
لحسن الحظ، لدينا خادم الضوء قيد التشغيل بالفعل.

320
00:27:08,669 --> 00:27:12,014
لذا ما سأقوم به هو الانتقال إلى المتصفح،

321
00:27:12,014 --> 00:27:16,867
ثم التحقق من ملف CLM جاهز للفهرس في مجلد التوزيع هذا

322
00:27:16,867 --> 00:27:20,507
لمعرفة ما إذا كان يتم تقديمه بشكل صحيح أم لا.

323
00:27:20,507 --> 00:27:25,870
الذهاب إلى المتصفح، في شريط العناوين الخاص بي، سأكتب

324
00:27:25,870 --> 00:27:31,440
، dist index.html،

325
00:27:31,440 --> 00:27:36,920
ولاحظ أن هذا

326
00:27:36,920 --> 00:27:40,680
الملف

327
00:27:40,680 --> 00:27:47,370
المعين هو ملف التوزيع الذي تم إنشاؤه، ويحتوي بالضبط على نفس الشيء ويعرض بالضبط بنفس طريقة صفحة الويب الأصلية التي أنشأناها.

328
00:27:47,370 --> 00:27:52,230
حول، وبالمثل، لاحظ أن هذا aboutus.html من

329
00:27:52,230 --> 00:27:57,490
مجلد التوزيع ويتم تقديم هذا بالضبط كما كان من قبل،

330
00:27:57,490 --> 00:28:01,350
وأيضا ملف contactus.html.

331
00:28:01,350 --> 00:28:03,360
كل شيء يعمل بشكل مثالي

332
00:28:03,360 --> 00:28:08,970
حتى الآن كل ما تبقى لك للقيام به من أجل نشر صفحة الويب الخاصة بك،

333
00:28:08,970 --> 00:28:15,530
أو موقع الويب الخاص بك، هو ببساطة نسخ المحتويات من مجلد dist،

334
00:28:15,530 --> 00:28:19,460
ومن ثم تحميله إلى خادم الويب الخاص بك، ومن

335
00:28:19,460 --> 00:28:24,830
ثم خادم الويب الخاص بك هو قيد التشغيل، وخدمة موقع الويب الخاص بك.

336
00:28:26,080 --> 00:28:28,740
مع هذا، نكمل هذا التمرين.

337
00:28:28,740 --> 00:28:33,620
في هذا التمرين، رأينا كيف يمكننا الاستفادة من

338
00:28:33,620 --> 00:28:38,636
مخطوطات NBM من أجل بناء ونشر موقعنا على الانترنت.

339
00:28:38,636 --> 00:28:40,610
قد يكون هذا هو الوقت المناسب بالنسبة

340
00:28:40,610 --> 00:28:45,223
لك للقيام بتعليق مع رسالة NPM Scripts، الجزء 2.

341
00:28:45,223 --> 00:28:50,815
[ موسيقى]