1
00:00:03,510 --> 00:00:06,510
دعونا نواصل شخرنا

2
00:00:06,510 --> 00:00:11,175
كما فعلنا في الجزء الثاني من تمرين نصوص الآلية الوقائية الوطنية،

3
00:00:11,175 --> 00:00:14,660
في هذا الجزء الثاني من هذا التمرين الناخر،

4
00:00:14,660 --> 00:00:17,080
سنقوم بتكوين نفس المهام بالضبط.

5
00:00:17,080 --> 00:00:20,475
سنقوم بتنظيف مجلد التوزيع،

6
00:00:20,475 --> 00:00:23,175
ونسخ الخطوط إلى مجلد التوزيع،

7
00:00:23,175 --> 00:00:29,780
ثم سنقوم أيضًا بإجراء تصغير صورنا باستخدام imagemin،

8
00:00:29,780 --> 00:00:37,530
ثم استخدم مهمة usemin لإنشاء وإعداد مجلد التوزيع الخاص بنا.

9
00:00:37,530 --> 00:00:40,420
الاستمرار في ممارسة لدينا،

10
00:00:40,420 --> 00:00:43,590
وسوف تثبيت اثنين من وحدات النخر.

11
00:00:43,590 --> 00:00:49,990
لذلك، دعونا تثبيت الآلية الوقائية الوطنية، تثبيت غرونت-كونتريب-نسخة.

12
00:00:51,110 --> 00:01:00,665
يتم استخدام هذا لنسخ الملفات ثم grunt-contrip نظيفة،

13
00:01:00,665 --> 00:01:04,575
وناقص save-dev.

14
00:01:04,575 --> 00:01:06,655
وبمجرد تثبيت هذين الاثنين،

15
00:01:06,655 --> 00:01:10,595
ثم سنمضي قدما وتكوين المهام المقابلة.

16
00:01:10,595 --> 00:01:12,800
الذهاب إلى ملف النخر الخاص بك،

17
00:01:12,800 --> 00:01:19,770
سنضيف في التكوين لكل من النسخة والمهام النظيفة.

18
00:01:19,770 --> 00:01:22,895
لذلك، بدءا من الفاصلة،

19
00:01:22,895 --> 00:01:26,295
تذكر دائما عدم نسيان الفاصلة.

20
00:01:26,295 --> 00:01:30,360
سيعود ليعضك في اللحظات الخاطئة إذا فعلت ذلك

21
00:01:30,360 --> 00:01:32,245
لذلك دعونا إعداد مهمة النسخ.

22
00:01:32,245 --> 00:01:38,180
بالنسبة للنسخة، تتوقع usemin منا أيضًا الاحتفاظ

23
00:01:38,180 --> 00:01:41,110
بملفات HTML الخاصة بنا منسوخة إلى مجلد التوزيع

24
00:01:41,110 --> 00:01:44,760
بحيث يمكنه القيام بالتلاعب على ذلك.

25
00:01:44,760 --> 00:01:47,250
لذلك، في هذه الحالة،

26
00:01:47,250 --> 00:01:48,630
سنقوم أولاً بنسخ

27
00:01:48,630 --> 00:01:53,440
ملفات HTML من مجلد مشروعنا إلى مجلد التوزيع.

28
00:01:53,440 --> 00:01:55,330
لذلك، للقيام بالنسخ،

29
00:01:55,330 --> 00:02:01,535
سأقوم بإعداد جزء HTML منه.

30
00:02:01,535 --> 00:02:04,740
لذلك، هذا هو المكان الذي سنستخدم

31
00:02:04,740 --> 00:02:09,920
فيه بعض بناء الجملة الناخر لتحديد الملفات التي تحتاج إلى نسخ.

32
00:02:09,920 --> 00:02:19,880
لذلك، أقول الملفات وأيضا تحديد

33
00:02:19,880 --> 00:02:23,560
الأقواس اليمنى واليسرى واليمنى هناك حتى داخل هذا،

34
00:02:23,560 --> 00:02:27,855
وأنا بحاجة إلى تحديد الآن تكوين معين.

35
00:02:27,855 --> 00:02:37,600
لذا، أود أن أقول، قم بتوسيع صحيح ونقطة صحيح، ثم CWD،

36
00:02:37,600 --> 00:02:42,015
دليل العمل الحالي هو شرطة مائلة نقطية

37
00:02:42,015 --> 00:02:44,440
، وبعد ذلك،

38
00:02:44,440 --> 00:02:51,730
سنقوم بتكوين الملف التالي الذي هو SRC،

39
00:02:51,730 --> 00:02:56,690
وملفات المصدر، ثم الملفات المصدر هي star.html،

40
00:02:56,690 --> 00:02:59,325
جميع ملفات HTML،

41
00:02:59,325 --> 00:03:05,850
وبعد ذلك سنقوم بنسخها إلى مجلد dist.

42
00:03:05,850 --> 00:03:10,135
لهذا السبب يتم تعيين الوجهة إلى مجلد التوزيع هنا.

43
00:03:10,135 --> 00:03:12,385
لذلك، مع هذا الإعداد،

44
00:03:12,385 --> 00:03:18,880
ستقوم مهمة النسخ الخاصة بي بنسخ كافة ملفات HTML إلى مجلد التوزيع.

45
00:03:18,880 --> 00:03:22,285
الآن جنبا إلى جنب مع ذلك، نحن بحاجة أيضا لنسخ الخطوط.

46
00:03:22,285 --> 00:03:26,200
لذلك، سأقوم بإعداد الثانية للخطوط.

47
00:03:26,200 --> 00:03:31,090
لذلك، أنا تحديد الخطوط ثم هنا أيضا أنا بحاجة إلى تحديد

48
00:03:31,090 --> 00:03:37,500
الملفات التي تحتاج إلى نسخ وهكذا نقول الملفات،

49
00:03:37,500 --> 00:03:41,780
ومن ثم هذه هي

