1
00:00:03,550 --> 00:00:06,380
حان الوقت لبدء الشخير

2
00:00:06,380 --> 00:00:10,280
في هذا التمرين والتمرين التالي سنقوم بتكرار

3
00:00:10,280 --> 00:00:15,925
نفس النوع من الإعداد كما فعلنا مع نصوص الآلية الوقائية الوطنية.

4
00:00:15,925 --> 00:00:22,405
في الجزء الأول، سنقوم بإعداد التحويل من SCSS إلى CSS.

5
00:00:22,405 --> 00:00:28,570
ثم سنقوم بإعداد مهمة مشاهدة وأيضا تقديم التعليمات البرمجية باستخدام مزامنة المتصفح.

6
00:00:28,570 --> 00:00:31,065
في الجزء الثاني من التمرين،

7
00:00:31,065 --> 00:00:40,010
سنستفيد من عثمان والمهام المختلفة لإعداد أضعاف التوزيع.

8
00:00:40,010 --> 00:00:44,170
هذه التمارين ليست بأي حال من الأحوال الطريقة الوحيدة

9
00:00:44,170 --> 00:00:49,720
لتنفيذ تكوينات Grunt أو ملفات الاتصال.

10
00:00:49,720 --> 00:00:54,575
هذا مجرد توضيح لكيفية الاستفادة من هذه الأدوات.

11
00:00:54,575 --> 00:00:58,375
قد ترغب في التوصل إلى طريقتك الخاصة لإعداد

12
00:00:58,375 --> 00:01:03,320
ملف Grunt الخاص بك وملف الاتصال الخاص بك لمشاريعك.

13
00:01:03,320 --> 00:01:13,200
خطوتنا الأولى في الاستفادة من Grunt هي إعداد Grunt CLI كوحدة آلية وقائية وطنية عالمية.

14
00:01:13,200 --> 00:01:21,550
للقيام بذلك، أضف نوع المطالبة: NPM -g تثبيت Grunt CLI.

15
00:01:21,550 --> 00:01:25,190
هذه هي واجهة سطر الأوامر لـ Grunt.

16
00:01:25,190 --> 00:01:27,480
بمجرد إعداد هذا،

17
00:01:27,480 --> 00:01:34,690
سنقوم بإعداد وحدة NPM Grunt المحلية لاستخدامها في مشاريعنا.

18
00:01:34,690 --> 00:01:38,370
يتيح لنا Grunt CLI الاستفادة من Grunt.

19
00:01:38,370 --> 00:01:40,050
لقد أنشأنا واجهة سطر الأوامر (غرونت)

20
00:01:40,050 --> 00:01:47,405
ثم الخطوة التالية هي إعداد Grunt محليًا،

21
00:01:47,405 --> 00:01:52,655
لذلك؛ NPM تثبيت Grunt ناقص حفظ dev.

22
00:01:52,655 --> 00:01:56,365
ثم قم بتثبيت Grunt محليًا.

23
00:01:56,365 --> 00:01:58,930
بمجرد الانتهاء من هاتين الخطوتين،

24
00:01:58,930 --> 00:02:04,850
فإن الخطوة التالية هي الانتقال إلى مشروعنا ثم إنشاء ملف جديد،

25
00:02:04,850 --> 00:02:10,165
وسنقوم بتسميته باسم Gruntfile.js.

26
00:02:10,165 --> 00:02:19,034
داخل هذا Gruntfile.js، سنقوم بإعداد التعليمات البرمجية لتكوين مهام Grunt لدينا.

27
00:02:19,034 --> 00:02:27,770
في هذا الملف، الخطوة الأولى هي إضافة «استخدام صارم» بمعنى

28
00:02:27,770 --> 00:02:30,640
«استخدام صارم» شفرة جافا سكريبت.

29
00:02:30,640 --> 00:02:36,460
ثم تقول module.exports

30
00:02:37,050 --> 00:02:42,830
= وظيفة (النخر).