50
00:03:41,780 --> 00:03:47,465
بعض المعلمات التكوين التي تحتاج إلى إعداد لمهمة النسخ.

51
00:03:47,465 --> 00:03:49,225
الآن، إذا كنت بحاجة إلى فهم،

52
00:03:49,225 --> 00:03:54,510
ثم من خلال قراءة وثائق البرنامج المساعد نخر المقابلة،

53
00:03:54,510 --> 00:03:57,650
عليك أن تكون قادرة على معرفة ذلك وهكذا أو يمكنك

54
00:03:57,650 --> 00:04:00,960
ببساطة اتباع المثال الذي أعطي هنا.

55
00:04:00,960 --> 00:04:05,350
لذا، نقطة true، ثم CWD،

56
00:04:05,350 --> 00:04:14,780
دليل العمل الحالي هو وحدات العقدة والخط رهيبة.

57
00:04:14,780 --> 00:04:18,295
لذلك هذا هو المكان الذي سأقوم بنسخ الملفات منه،

58
00:04:18,295 --> 00:04:27,180
ثم مصدر الملفات هو fontsstar.star،

59
00:04:27,180 --> 00:04:30,310
تلك هي الملفات التي أحتاج إلى نسخها،

60
00:04:30,310 --> 00:04:38,370
والوجهة هي مجلد التوزيع.

61
00:04:38,370 --> 00:04:42,050
لذلك مع هذا، قمت بإعداد مهمة النسخ الخاصة بي لنسخ

62
00:04:42,050 --> 00:04:47,490
كل من ملفات HTML وملفات الخطوط في مجلد التوزيع الخاص بي.

63
00:04:47,490 --> 00:04:52,370
الآن، المهمة التالية التي سأقوم بإعدادها هي المهمة النظيفة.

64
00:04:52,370 --> 00:04:56,290
لذلك، اسمحوا لي تكوين مهمة نظيفة.

65
00:04:56,540 --> 00:05:05,825
بالنسبة للمهمة النظيفة، سأقوم بتكوين البنية،

66
00:05:05,825 --> 00:05:13,460
ثم سأقول أن المصدر هو مجلد التوزيع.

67
00:05:13,460 --> 00:05:19,660
لذلك، تحديد بشكل أساسي أنه يجب تنظيف مجلد التوزيع.

68
00:05:19,830 --> 00:05:27,835
لذلك، الآن قمنا بإعداد النسخة والمهام النظيفة لذلك دعونا حفظ التغييرات.

69
00:05:27,835 --> 00:05:31,530
المهمة التالية التي سأقوم بإعدادها هي مهمة imagemin.

70
00:05:31,530 --> 00:05:40,030
هذا هو ما سنستخدمه لضغط الصور ونسخها في مجلد التوزيع.

71
00:05:40,030 --> 00:05:44,200
للبدء في مهمة imagemin، الخطوة الأولى،

72
00:05:44,200 --> 00:05:49,910
قم بتثبيت البرنامج المساعد الناخر المقابل.

73
00:05:49,910 --> 00:06:00,520
لذلك، غرونت-كونتريب-إيماجيمين، ناقص حفظ.ديف.

74
00:06:00,520 --> 00:06:03,470
وبمجرد أن يتم تثبيت

75
00:06:03,470 --> 00:06:07,330
ذلك، ثم سنمضي قدما وتكوين مهمة imagemin المقابلة.

76
00:06:07,330 --> 00:06:12,015
الذهاب إلى ملف نخر لدينا بعد التكوين لمهمة نظيفة،

77
00:06:12,015 --> 00:06:15,620
وأنا ذاهب لتكوين مهمة إيماجيمين.

78
00:06:15,620 --> 00:06:18,050
لذلك، سأقول إيماجيمين،

79
00:06:19,460 --> 00:06:22,055
ثم الحق في هناك،

80
00:06:22,055 --> 00:06:26,225
وسوف تحدد ديناميكية،

81
00:06:26,225 --> 00:06:30,950
وداخل هناك سوف تحديد الملفات حتى تتمكن من

82
00:06:30,950 --> 00:06:36,010
رؤية أن مواصفات الملف ستكون مماثلة.

83
00:06:36,010 --> 00:06:39,130
أود أن أقول، توسيع صحيح،

84
00:06:39,130 --> 00:06:46,830
ثم CWD هو الدليل الحالي.

85
00:06:49,680 --> 00:06:58,350
ثم مصدر الملفات هو imagestar.

86
00:07:00,840 --> 00:07:05,405
ثم بين قوسين، داخل الأقواس،

87
00:07:05,405 --> 00:07:12,910
أحدد PNG و GIF و JPG.

88
00:07:12,910 --> 00:07:17,000
لذلك أساسا، يمكنك أن ترى نمط الملف العالمي هنا.

89
00:07:17,000 --> 00:07:18,640
لذلك يقول أي

90
00:07:18,640 --> 00:07:21,610
ملفات PNG أو GIF أو JPG التي تتطابق مع هذا النمط ثم

91
00:07:21,610 --> 00:07:25,755
تبدأ نقطة تعني جميع ملفات هذا النمط،

92
00:07:25,755 --> 00:07:29,280
والمصدر، والوجهة،

93
00:07:29,280 --> 00:07:34,310
أقوم بتعيينها كمجلد التوزيع.

94
00:07:34,310 --> 00:07:37,790
لذلك مع هذا، قمنا بتكوين نسختنا

95
00:07:37,790 --> 00:07:39,425
ونظيفة ومهمة imagemin.

96
00:07:39,425 --> 00:07:46,670
دعونا تكوين مهمة هنا تسمى بناء.

97
00:07:46,670 --> 00:07:49,365
لذلك، أود أن أقول، تسجيل المهمة،

98
00:07:49,365 --> 00:07:55,700
مهمة تسجيل النخر ثم سأقوم بتسمية المهمة كبناء،

99
00:07:55,700 --> 00:07:57,695
ثم داخل هذا،

100
00:07:57,695 --> 00:08:03,160
سنقوم بتحديد خطوات الإعداد التي يتعين القيام بها من قبل مهمة البناء.

101
00:08:03,160 --> 00:08:09,105
لذا، هناك، فاصلة منقوطة ثم هناك،

102
00:08:09,105 --> 00:08:13,685
سأحدد المهام الثلاث في التسلسل الذي يجب أن يؤديها.

103
00:08:13,685 --> 00:08:16,650
أولا، سأقول، نظيفة.

104
00:08:16,650 --> 00:08:19,420
لذلك، سنقوم بتنظيف مجلد التوزيع

105
00:08:19,420 --> 00:08:22,340
ثم البدء في إعادة إنشاء مجلد التوزيع.

106
00:08:22,340 --> 00:08:27,320
نظيفة، ثم المهمة التالية ستكون

107
00:08:27,320 --> 00:08:36,980
نسخ وبعد ذلك أود أن أفعل، imagemin.

108
00:08:37,380 --> 00:08:41,340
لذلك هذه المهام الثلاث ليتم تكوينها هنا.

109
00:08:41,340 --> 00:08:43,910
لذلك مع هذا، اسمحوا لي أن حفظ التغييرات.

110
00:08:43,910 --> 00:08:46,590
دعونا نرى كيف يعمل هذا الشيء.

111
00:08:46,590 --> 00:08:50,280
الآن، والذهاب إلى المطالبة إذا كنت اكتب

112
00:08:50,280 --> 00:08:57,955
، نخر وبناء، سترى أنه سوف تفعل أولا نظيفة،

113
00:08:57,955 --> 00:09:01,550
ثم للقيام نسخة والقيام مهمة إيماجيمين.

114
00:09:01,550 --> 00:09:05,600
لذلك، فإنه يفعل كل هذه الثلاثة ومن ثم سترى على الفور

115
00:09:05,600 --> 00:09:11,810
أن مجلد التوزيع بنيت في مجلد المشروع الخاص بي هنا.

116
00:09:11,810 --> 00:09:15,200
وداخل مجلد التوزيع يمكنك أن ترى أن الخطوط قد تم نسخها،

117
00:09:15,200 --> 00:09:16,590
وقد تم نسخ الصور

118
00:09:16,590 --> 00:09:20,665
وتم نسخ ملفات HTML الثلاثة إلى مجلد التوزيع.

119
00:09:20,665 --> 00:09:22,350
أنت فقط في منتصف الطريق هناك

120
00:09:22,350 --> 00:09:29,370
الآن، نحن بحاجة إلى أن تكون قادرة على معالجة هذه الملفات باستخدام البرنامج المساعد usemin.

121
00:09:29,370 --> 00:09:31,675
لذا، دعنا نَذْهبُ إلى ذلك التاليِ.

122
00:09:31,675 --> 00:09:35,140
الآن، سأقوم بتثبيت بعض وحدات NPM

123
00:09:35,140 --> 00:09:38,555
المفيدة لبناء مجلد التوزيع.

124
00:09:38,555 --> 00:09:42,225
لذلك، للقيام بذلك، أود أن أقول تثبيت الآلية الوقائية الوطنية.

125
00:09:42,225 --> 00:09:47,120
يمكنني تحديد مجموعة من الوحدات هنا لذلك،

126
00:09:47,120 --> 00:09:52,300
أود أن أقول، غرونت-كونتريب-كونكات.

127
00:09:52,300 --> 00:10:01,000
لذلك، وهذا يستخدم لسلسلة الملفات، ثم غرونت-كونتريب-كسمين،

128
00:10:01,000 --> 00:10:13,512
غرونت-كونتريب-هتملمين، ثم يقول، غرونت-كونتريب-أوغليفي.

129
00:10:13,512 --> 00:10:18,240
ثم غرونت فيليريف.

130
00:10:18,240 --> 00:10:21,910
سترى سبب استخدام filerev في فترة قصيرة،

131
00:10:21,910 --> 00:10:32,925
ثم غرونت-usemin، وحفظ ديف وبعد ذلك،

132
00:10:35,475 --> 00:10:40,050
تثبيت كل هذه الوحدات النخر.

133
00:10:40,050 --> 00:10:42,205
بمجرد تثبيت كل منهم،

134
00:10:42,205 --> 00:10:44,305
فإن الخطوة التالية هي الذهاب وتكوين،

135
00:10:44,305 --> 00:10:47,625
مهمة usemin الذي يستخدم أيضًا

136
00:10:47,625 --> 00:10:55,090
مهام csmin Uglify Concat لإنجاز بناء مجلد التوزيع.

137
00:10:55,090 --> 00:10:59,140
الآن، دعونا المضي قدما في تكوين مهمة usemin.

138
00:10:59,140 --> 00:11:03,750
حتى العودة إلى ملف النخر بعد إيماجيمين،

139
00:11:03,750 --> 00:11:10,950
وأنا ذاهب لإضافة في المهمة التالية لوسيمين للعمل مع النخر.

140
00:11:10,950 --> 00:11:17,165
وتسمى المهمة الأولى التي أحتاج إلى تكوين أوسيمينبريبي.

141
00:11:19,145 --> 00:11:25,175
ستقوم مهمة UseminPreprade هذه بإعداد الملفات ثم قم أيضًا بتكوين

142
00:11:25,175 --> 00:11:32,655
Concache CSS min و Uglify والملف ref الإضافات،

143
00:11:32,655 --> 00:11:35,070
بحيث يمكنهم القيام بعملهم بشكل صحيح.

144
00:11:35,070 --> 00:11:36,915
لذلك، هذا هو السبب في UseminPreprade.

145
00:11:36,915 --> 00:11:42,220
لذلك، هذه هي الطريقة التي تم تصميم البرنامج المساعد منحة usemin.