31
00:02:44,990 --> 00:02:53,005
ثم في الداخل هنا، سنقوم بإعداد تكوين Grunt لجميع المهام.

32
00:02:53,005 --> 00:02:57,655
كما ذكرت سابقا، Grunt هو عداء المهام القائم على التكوين.

33
00:02:57,655 --> 00:03:02,200
لذلك، سنقوم بتثبيت مختلف المكونات الإضافية Grunt

34
00:03:02,200 --> 00:03:08,370
لمختلف المهام ومن ثم تكوينها في ملف Grunt لدينا.

35
00:03:08,370 --> 00:03:10,769
للقيام بالتكوين،

36
00:03:10,769 --> 00:03:12,605
سوف نضيف في التعليمات البرمجية هنا،

37
00:03:12,605 --> 00:03:19,290
قائلا: Grunt.InitConfig

38
00:03:19,410 --> 00:03:28,655
وداخل هذا InitConfig،

39
00:03:28,655 --> 00:03:32,805
سنضيف في التكوين لمهام Grunt للعجلة.

40
00:03:32,805 --> 00:03:34,580
بمجرد إكمال هذا،

41
00:03:34,580 --> 00:03:37,145
دعنا نحفظ التغييرات.

42
00:03:37,145 --> 00:03:39,385
في خطوتنا التالية،

43
00:03:39,385 --> 00:03:47,610
سنقوم بإعداد عدد قليل من المكونات الإضافية Grunt لتمكيننا من تحويل رمز SCSS إلى رمز CSS.

44
00:03:47,610 --> 00:03:54,240
للقيام بذلك، سأقوم بتثبيت وحدة الآلية الوقائية الوطنية تسمى

45
00:03:54,240 --> 00:04:01,875
Grunt SASS - Grunt SASS، حفظ def.

46
00:04:01,875 --> 00:04:03,450
بالإضافة إلى ذلك،

47
00:04:03,450 --> 00:04:07,375
سأقوم بإعداد اثنين من وحدات Grunt أخرى تسمى،

48
00:04:07,375 --> 00:04:18,610
NPM تثبيت الوقت الناخر، وجيت غرونت.

49
00:04:19,990 --> 00:04:23,430
هذه وحدتين — الوقت الناخر وجيت النخر.

50
00:04:23,430 --> 00:04:31,190
تقوم وحدة الوقت Grunt بطباعة إحصائيات الوقت لتشغيل مهام Grunt المختلفة.

51
00:04:31,190 --> 00:04:35,150
يتم استخدام وحدة Jit Grunt للتحميل في

52
00:04:35,150 --> 00:04:40,420
تلك المكونات الإضافية Grunt كلما كانت مطلوبة داخل أي تطبيق.

53
00:04:40,420 --> 00:04:42,860
البديل الآخر هو تحميل في

54
00:04:42,860 --> 00:04:49,475
وحدات Grunt المختلفة بشكل صريح في ملف تهيئة Grunt الخاص بك.

55
00:04:49,475 --> 00:04:53,085
أنا أفضل استخدام جيت غرونت بحيث أنها سوف تأخذ الرعاية من تحميل

56
00:04:53,085 --> 00:04:56,790
في أي غرانت المكونات الإضافية التي أحتاج إليها كما قد تكون مطلوبة،

57
00:04:56,790 --> 00:04:59,955
كما هو الحال في عندما الاستفادة منها في التعليمات البرمجية.

58
00:04:59,955 --> 00:05:04,785
قم بتثبيت هذين الوقت Grunt و Jit Grunt وبمجرد تثبيتها،

59
00:05:04,785 --> 00:05:11,845
فقد حان الوقت لتكوين مهمة تحويل SASS الخاصة بنا.

60
00:05:11,845 --> 00:05:14,870
الآن من الواضح أنك يجب أن تتساءل لماذا نكتب هذه

61
00:05:14,870 --> 00:05:18,250
module.exports ثم تعمل وهلم جرا.

62
00:05:18,250 --> 00:05:21,485
هذه هي الطريقة التي نحدد بها وحدات العقدة.