146
00:11:42,220 --> 00:11:48,340
تختلف إلى حد ما عن طريقة usemin التي استخدمناها مع البرامج النصية نهاية اللعبة woks.

147
00:11:48,340 --> 00:11:50,295
لذلك، في

148
00:11:50,295 --> 00:11:59,590
UseminPreprade، فقط بعض الاسم العشوائي الذي سأستخدمه ثم أقول الوجهة هي dist.

149
00:11:59,590 --> 00:12:08,730
ثم أود أن تحديد المصدر كما جميع ملفات هتمل هنا.

150
00:12:08,730 --> 00:12:13,605
لذلك أود أن أقول contactus.html،

151
00:12:14,875 --> 00:12:23,550
aboutus.html، و index.html.

152
00:12:23,550 --> 00:12:26,915
لذلك، كل هذه الملفات الثلاثة تحتاج إلى معالجة.

153
00:12:26,915 --> 00:12:30,765
الجزء التالي من هذا التكوين

154
00:12:30,765 --> 00:12:37,735
usemin، التكوين أوسيمينبريبي هو المكان الذي حدد الخيارات.

155
00:12:38,115 --> 00:12:43,245
هذا شيء لقد برزت من خلال التجربة والخطأ.

156
00:12:44,995 --> 00:12:47,395
فقط اتبع الخطوات

157
00:12:47,395 --> 00:12:48,845
لذلك أنا بحاجة إلى تكوين

158
00:12:48,845 --> 00:12:54,125
بعض الأشياء هنا داخل حيث أحتاج إلى تكوين شيء يسمى Flow.

159
00:12:54,125 --> 00:13:00,695
ثم داخل هناك أنا بحاجة إلى تكوين جزء آخر يسمى الخطوات،

160
00:13:00,695 --> 00:13:07,875
ثم هنا أنا تحديد الخطوات هنا ومن ثم أقول csmin،

161
00:13:07,915 --> 00:13:14,645
وبعد ذلك سأقول جس هو uglify.

162
00:13:14,645 --> 00:13:21,515
لذلك، هذا شيء أحتاج إلى تحديده هنا وبعد ذلك أقول بعد ذلك،

163
00:13:24,405 --> 00:13:29,695
وهنا يمكنني السماح لهذا لتوفير

164
00:13:29,695 --> 00:13:36,475
بعض الخيارات لمهامهم المحددة التي قمت بتكوينها.

165
00:13:36,475 --> 00:13:40,175
لذا، أقوم بتوفير بعض الخيارات الإضافية لـ css.

166
00:13:40,175 --> 00:13:44,540
لذلك، يتم توفير ذلك داخل المشاركة هنا.

167
00:13:44,540 --> 00:13:49,485
الآن مرة أخرى، هذه هي الطريقة التي يجب أن يتم بها التكوين.

168
00:13:49,485 --> 00:13:52,695
لذلك، تعلمنا ذلك للتو من خلال النظر في الوثائق هناك.

169
00:13:52,695 --> 00:13:55,390
لذلك، في هنا داخل آخر css،

170
00:13:55,390 --> 00:13:59,275
أود أن أحدد اسمًا كـ csmin.

171
00:13:59,275 --> 00:14:01,450
حتى الآن هذا هنا هو مهمة cssmin.

172
00:14:01,450 --> 00:14:07,974
أود أن أقول كريتيكونفيغ:

173
00:14:08,775 --> 00:14:17,005
كتلة سياق وظيفة، ومن ثم داخل تلك الوظيفة

174
00:14:17,005 --> 00:14:19,955
لا بد لي من توفير بعض المعلمات.

175
00:14:19,955 --> 00:14:22,175
لذلك، أود أن أقول فار

176
00:14:22,175 --> 00:14:31,835
ولدت خيارات السياق مولد.

177
00:14:31,835 --> 00:14:34,685
لذلك هذا هو بعض متغير جافا سكريبت الذي أحتاج إلى

178
00:14:34,685 --> 00:14:38,705
تحديده هناك، كائن جافا سكريبت أساسا.

179
00:14:38,705 --> 00:14:44,185
لذلك، يحتوي هذا الكائن على هذه الخاصية تسمى الخيارات،

180
00:14:44,185 --> 00:14:48,005
حيث يمكنني تحديد بعض الخيارات التي يتم تمريرها

181
00:14:48,005 --> 00:14:51,485
إلى دقيقة CSS المكلفة من قبل مهمة إعداد usemin.

182
00:14:51,485 --> 00:14:56,310
لذلك، في هناك، والحفاظ على

183
00:14:56,310 --> 00:15:02,105
تعليقات خاصة ومن ثم،

184
00:15:05,655 --> 00:15:08,635
rebase هو خطأ.

185
00:15:08,635 --> 00:15:16,025
على ما يبدو أنا بحاجة إلى توفير هذا من أجل مهمة csmin بلدي للتعامل حاليا مع

186
00:15:16,025 --> 00:15:23,855
تعديل الخط رهيبة وإدراجها في الملف المتسلسل.

187
00:15:23,855 --> 00:15:25,390
إذا لم أفعل

188
00:15:25,390 --> 00:15:29,380
ذلك، يبدو أن كسر الخط رهيبة وهذا شيء أنا أحسب،

189
00:15:29,380 --> 00:15:31,890
من خلال القيام قليلا من

190
00:15:31,890 --> 00:15:37,285
البحوث على تجاوز كومة وبعض هذه الأماكن وأحسب أن

191
00:15:37,285 --> 00:15:42,505
مشكلتهم التي تحدث مع الخط رهيبة يمكن

192
00:15:42,505 --> 00:15:48,619
إصلاحها من خلال تضمين هذا في بلدي التكوين النخر.

193
00:15:48,619 --> 00:15:51,445
لذلك، مرة أخرى لقد نظرت للتو

194
00:15:51,445 --> 00:15:55,810
في الاقتراحات من بعض الناس الذين حاولوا وإصلاح المشكلة.

195
00:15:55,810 --> 00:15:58,465
لذا، إذا واجهت مشاكل مثل

196
00:15:58,465 --> 00:16:02,675
هذه، فهذه إحدى الطرق لحل المشكلات التي قد تنشأ عندما

197
00:16:02,675 --> 00:16:07,525
تعمل مع هذه الأدوات المختلفة.

198
00:16:07,525 --> 00:16:14,710
اسمحوا لي أن أضيف في المهمة التالية ل Concat.

199
00:16:14,710 --> 00:16:21,180
سأحدد بعض الأشياء هنا والخيارات.

200
00:16:21,180 --> 00:16:28,135
أحدد هذه الفاصلة المنقوطة،

201
00:16:28,135 --> 00:16:31,215
لذلك هذا شيء أحتاج إلى تحديده لـ Concat،

202
00:16:31,215 --> 00:16:37,725
ثم أيضًا بعد

203
00:16:37,725 --> 00:16:43,180
الخيارات التي أحدد dist فارغة.

204
00:16:43,180 --> 00:16:48,385
الآن سيتم تكوين هذه الخيارات كونكات بواسطة أوسيمينبريبي الذي يتم تشغيله في وقت سابق.

205
00:16:48,385 --> 00:16:50,435
حتى نتمكن من ترك معظمها فارغة هناك،

206
00:16:50,435 --> 00:16:54,005
ومن ثم سيتم إعادة تكوينها من قبل أوسيمينبريبي.

207
00:16:54,005 --> 00:16:57,005
التالي هو القبح.

208
00:16:57,665 --> 00:17:06,055
داخل uglify أيضا أنا بحاجة فقط لتحديد هذا dist فارغة.

209
00:17:06,055 --> 00:17:08,255
إذا لم أكن تحديد هذه،

210
00:17:08,255 --> 00:17:12,890
ثم مهمة usemin لا تعمل بشكل صحيح.

211
00:17:12,890 --> 00:17:16,785
لذلك، هذا هو السبب في أنني بحاجة إلى تحديد كل هذه الأشياء بشكل صريح.

212
00:17:16,785 --> 00:17:21,905
لذلك لcsmin أيضا أود أن أقول ديست فارغة.

213
00:17:21,905 --> 00:17:29,005
وبعد ذلك، تسمى المهمة التالية التي سأقوم بتكوين filerev.

214
00:17:29,625 --> 00:17:36,725
لذا، رأيتني تثبيت البرنامج المساعد filerev لـ Grunt.

215
00:17:36,725 --> 00:17:38,480
ماذا يفعل هذا filerev؟

216
00:17:38,480 --> 00:17:44,640
ما يفعله filerev هو عندما يقوم usemin بإعداد ملف main.css و main.js،

217
00:17:44,640 --> 00:17:53,170
ما يفعله filerev هو أنه يضيف امتدادًا إضافيًا لهذا الاسم الرئيسي،

218
00:17:53,170 --> 00:18:02,070
بحيث عند إعداد إصدار جديد من موقعك وتحميله إلى صفحة الويب،

219
00:18:02,070 --> 00:18:05,895
في حالة رؤية شخص ما لموقع الويب الخاص بك في وقت سابق

220
00:18:05,895 --> 00:18:12,030
، قد يكون متصفحها قد صرفت ملفات main.css و main.js.

221
00:18:12,030 --> 00:18:15,675
إذا لم تقم بإرفاق هذا filerev ما يحدث هو ذلك،

222
00:18:15,675 --> 00:18:21,480
فإن المتصفح الموجود أسفل تنزيل الإصدار الجديد من صفحة الويب الخاصة بك.

223
00:18:21,480 --> 00:18:24,605
قد لا تحميل main.js و main.css الملف

224
00:18:24,605 --> 00:18:28,515
لأنه يجد لهم بالفعل في انها ذاكرة التخزين المؤقت المحلية.

225
00:18:28,515 --> 00:18:31,820
لذلك، قد لا يتم عرض صفحة الويب الخاصة بك بشكل صحيح.

226
00:18:31,820 --> 00:18:33,725
لذلك، للتعامل مع المشكلة،

227
00:18:33,725 --> 00:18:37,535
ما نقوم به هو في كل مرة نقوم بإعداد مجلد توزيع جديد،

228
00:18:37,535 --> 00:18:41,235
سنقوم بإضافة مراجعة ملف.

229
00:18:41,235 --> 00:18:43,045
هذا ما يرمز إليه filerev،

230
00:18:43,045 --> 00:18:44,985
رقم مراجعة الملف،

231
00:18:44,985 --> 00:18:54,100
كامتداد إضافي لاسم ملف css و js.

232
00:18:54,100 --> 00:18:56,950
ملفات.ss و main.js الرئيسية.أعدت مسبقا.

233
00:18:56,950 --> 00:18:58,820
لذلك هذا ما يفعله فيليريف.

234
00:18:58,820 --> 00:19:02,440
الآن كيف يمكن لهذا filerev حساب هذه القيمة؟

235
00:19:02,440 --> 00:19:07,685
فإنه يأخذ محتويات هذه الملفات ومن ثم يفعل بعض المعالجة ومن ثم يولد

236
00:19:07,685 --> 00:19:14,655
md5 مضغوط 20 حرفا الرقم الذي سيتم إرفاقه إلى الملف الرئيسي.

237
00:19:14,655 --> 00:19:17,440
لذلك، أنا ذاهب لتكوين هذا الجزء هنا.

238
00:19:17,440 --> 00:19:20,245
لذا، في الخيارات،

239
00:19:20,245 --> 00:19:30,990
أحدد هنا قائلا كيف من المفترض حساب هذا الرقم هناك.

240
00:19:30,990 --> 00:19:33,740
لذلك، أقول ترميز utf8،

241
00:19:33,740 --> 00:19:40,150
ثم أقول الخوارزمية التي كانت تستخدم لحساب هذا التجزئة،