63
00:05:21,485 --> 00:05:26,590
سوف نتعامل مع بنية وحدات العقدة ولماذا نستخدم هذا النهج

64
00:05:26,590 --> 00:05:33,375
في دورة وحدات العقدة من جانب الخادم لاحقًا في التخصص.

65
00:05:33,375 --> 00:05:38,415
في الوقت الحالي، فقط اقبل أن هذه هي الطريقة التي يتم بها كتابة التعليمات البرمجية لـ

66
00:05:38,415 --> 00:05:41,040
Grunt، لأن ملف Grunt

67
00:05:41,040 --> 00:05:47,110
هو نفسه وحدة العقدة التي سيتم تحميلها في مختلف المكونات الإضافية Grunt.

68
00:05:47,110 --> 00:05:51,815
بعد أن نفعل ذلك، ونحن في طريقنا إلى طلب اثنين من الإضافات Grunt هنا.

69
00:05:51,815 --> 00:05:59,080
للقيام بذلك، سنقول تتطلب («الوقت - grunt»)،

70
00:05:59,080 --> 00:06:08,840
وسنقول نخر مقابل التكوين الذي نستخدمه للتحميل في Time Grunt.

71
00:06:08,840 --> 00:06:12,555
تتطلب، كما ستتعلم لاحقًا عند التعرف على وحدات العقدة،

72
00:06:12,555 --> 00:06:16,660
هي طريقة لقول هذا الحمل في وحدة عقدة Time Grunt

73
00:06:16,660 --> 00:06:20,815
لاستخدامها داخل وحدة العقدة المعينة هذه.

74
00:06:20,815 --> 00:06:28,450
وبالمثل، سوف تتطلب وحدة عقدة جيت غرونت.

75
00:06:32,190 --> 00:06:37,095
تتأكد وحدة عقدة Jit Grunt هذه من أنه سيتم تحميلها في

76
00:06:37,095 --> 00:06:42,540
أي وحدات عقدة أخرى أو أي المكونات الإضافية Grunt الأخرى - والتي هي وحدات عقدة، في

77
00:06:42,540 --> 00:06:50,925
الأساس، كما هو الحال في عندما تكون ضمنية بالفعل داخل بلدي Grunt للقيام بمهام مختلفة.

78
00:06:50,925 --> 00:06:55,295
سيكون البديل هو تحميل يدويا في كل واحد من

79
00:06:55,295 --> 00:07:00,600
تلك المكونات الإضافية Grunt صراحة باستخدام العبارة المطلوبة.

80
00:07:00,600 --> 00:07:04,445
أنا أنقذ نفسي قليلا من المتاعب فقط باستخدام جيت غرونت،

81
00:07:04,445 --> 00:07:07,825
الذي يعتني بتحميل وحدات العقدة هذه عند الحاجة.

82
00:07:07,825 --> 00:07:11,395
الآن الانتقال إلى التكوين،

83
00:07:11,395 --> 00:07:16,159
كما فهمنا، يعمل Grunt على التكوين،

84
00:07:16,159 --> 00:07:21,935
لذلك كل المكونات Grunt التي نرغب في توظيفها لأداء مهمة،

85
00:07:21,935 --> 00:07:27,225
فإنه يحتاج إلى تكوين داخل هذا الملف Grunt InitConfig.

86
00:07:27,225 --> 00:07:32,965
هذا التكوين هو في الأساس كائن جافا سكريبت في الأساس.

87
00:07:32,965 --> 00:07:36,145
إذا كنت معتادًا على كائنات جافا سكريبت،

88
00:07:36,145 --> 00:07:40,275
فستبدأ في فهم بناء الجملة بسرعة كبيرة.

89
00:07:40,275 --> 00:07:47,330
المهمة الأولى التي سأقوم بتهيئتها هي SASS.

90
00:07:47,330 --> 00:07:49,855
لذا، اكتب في SASS هنا،

91
00:07:49,855 --> 00:07:55,200
ثم داخل SASS، أقول dist.

92
00:07:55,920 --> 00:08:01,570
الآن عليك أن تعتقد أن هذه هي الطريقة التي يتم بها التكوين.

93
00:08:01,570 --> 00:08:03,280
لذلك، أقول ديست،

94
00:08:03,280 --> 00:08:05,295
ثم داخل هناك،

95
00:08:05,295 --> 00:08:10,980
أقول الملفات، ثم في هناك،

96
00:08:10,980 --> 00:08:14,125
وأنا تحديد الملفات التي تحتاج إلى تحويلها.

97
00:08:14,125 --> 00:08:20,270
أقول، CSS/styles.CSS، الذي

98
00:08:20,270 --> 00:08:28,815
يعتمد على CSS/styles.scss.

99
00:08:28,815 --> 00:08:36,925
مع هذا، نقوم بإكمال تكوين مهمة ساس هنا.

100
00:08:36,925 --> 00:08:40,620
بمجرد إكمال تكوين مهمة SASS،

101
00:08:40,620 --> 00:08:43,485
إذا كنت ترغب حقًا في تنفيذ مهمة SASS،

102
00:08:43,485 --> 00:08:52,950
فحينئذٍ أدناه ستقوم بتكوين مهمة SASS بالقول «grunt.RegisterTask»،

103
00:08:54,770 --> 00:08:58,545
ثم سأدعو هذه المهمة CSS،

104
00:08:58,545 --> 00:09:00,280
ثم

105
00:09:00,280 --> 00:09:04,935
سأقواس الكاتب، أقول «SASS».

106
00:09:04,935 --> 00:09:07,605
الآن، لفهم بناء الجملة هنا،

107
00:09:07,605 --> 00:09:13,715
وهذا كما ترون يقول «Grunt.RegisterTask» واسم هذه المهمة هو CSS.

108
00:09:13,715 --> 00:09:15,340
وما الذي تنطوي عليه هذه المهمة؟

109
00:09:15,340 --> 00:09:21,685
تتضمن هذه المهمة تنفيذ مهمة SASS التي تم تكوينها بالفعل هنا.

110
00:09:21,685 --> 00:09:25,080
هذه هي الطريقة التي نقرأ بها هذه الصيغة هنا.

111
00:09:25,080 --> 00:09:27,950
إذا كنت لا ترغب في ذلك، فلن تحتاج إلى تكوين هذا،

112
00:09:27,950 --> 00:09:33,065
لأننا سنستخدم SASS مع مهمة الساعة

113
00:09:33,065 --> 00:09:38,460
لتشغيل SASS تلقائيًا عند تغيير ملف SCSS الخاص بنا.

114
00:09:38,460 --> 00:09:40,840
مع هذا، دعونا حفظ التغييرات. و

115
00:09:40,840 --> 00:09:45,570
اسمحوا لي أن أريكم هذه المهمة بالذات في العمل.

116
00:09:45,570 --> 00:09:48,990
إذا قمت بتكوين المهمة مع اسم CSS هناك،

117
00:09:48,990 --> 00:09:50,650
ثم إضافة المطالبة،

118
00:09:50,650 --> 00:09:54,655
يمكنك كتابة «grunt.CSS» ومن ثم سيتم

119
00:09:54,655 --> 00:10:00,090
تنفيذ مهمة تحويل رمز ساس إلى رمز CSS.

120
00:10:00,090 --> 00:10:04,005
الذهاب إلى موجه الأوامر الخاص بك، في موجه،

121
00:10:04,005 --> 00:10:09,070
اكتب في «grunt.CSS» وسترى

122
00:10:09,070 --> 00:10:17,530
مهمة ساس تنفيذ ثم تحويل ملف.sess styles.sess إلى ملف styles.CSS.

123
00:10:17,530 --> 00:10:19,390
أيضًا، كما ترون،

124
00:10:19,390 --> 00:10:23,340
سيقوم Time Grunt بطباعة إحصائيات كهذه

125
00:10:23,340 --> 00:10:27,800
للإشارة إلى مقدار الوقت الذي استغرقته كل مهمة من هذه المهام.