242
00:19:40,150 --> 00:19:43,544
ما نسميه كما التجزئة هو md5.

243
00:19:43,544 --> 00:19:47,060
الآن، سوف تصبح أكثر وضوحا عندما نقوم بالفعل بتشغيل

244
00:19:47,060 --> 00:19:53,020
مهمة usemin ثم نرى ما تفعله، طول 20.

245
00:19:53,020 --> 00:19:55,475
لذلك، سوف أعود وشرح ما

246
00:19:55,475 --> 00:19:59,460
يفعله هذا الشيء عندما نقوم بالفعل بتشغيل مهمة usemin.

247
00:19:59,460 --> 00:20:06,790
لذلك، اسمحوا لي أن أنهي الخيارات هنا وبعد ذلك أقول الإفراج.

248
00:20:06,790 --> 00:20:10,855
لذلك، أنا بحاجة إلى إعداد عدد قليل من الأشياء هنا ومن ثم الافراج عنهم،

249
00:20:10,855 --> 00:20:18,150
ومن ثم أحتاج إلى تحديد الملفات التي يجب أن يعمل بلدي filerev.

250
00:20:18,150 --> 00:20:20,625
لذلك، أود أن أقول ملفات filerev.

251
00:20:20,625 --> 00:20:22,005
لذلك، داخل ملف هنا.

252
00:20:22,005 --> 00:20:26,645
لذا، بدأت ترى نمطًا في الطريقة التي يتم بها تحديد الأشياء هنا.

253
00:20:26,645 --> 00:20:28,640
لذلك، عند تحديد الملفات هنا،

254
00:20:28,640 --> 00:20:30,775
سوف تقول المصدر،

255
00:20:30,775 --> 00:20:37,815
ثم في هناك سوف تحدد ديست CSS

256
00:20:37,815 --> 00:20:41,025
ثم نجمة نقطة CSS،

257
00:20:41,025 --> 00:20:47,295
ثم ديست واحد التالي js*.js.

258
00:20:47,295 --> 00:20:51,225
لذلك، مع هذا، قمت بتكوين filerev.

259
00:20:51,225 --> 00:20:53,625
لذلك، يتم تكوين جزء filerev.

260
00:20:53,625 --> 00:20:58,820
وأخيرا، نحن بحاجة إلى تكوين مهمة usemin.

261
00:20:58,820 --> 00:21:00,795
لذلك، لتكوين مهمة usemin،

262
00:21:00,795 --> 00:21:04,125
أذهب إلى هنا وأقول usemin،

263
00:21:04,125 --> 00:21:09,100
وهنا اسمحوا لي تحديد بعض الخيارات لمهمة usemin.

264
00:21:09,100 --> 00:21:12,470
لذلك، هنا أنا تحديد أتش تي أم أل.

265
00:21:12,470 --> 00:21:21,205
لذلك، هنا أنا تحديد ذلك الملفات التي تحتاج إلى تغيير،

266
00:21:22,255 --> 00:21:25,455
فإنه يحتاج إلى تحديث.

267
00:21:25,455 --> 00:21:32,465
لذلك، الملفات التي تم نسخها إلى مجلد التوزيع.

268
00:21:33,290 --> 00:21:41,975
وآخر واحد هو «dist/index.html».

269
00:21:41,975 --> 00:21:50,300
إذن هذه هي الملفات الثلاثة التي من المفترض أن تعالجها،

270
00:21:50,510 --> 00:21:55,095
ثم بعض الخيارات لهذا هنا.

271
00:21:55,095 --> 00:22:04,970
لذلك، فإن الخيارات سوف تحدد «أسيتسديرس».

272
00:22:04,970 --> 00:22:10,520
لذلك، هذا هو المكان الذي توجد فيه جميع الأصول التي أستخدمها.

273
00:22:10,520 --> 00:22:14,355
لذا، توجد ملفات CSS وجافا سكريبت.

274
00:22:14,355 --> 00:22:21,715
لذلك، سأحدد «dist/css» و «dist/js».

275
00:22:21,715 --> 00:22:27,020
مع هذا، كنت قد أكملت تكوين مهمة «usemin».

276
00:22:27,020 --> 00:22:30,930
بعد ذلك، نقوم بتكوين مهمة «htmlmin».

277
00:22:30,930 --> 00:22:32,870
بالنسبة للمهمة «htmlmin»،

278
00:22:32,870 --> 00:22:37,160
حددنا الهدف الذي هو «dist»، مجلد التوزيع،

279
00:22:37,160 --> 00:22:40,140
و «htmlmin»

280
00:22:40,140 --> 00:22:44,690
التي سيتم تنفيذها على كافة ملفات HTML الموجودة في مجلد التوزيع هذا.

281
00:22:44,690 --> 00:22:49,560
الخيارات التي نحددها لهذه الحالة التي، سنقول،

282
00:22:49,560 --> 00:22:53,945
«collsedWhiteSpace: True» بمعنى أن

283
00:22:53,945 --> 00:22:58,715
كل المساحة البيضاء في ملفات HTML ستنهار،

284
00:22:58,715 --> 00:23:04,670
بحيث يحتوي [غير مسموع] فقط على الحد الأدنى من كود HTML هناك.

285
00:23:04,670 --> 00:23:08,095
يزيل التعديل بشكل أساسي

286
00:23:08,095 --> 00:23:12,390
جميع الأحرف الدخيلة من ملفات «htmlmin».

287
00:23:12,390 --> 00:23:16,570
الآن، نحدد أيضًا قاموس الملفات،

288
00:23:16,570 --> 00:23:18,880
تلك الملفات التي تحتاج إلى تكوين.

289
00:23:18,880 --> 00:23:22,910
يتم تحديد هذا كوجهة، نقطتين، مصدر.

290
00:23:22,910 --> 00:23:28,835
لذلك، نحدد «dist/index.html»: «dist/index.html»،

291
00:23:28,835 --> 00:23:32,335
وهذا يعني أن «index.html» في مجلد التوزيع

292
00:23:32,335 --> 00:23:36,900
سيكون [غير مسموع] ثم وضع مرة أخرى في ملف «»،

293
00:23:36,900 --> 00:23:39,025
وأيضا في مجلد التوزيع. index.html

294
00:23:39,025 --> 00:23:45,290
وبالمثل، فإن «contactus.html» المحدد هناك ثم

295
00:23:45,290 --> 00:23:51,965
«aboutus.html» المحدد أيضا كما هو موضح في تلك القائمة من الملفات.

296
00:23:51,965 --> 00:23:56,760
السبب في قيامنا بتنفيذ «htmlmin» بعد الانتهاء من «usemin»

297
00:23:56,760 --> 00:24:01,985
هو

298
00:24:01,985 --> 00:24:06,925
أن «usemin» سيحل محل جميع البرامج النصية بملف «.js» الرئيسي وأيضًا كل

299
00:24:06,925 --> 00:24:12,535
رمز CSS المتسلسل والمدمج واستبداله بالملف «.css» الرئيسي.

300
00:24:12,535 --> 00:24:15,490
لذلك سيتم تنفيذ «htmlmin»

301
00:24:15,490 --> 00:24:20,840
على ملفات HTML الناتجة بعد الانتهاء من «usemin» عملها.

302
00:24:20,840 --> 00:24:24,605
هذه هي الطريقة التي يعمل بها هذا في Grunt.

303
00:24:24,605 --> 00:24:31,060
لذلك يجب تطبيق Grunt «htmlmin» بعد الانتهاء من «usemin» عملها.

304
00:24:31,060 --> 00:24:34,080
حتى مرة واحدة يتم تكوين كل هذه،

305
00:24:34,080 --> 00:24:40,185
ثم خطوة واحدة صغيرة التي أحتاج إلى القيام به هو العودة إلى هنا،

306
00:24:40,185 --> 00:24:45,285
ومن ثم حيث نحدد ل «جيت ناخر»،

307
00:24:45,285 --> 00:24:50,005
ونحن بحاجة إلى تحديد أن هذا «جيت ناخر»،

308
00:24:50,005 --> 00:24:53,290
وتذكر أننا قدمنا شيئا يسمى

309
00:24:53,290 --> 00:24:57,500
«أوسيمينبريبي» [غير مسموع] لذلك تحتاج إلى أبلغ «jit-nrunt»

310
00:24:57,500 --> 00:25:01,900
قائلا أن تكوين «useMinPreprade» الذي قدمناه سيتم

311
00:25:01,900 --> 00:25:06,430
التعامل معه من خلال هذا البرنامج المساعد «grunt-usemin» نفسه.

312
00:25:06,430 --> 00:25:08,575
لذلك أنا بحاجة إلى تحديد صريح،

313
00:25:08,575 --> 00:25:14,260
وإلا فإن «جيت ناخر» سوف ننظر حولنا للحصول على «أوسيمينبريبي» المساعد غرونت.

314
00:25:14,260 --> 00:25:16,480
لذلك لتحديد ذلك،

315
00:25:16,480 --> 00:25:26,450
أود أن أقول «useminPreprade» وأقول «grunt-usemin»،

316
00:25:26,450 --> 00:25:30,950
بشكل أساسي إعلام «jit-nrunt» قائلا «useminPreprade» سيتم

317
00:25:30,950 --> 00:25:35,960
التعامل معها من قبل البرنامج المساعد «grunt-usemin» هناك.

318
00:25:35,960 --> 00:25:41,490
وأخيرا، دعونا إعادة تكوين مهمة «بناء» في الجزء السفلي.

319
00:25:41,490 --> 00:25:46,520
الذهاب إلى تلك المهمة «بناء» بعد «إيماجيمين».

320
00:25:46,520 --> 00:25:49,530
لذلك فعلنا «نظيفة»، «نسخ»، «إيماجيمين»،

321
00:25:49,530 --> 00:25:55,920
ثم المهمة التالية التي يجب أن تنفذ هو «أوسيمينبريبي» ثم بعد

322
00:25:55,920 --> 00:26:08,820
«أوسيمينبريبي» تنفيذ «الاتصال»، ثم أنا تنفيذ «كسمين»،

323
00:26:08,820 --> 00:26:15,305
ثم تنفيذ «أوغليفي».

324
00:26:15,305 --> 00:26:20,285
لذلك ترى أن علينا القيام بها في مجموعة معينة من الخطوات.

325
00:26:20,285 --> 00:26:22,395
بمجرد تشغيل «cssmin» و «uglify»

326
00:26:22,395 --> 00:26:26,110
، سيتم إنشاء ملفات «.css» الرئيسية وملفات «.js» الرئيسية.

327
00:26:26,110 --> 00:26:28,610
حتى في هذه المرحلة، أنا ذاهب لتشغيل

328
00:26:28,610 --> 00:26:37,290
«filerev» ثم أخيرا تشغيل مهمة «usemin».

329
00:26:37,290 --> 00:26:40,475
لذلك ترى أسرار: «نظيفة»، «نسخة»،

330
00:26:40,475 --> 00:26:43,690
«إيماجيمين»، «أوسيمينبريبي»، «كونكات»، «كسمين»، «أوغليفي».

331
00:26:43,690 --> 00:26:47,210
عند هذه النقطة، ملفات «.css» و «.js»، وملفات

332
00:26:47,210 --> 00:26:49,815
«.css» الرئيسية «.js» جاهزة.

333
00:26:49,815 --> 00:26:54,190
يمكنني أن أفعل «filerev» عليها ثم أخيرا تشغيل «usemin».

334
00:26:54,190 --> 00:26:58,790
ولكن هذا، دعونا حفظ التغييرات ثم نذهب

335
00:26:58,790 --> 00:27:03,960
ونرى كيف تقوم مهمة «البناء» بالفعل بإعداد التوزيع.