126
00:10:27,800 --> 00:10:29,520
إذا كان ذلك يهمك،

127
00:10:29,520 --> 00:10:32,880
فيمكنك إلقاء نظرة على هذه التفاصيل هنا.

128
00:10:32,890 --> 00:10:39,360
في خطوتنا التالية، سنقوم بتكوين الساعة والخادم، من

129
00:10:39,360 --> 00:10:41,800
أجل الحفاظ على مشاهدة على

130
00:10:41,800 --> 00:10:45,960
ملفات SASS وتحويلها تلقائيًا عند تغييرها،

131
00:10:45,960 --> 00:10:48,625
ومن ثم سنقوم بإعداد الخادم،

132
00:10:48,625 --> 00:10:54,045
باستخدام BrowsersSync لخدمة موقعنا الإلكتروني.

133
00:10:54,045 --> 00:10:56,700
لإعداد Watch and Service Tasks،

134
00:10:56,700 --> 00:10:59,740
سأقوم بتثبيت اثنين من المكونات الإضافية الناخر،

135
00:10:59,740 --> 00:11:03,990
لذلك سأقول تثبيت npm،

136
00:11:04,300 --> 00:11:12,465
grunt-contrib-watch ناقص save-dev.

137
00:11:12,465 --> 00:11:15,480
إذن هذه هي ساعة هرونت-كونتريب

138
00:11:15,480 --> 00:11:21,450
Grunt المكونات في وهو وحدة عقدة، لذلك تثبيت ذلك.

139
00:11:21,670 --> 00:11:32,030
لذا يتيح لك المكون الإضافي Watch الاحتفاظ بالساعة على ملفاتك المختلفة.

140
00:11:32,030 --> 00:11:33,550
المكون الإضافي التالي الذي سأقوم

141
00:11:33,550 --> 00:11:43,750
بتثبيته هو grunt-المتصفح-sync.

142
00:11:44,770 --> 00:11:50,515
وحدة BrowserSync هي الوحدة التي سأستخدمها،

143
00:11:50,515 --> 00:11:54,230
لحفظ الملفات من مجلد مشروعي،

144
00:11:54,230 --> 00:12:00,090
حتى أتمكن من رؤية موقع الويب في متصفح.

145
00:12:00,090 --> 00:12:04,845
بمجرد تثبيت هاتين الوحدتين،

146
00:12:04,845 --> 00:12:08,295
حان الوقت للذهاب إلى بلدي grunt.initconfig،

147
00:12:08,295 --> 00:12:11,635
ومن ثم تكوين المهمتين.

148
00:12:11,635 --> 00:12:13,300
واحد للحفاظ على ساعة،

149
00:12:13,300 --> 00:12:18,125
والثاني لخدمة الملفات باستخدام BrowserSync.

150
00:12:18,125 --> 00:12:20,680
لذا، بالعودة إلى initconfig الخاص بي،

151
00:12:20,680 --> 00:12:23,710
ضع فاصلة هناك بعد SASS،

152
00:12:23,710 --> 00:12:26,460
ثم انتقل إلى السطر التالي.

153
00:12:27,050 --> 00:12:32,650
تذكر دائما أن تضع هذه الفاصلة هناك

154
00:12:32,650 --> 00:12:40,990
تتسبب فاصلة مفقودة في الكثير من الصداع عندما تحاول تشغيل مهام النخر الخاصة بك.

155
00:12:40,990 --> 00:12:44,635
من الصعب جداً تحديد أنك فاتتك فاصلة

156
00:12:44,635 --> 00:12:46,950
لذلك من المهم الانتباه إلى

157
00:12:46,950 --> 00:12:52,290
بناء الجملة والتأكد من أنك لا تفوت أي من تلك الفواصل.

158
00:12:52,290 --> 00:12:55,425
سيعود ليعضك في الوقت الخطأ

159
00:12:55,425 --> 00:12:57,105
لذا فإن المهمة التالية،

160
00:12:57,105 --> 00:13:00,190
التي سأقوم بتكوين هي WatchTask.

161
00:13:00,190 --> 00:13:03,605
لذا أقول «ووتش» وماذا أريد مشاهدته؟

162
00:13:03,605 --> 00:13:10,070
أريد مشاهدة هذه الملفات، وهي CSS/*.SCSS.

163
00:13:10,120 --> 00:13:17,680
إذن هذا هو ملف SCSS الذي أريد مشاهدته.

164
00:13:17,680 --> 00:13:22,445
جميع ملفات SCSS في مجلد CSS الخاص بي.

165
00:13:22,445 --> 00:13:26,670
إذا تم تعديل أي منها،

166
00:13:26,670 --> 00:13:32,865
فإن المهمة المقابلة التي سأقوم بتنفيذها هي SASS.

167
00:13:32,865 --> 00:13:36,180
مهمة ساس التي قمت بتكوينها بالفعل في وقت سابق.

168
00:13:36,180 --> 00:13:39,710
لذلك مع هذا، قمت بتكوين WatchTask الخاص بي،

169
00:13:39,710 --> 00:13:42,820
للحفاظ على مشاهدة على ملفات SCSS ثم

170
00:13:42,820 --> 00:13:46,075
تحويلها تلقائيًا عن طريق استدعاء SASS.

171
00:13:46,075 --> 00:13:50,475
الآن مع WatchTask يمكنني الاحتفاظ بساعة على عدة ملفات،

172
00:13:50,475 --> 00:13:55,650
ثم استدعاء المهام المقابلة تلقائيًا لتلك الملفات.

173
00:13:55,650 --> 00:13:57,895
على سبيل المثال، يمكنني الاحتفاظ بساعة على

174
00:13:57,895 --> 00:14:01,660
ملفات JavaScript الخاصة بي ثم أقوم تلقائيًا بتلميح JS،

175
00:14:01,660 --> 00:14:04,465
عندما تتغير ملفاتي.

176
00:14:04,465 --> 00:14:07,770
أو للقيام بتحديد الهوية وهلم جرا.

177
00:14:07,770 --> 00:14:12,100
الآن، التالي الذي سأقوم بتهيئته هو BrowserSync.

178
00:14:12,100 --> 00:14:15,345
مرة أخرى لا ننسى الفاصلة بعد WatchTask،

179
00:14:15,345 --> 00:14:19,070
ثم اكتب في BrowserSync.

180
00:14:20,500 --> 00:14:26,369
أود أن أقول بروسرسينك هنا ومن ثم لبروسرسينك،

181
00:14:26,369 --> 00:14:30,570
وأود أن أقول تكوين مهمة داخل.

182
00:14:30,570 --> 00:14:35,090
الآن، هذا هو بناء الجملة الذي نستخدمه لوضع

183
00:14:35,090 --> 00:14:40,410
التكوين داخل ملف النخر لدينا.

184
00:14:40,410 --> 00:14:42,840
لذلك يقول بروسرسينك ديف.

185
00:14:42,840 --> 00:14:44,940
الآن، إذا سألتني لماذا،

186
00:14:44,940 --> 00:14:46,895
نحن بحاجة فقط لقراءة الوثائق،

187
00:14:46,895 --> 00:14:52,275
لكل واحد من تلك المكونات الإضافية ومن ثم معرفة كيفية تكوين تلك المكونات الإضافية.

188
00:14:52,275 --> 00:14:56,000
لذلك، لقد قرأت بالفعل الوثائق ولقد برزت

189
00:14:56,000 --> 00:15:00,885
بعض الإعداد الأساسي لكل من هذه المهام لذلك لهذا السبب أنا مجرد كتابتها في.

190
00:15:00,885 --> 00:15:03,525
من الواضح إذا كنت تريد المزيد من المرونة،

191
00:15:03,525 --> 00:15:07,350
فقد ترغب في قراءة الوثائق المقابلة ثم معرفة

192
00:15:07,350 --> 00:15:11,655
طرق أخرى لتكوين هذه المهام.

193
00:15:11,655 --> 00:15:18,010
التكوين الخاص بي هنا هو مجرد طريقة واحدة لمعالجة أو حل المشاكل.

194
00:15:18,010 --> 00:15:22,850
حتى هنا أنا تحديد بسفيلز،

195
00:15:22,850 --> 00:15:28,685
لذلك هذا الملف تحديد الملفات التي تحتاج إلى مراقبة

196
00:15:28,685 --> 00:15:36,715
من قبل بلدي بروسرسينك وبعد ذلك عندما يتغير أي من هذه الملفات،

197
00:15:36,715 --> 00:15:44,805
ثم بلدي بروسرسينك سوف يسبب المتصفح ليتم إعادة تحميل.

198
00:15:44,805 --> 00:15:50,185
لذلك سأقوم بمشاهدة جميع الملفات في مجلد CSS الخاص بي،

199
00:15:50,185 --> 00:15:53,220
وملفات HTML في مجلد مشروعي،

200
00:15:53,220 --> 00:15:57,945
ثم جميع ملفات جافا سكريبت الخاصة بي في مجلد JS.

201
00:15:57,945 --> 00:16:03,835
لذلك، مع هذا قمت بتكوين جميع تلك الملفات التي سأبقيها على الساعة،

202
00:16:03,835 --> 00:16:10,335
ثم تتسبب تلقائيًا في إعادة تحميل صفحتي عند الحاجة.

203
00:16:10,335 --> 00:16:14,180
وبعد ذلك، فإن التكوين التالي الذي أحتاج إلى

204
00:16:14,180 --> 00:16:19,100
القيام به هو بعض الخيارات الأخرى، لبلدي BrowserSync.

205
00:16:19,100 --> 00:16:23,230
لذا فإن الخيارات التي سأقوم بتحديدها هي،

206
00:16:23,510 --> 00:16:29,190
WatchTask true، مما يعني أن هناك watchTask قيد التشغيل،

207
00:16:29,190 --> 00:16:33,130
والدليل الأساسي لخادمي.

208
00:16:33,130 --> 00:16:35,605
لذلك أقول BaseDir،

209
00:16:35,605 --> 00:16:41,960
ثم أحدد، شرطة مائلة نقطية.

210
00:16:41,960 --> 00:16:43,720
لذا فإن الدليل الحالي،

211
00:16:43,720 --> 00:16:45,880
كدليل أساسي.

212
00:16:45,880 --> 00:16:47,740
لذا مع هذه التغييرات،

213
00:16:47,740 --> 00:16:51,815
دعني أحفظ التغييرات على ملف النخر الخاص بي،

214
00:16:51,815 --> 00:17:01,085
ثم سأنزل أدناه ثم أقوم بتكوين مهمة أخرى، تسمى هنا الافتراضي.

215
00:17:01,085 --> 00:17:05,145
لذلك، أود تحديد المهمة على أنها افتراضية.

216
00:17:05,145 --> 00:17:08,720
لهذه المهمة الافتراضية، ماذا أحتاج إلى القيام به؟

217
00:17:08,720 --> 00:17:12,060
أحتاج إلى تنفيذ

218
00:17:12,160 --> 00:17:20,055
BrowserSync وكذلك المهمة الثانية التي سأقوم بها هي المشاهدة.

219
00:17:20,055 --> 00:17:24,590
سيكون لدي للقيام بمهمة بروسرسينك أولا ثم واتشتاسك في وقت لاحق.

220
00:17:24,590 --> 00:17:27,310
لأن مهمة بروسرسينك ستبدأ في خدمة الخادم الخاص بي.

221
00:17:27,310 --> 00:17:30,605
إذا قمت بعمل WatchTask أولاً ومهمة Browsersync لاحقًا،

222
00:17:30,605 --> 00:17:32,495
فإن WatchTask ستقوم بشكل أساسي

223
00:17:32,495 --> 00:17:38,260
بإيقاف كل شيء ثم لن يتم تنفيذ جميع المهام المتبقية وراء ذلك.

224
00:17:38,260 --> 00:17:40,525
لذلك إذا كنت تستخدم watchTask،

225
00:17:40,525 --> 00:17:45,624
فافعل ذلك كآخر واحد في التسلسل الذي تحدده في هذه الأقواس المربعة.

226
00:17:45,624 --> 00:17:50,415
مع هذا، يتم تكوين مشروعي الآن،

227
00:17:50,415 --> 00:17:57,100
للحفاظ على مراقبة على ملفات SASS الخاصة بي وتقديمها كلما لزم الأمر.

228
00:17:57,100 --> 00:17:59,670
لذا، هذا يكمل ملفي الناخر،

229
00:17:59,670 --> 00:18:02,795
دعنا نعود إلى محطتنا.

230
00:18:02,795 --> 00:18:04,740
بالعودة إلى المحطة الطرفية الخاصة بي،

231
00:18:04,740 --> 00:18:07,670
لقد فتحت علامة تبويب أخرى ثم في علامة التبويب هذه،

232
00:18:07,670 --> 00:18:11,335
سأقوم بتشغيل مهمة النخر،

233
00:18:11,335 --> 00:18:17,010
والتي ستحافظ أيضًا على تشغيل BrowsersSync الخاص بي وسيخدم

234
00:18:17,010 --> 00:18:22,965
الملفات وإعادة تحميل صفحة الويب تلقائيًا،

235
00:18:22,965 --> 00:18:25,055
إذا تغير أي من هذه الملفات.

236
00:18:25,055 --> 00:18:30,790
لذلك إذا قمت بتكوين مهمة كمهمة افتراضية كما فعلنا في التمرين،

237
00:18:30,790 --> 00:18:32,125
فعند المطالبة،

238
00:18:32,125 --> 00:18:37,725
أحتاج فقط إلى كتابة النخر ثم ستقوم تلقائيًا بتنفيذ المهمة الافتراضية.

239
00:18:37,725 --> 00:18:40,680
بمجرد بدء تشغيل المهام الخاصة بي،

240
00:18:40,680 --> 00:18:44,015
يمكنك أن ترى أنه قد بدأ BrowserSync وأنه يخدم

241
00:18:44,015 --> 00:18:48,600
الملفات وأيضا أنه يقوم بتشغيل WatchTask،

242
00:18:48,600 --> 00:18:54,825
الذي ينتظر أي تغييرات لتشغيل مهمة SCSS تلقائيًا.

243
00:18:54,825 --> 00:19:01,460
لإثبات لك كيفية تشغيل مهمة SCSS،

244
00:19:01,460 --> 00:19:05,120
كلما قمت بإجراء أي تغييرات على ملف Styles.scss الخاص بي،

245
00:19:05,120 --> 00:19:07,725
لذلك قمت بإحضار ملف Styles.scss،

246
00:19:07,725 --> 00:19:11,845
وأنا ببساطة ذاهب لحفظ هذا الملف.

247
00:19:11,845 --> 00:19:14,175
وبعد ذلك ستلاحظ أنه على الفور،

248
00:19:14,175 --> 00:19:22,285
على الجانب الأيسر يتم استدعاء مهمة SASS وتشغيلها ثم إعادة التحويل البرمجي وهذا

249
00:19:22,285 --> 00:19:30,705
سيؤدي أيضًا إلى تغيير ملف Styles.scss، بعد إعادة التحويل البرمجي.

250
00:19:30,705 --> 00:19:38,045
ثم سيؤدي ذلك إلى تشغيل BrowserSync لإعادة تحميل صفحة الويب الخاصة بي تلقائيًا.

251
00:19:38,045 --> 00:19:43,750
مع هذا، ونحن استكمال لدينا نخر جزء واحد ممارسة.

252
00:19:43,750 --> 00:19:48,659
هذا هو الوقت المناسب لحفظ ملفاتك،

253
00:19:48,659 --> 00:19:54,960
إلى مستودع Git مع الرسالة Grunt الجزء الأول.