336
00:27:03,960 --> 00:27:06,855
[ غير مسموع] الذهاب إلى محطة لدينا،

337
00:27:06,855 --> 00:27:13,605
في موجه اكتب «بناء النخر» ثم انتظر حتى يتم تنفيذ جميع المهام.

338
00:27:13,605 --> 00:27:16,870
لذلك سترى أنها سوف تعمل من خلال جميع مجموعة من المهام،

339
00:27:16,870 --> 00:27:19,320
وبعد ذلك أخيرا عندما يتم ذلك،

340
00:27:19,320 --> 00:27:24,950
انها سوف تحدد ببساطة أن جميع المهام يتم القيام بها.

341
00:27:24,950 --> 00:27:29,345
لذلك إذا كنت ترغب في العودة والنظر في تسلسل المهام التي تم الانتهاء منها،

342
00:27:29,345 --> 00:27:31,760
يمكنك فقط التمرير مرة أخرى ومعرفة ما يفعله.

343
00:27:31,760 --> 00:27:33,885
يقوم أولاً بتنظيف الملفات،

344
00:27:33,885 --> 00:27:36,765
ثم يقوم بنسخ ملفات HTML،

345
00:27:36,765 --> 00:27:38,400
ثم يقوم بنسخ ملفات الخط،

346
00:27:38,400 --> 00:27:40,455
ثم يقوم بمهمة «imagemin»،

347
00:27:40,455 --> 00:27:42,550
ثم يقوم بـ «UseminPreprape»،

348
00:27:42,550 --> 00:27:45,810
ثم يقوم بـ «concat»،

349
00:27:45,830 --> 00:27:49,645
ثم يقوم بـ «cssmin»،

350
00:27:49,645 --> 00:27:52,010
سواء التوزيع أو تم إنشاؤه،

351
00:27:52,010 --> 00:27:54,130
ثم يقوم بـ» uglify»،

352
00:27:54,130 --> 00:28:01,060
ثم «uglify» المهمة، ثم يقوم بتشغيل «filerev» ثم في النهاية مهمة «usemin».

353
00:28:01,060 --> 00:28:03,920
ومن ثم يجب أن يكون مجلد التوزيع الخاص بنا جاهزًا الآن.

354
00:28:03,920 --> 00:28:07,775
الذهاب إلى محررنا،

355
00:28:07,775 --> 00:28:11,070
ترى الآن أن مجلد التوزيع قد تم إعداده.

356
00:28:11,070 --> 00:28:19,415
دعونا ننظر على وجه التحديد في الملفات الرئيسية «.css» و «.js».

357
00:28:19,415 --> 00:28:22,060
لاحظ أسماء هذه الملفات.

358
00:28:22,060 --> 00:28:23,590
لاحظ أنه بعد الرئيسي،

359
00:28:23,590 --> 00:28:25,080
هناك نقطة ثم هناك

360
00:28:25,080 --> 00:28:30,500
تجزئة 20 حرفا التي تمت إضافتها من قبل «filerev» هنا.

361
00:28:30,500 --> 00:28:34,605
إذن ما يحدث هو إذا قمت بإعداد مجلد توزيع جديد، في

362
00:28:34,605 --> 00:28:41,130
كل مرة أقوم فيها بإعداد مجلد التوزيع الجديد، يتغير هذا التجزئة،

363
00:28:41,130 --> 00:28:47,515
مما يعني أنه في كل مرة أقوم فيها بنشر إصدار جديد من موقع الويب الخاص بي،

364
00:28:47,515 --> 00:28:54,130
إذا كانت أي متصفحات قد شاهدت موقعي على الويب، ثم إدخالات ذاكرة التخزين المؤقت الخاصة بهم،

365
00:28:54,130 --> 00:28:57,210
حيث قد يكون التخزين المؤقت «.css» الرئيسي و «.js» الرئيسي أصبح

366
00:28:57,210 --> 00:29:02,195
باطلا لأن لدينا نسخة جديدة من «.css» الرئيسي و «.js» الرئيسي.

367
00:29:02,195 --> 00:29:06,805
لذلك سيقوم المتصفح بإعادة تنزيل هذه الأشياء.

368
00:29:06,805 --> 00:29:10,455
لم أعرض «filerev» مع نصوص الآلية الوقائية الوطنية،

369
00:29:10,455 --> 00:29:15,940
لكنني أضفتها هنا فقط لتظهر لك كيف يتم ذلك مع Grunt.

370
00:29:15,940 --> 00:29:19,650
لذلك مع هذا، نكمل هذا التمرين.

371
00:29:19,650 --> 00:29:26,035
دعونا نلقي نظرة سريعة على الموقع في متصفحنا.

372
00:29:26,035 --> 00:29:27,795
الذهاب إلى المتصفح الخاص بك،

373
00:29:27,795 --> 00:29:32,035
يمكنك أن ترى أنني الآن تحميل في «dist/index.html».

374
00:29:32,035 --> 00:29:34,200
لذلك هذا هو من مجلد التوزيع،

375
00:29:34,200 --> 00:29:39,260
لذلك أنا التحقق من ويبدو على ما يرام.

376
00:29:39,260 --> 00:29:44,440
و «aboutus.html» تبدو أيضا على ما يرام، تماما كما كان من قبل.

377
00:29:44,440 --> 00:29:51,060
كما تبدو صفحة الاتصال مستعدة بشكل جيد للنشر.

378
00:29:51,060 --> 00:29:54,970
لذلك مع هذا، نكمل هذا التمرين.

379
00:29:54,970 --> 00:29:57,365
بعد كل هذا الشخير،

380
00:29:57,365 --> 00:30:00,560
أنا متأكد أنك تحتاج إلى التقاط أنفاسك.

381
00:30:00,560 --> 00:30:09,400
قبل القيام بذلك، تأكد من إجراء تعليق جيد مع الرسالة «Grunt Part الثاني».