1
00:00:03,060 --> 00:00:06,095
الآن بعد أن منحنا ما يكفي،

2
00:00:06,095 --> 00:00:08,700
حان الوقت لجلب.

3
00:00:08,700 --> 00:00:12,010
سنحاول تنفيذ نفس النوع من

4
00:00:12,010 --> 00:00:16,235
المهام التي قمنا بها مع كل من البرامج النصية NPM و Grunt،

5
00:00:16,235 --> 00:00:22,995
ولكن الآن سنحاول أن تفعل الشيء نفسه باستخدام Gulp و Gulp Plug-ins.

6
00:00:22,995 --> 00:00:29,090
للبدء، دعونا أولا تثبيت غولب كوحدة عالمية.

7
00:00:29,090 --> 00:00:31,635
لذلك، للقيام بذلك، في موجه،

8
00:00:31,635 --> 00:00:37,970
اكتب npm -g install gulp،

9
00:00:38,740 --> 00:00:42,380
سيؤدي ذلك إلى تثبيت Gulp كوحدة نمطية عالمية

10
00:00:42,380 --> 00:00:45,625
وجعلها متاحة للاستخدام على سطر الأوامر.

11
00:00:45,625 --> 00:00:47,605
بعد إكمال هذا،

12
00:00:47,605 --> 00:00:51,425
فإن الخطوة التالية هي تثبيت Gulp محليًا في مشروعنا.

13
00:00:51,425 --> 00:00:53,975
لذلك للقيام بذلك، في موجه،

14
00:00:53,975 --> 00:01:01,700
اكتب npm install gulp - save-dev.

15
00:01:01,700 --> 00:01:03,835
بمجرد الانتهاء من هذين،

16
00:01:03,835 --> 00:01:10,765
حان الوقت للمضي قدما وتكوين مهام غولب لدينا.

17
00:01:10,765 --> 00:01:14,195
قبل أن نفعل ذلك، خطوتنا التالية،

18
00:01:14,195 --> 00:01:18,170
سنقوم بتثبيت المكون الإضافي Gulp Sass حتى نتمكن من

19
00:01:18,170 --> 00:01:23,560
تكوين Sass لنرى كمهمة تحويل في ملف Gulp الخاص بنا.

20
00:01:23,560 --> 00:01:26,460
لذلك، للمضي قدما والقيام بذلك،

21
00:01:26,460 --> 00:01:30,580
اكتب npm تثبيت

22
00:01:31,420 --> 00:01:39,100
sass gulp - save-dev.

23
00:01:40,270 --> 00:01:43,835
أيضًا أثناء وجودنا في ذلك،

24
00:01:43,835 --> 00:01:48,305
قد نقوم أيضًا بتثبيت مهمة Gulp Sync Browser أيضًا،

25
00:01:48,305 --> 00:01:53,835
حتى نتمكن من تكوين كل من هذا تلو الآخر.

26
00:01:53,835 --> 00:02:07,960
لذلك، سأقوم بتثبيت، npm تثبيت المتصفح sync - save-dev.

27
00:02:08,830 --> 00:02:11,480
مرة واحدة يتم تثبيت هذين،

28
00:02:11,480 --> 00:02:17,980
ثم دعونا المضي قدما وإنشاء ملف غولب لدينا ومن ثم تكوين لدينا غولب المهام هنا.

29
00:02:17,980 --> 00:02:20,590
الذهاب إلى مجلد المشروع لدينا،

30
00:02:20,590 --> 00:02:27,905
دعونا إنشاء ملف جديد ومن ثم تسمية ذلك gulpfile.js،

31
00:02:27,905 --> 00:02:32,380
وفي هذا الملف، ونحن في طريقنا لتكوين لدينا غولب المهام.

32
00:02:32,380 --> 00:02:34,950
لذا، بمجرد أن يكون gulpfile.js جاهزًا

33
00:02:34,950 --> 00:02:39,940
، قم بتكوين مهام Gulp هنا أولاً

34
00:02:39,940 --> 00:02:50,310
بالبدء بـ «استخدام صارم» ثم var gulp.

35
00:02:50,310 --> 00:02:57,585
لذلك، نحن بحاجة إلى طلب وحدات عقدة غولب،

36
00:02:57,585 --> 00:02:59,810
وأيضا بينما نحن في ذلك،

37
00:02:59,810 --> 00:03:07,600
ونحن سوف تتطلب وحدة عقدة ساس.

38
00:03:12,470 --> 00:03:16,310
كما ذكرت في التمرين السابق،

39
00:03:16,310 --> 00:03:22,110
سيصبح أكثر وضوحًا لك لماذا يتم كتابة الشفرة مثل هذا،

40
00:03:22,110 --> 00:03:30,245
بمجرد فهم المزيد عن وحدات العقدة في دورة لاحقة.

41
00:03:30,245 --> 00:03:35,535
BrowserSync، لذلك ما قمنا به هو تضمين

42
00:03:35,535 --> 00:03:40,895
وحدات عقدة Gulp Contrance و Bowsersync في ملف Gulp الخاص بنا.

43
00:03:40,895 --> 00:03:42,545
وبمجرد الانتهاء من ذلك،

44
00:03:42,545 --> 00:03:45,360
فقد حان الوقت لتكوين مهام Gulp الخاصة بنا.

45
00:03:45,360 --> 00:03:47,940
كما تعلمنا سابقا،

46
00:03:47,940 --> 00:03:52,340
Gulp هو رمز قائم على طريقة تكوين

47
00:03:52,340 --> 00:03:57,815
المهام على عكس Grunt الذي يعتمد أكثر على تكوين المهام.

48
00:03:57,815 --> 00:04:00,455
لذلك، في حالة Gulp،

49
00:04:00,455 --> 00:04:04,230
سيقوم الطفل بإعداد مهامنا لكتابة

50
00:04:04,230 --> 00:04:11,340
gulp.task ثم دعونا إعداد اسم المهمة «sass»،

51
00:04:11,340 --> 00:04:13,545
ومن ثم لهذه المهمة،

52
00:04:13,545 --> 00:04:17,630
سنقوم بإعداد هذا كدالة،

53
00:04:19,990 --> 00:04:23,205
وهذه هي الطريقة التي يتم بها إعداد التعليمات البرمجية.

54
00:04:23,205 --> 00:04:28,850
لذا، وظيفة Gulp Tasks Sass وهنا،

55
00:04:28,850 --> 00:04:32,310
نقوم بإعداد مهام Gulp،

56
00:04:34,850 --> 00:04:45,030
لذلك سنقوم بكتابة gulp.src ('. /css/*.scss') كما علمنا،

57
00:04:45,030 --> 00:05:00,800
Gulp هو أداة قائمة على التعليمات البرمجية على التكوين.

58
00:05:00,800 --> 00:05:06,630
لذلك، سنقوم بإعداد هذه المهمة على هذا النحو.

59
00:05:06,630 --> 00:05:14,390
لذلك، ترى أننا حددنا Gulp مصدر الأنابيب ساس على،

60
00:05:14,390 --> 00:05:18,630
ثم هنا، خطأ.

61
00:05:19,220 --> 00:05:22,600
لذلك، في حالة حدوث خطأ،

62
00:05:24,020 --> 00:05:31,870
سنستخدم طريقة ساس لتسجيل الخطأ ثم توجيه هذا

63
00:05:31,870 --> 00:05:43,480
من خلال gulp.dest ('. /css ')،

64
00:05:52,970 --> 00:05:59,270
ويكمل تكوين مهام Gulp Sass.

65
00:05:59,270 --> 00:06:03,540
يجب أن تتساءل لماذا نكتب رمز مثل هذا.

66
00:06:03,540 --> 00:06:06,960
تقول مصدر gulp ثم حدد شيئًا هناك،

67
00:06:06,960 --> 00:06:10,650
ثم يقول التالي الأنبوب ثم يقول التالي الأنبوب.

68
00:06:10,650 --> 00:06:16,045
دعونا نفهم طريقة غولب للقيام بالأشياء بمزيد من التفصيل.

69
00:06:16,045 --> 00:06:19,855
للمساعدة في شرح سبب تكوين المهام من هذا القبيل،

70
00:06:19,855 --> 00:06:24,730
لدي شرح لما نسميه Gulp Streams.

71
00:06:24,730 --> 00:06:29,900
الطريقة التي يعمل بها Gulp هي مثل أخذ مجموعة من الملفات وتحدد مجموعة

72
00:06:29,900 --> 00:06:35,405
الملفات عن طريق قول مصدر gulp كما فعلنا مع مهام Sass هناك.

73
00:06:35,405 --> 00:06:39,005
حتى هنا، هذه هي الوظيفة التي تأخذ الملفات.

74
00:06:39,005 --> 00:06:44,405
يمكنك حتى تحديد الملفات باستخدام أنماط globbing التي تعلمناها في Grunt،

75
00:06:44,405 --> 00:06:49,410
ومن ثم إنشاء دفق من الكائنات التي تمثل هذه الملفات.

76
00:06:49,410 --> 00:06:51,560
الآن، بمجرد إنشاء الدفق

77
00:06:51,560 --> 00:06:54,480
، يمكن توصيل الدفق عبر مجموعة من

78
00:06:54,480 --> 00:06:58,795
الوظائف واحدًا تلو الآخر من أجل تحويل هذه الملفات.

79
00:06:58,795 --> 00:07:07,400
ثم أخيرا، يمكن وضع الملفات المحولة الناتجة في موقع الوجهة.

80
00:07:07,400 --> 00:07:09,795
لذلك هذا هو السبب في أننا نحدد مصدر غولب،

81
00:07:09,795 --> 00:07:11,585
ثم نحدد الأنابيب.

82
00:07:11,585 --> 00:07:15,945
لذلك، فإن الأنبوب يسمح للتدفق أن يكون الأنابيب من خلال وظيفة،

83
00:07:15,945 --> 00:07:18,295
وهكذا، وهذا هو السبب في أننا قلنا نقطة الأنابيب،

84
00:07:18,295 --> 00:07:20,600
وبعد ذلك قلنا gulp.

85
00:07:20,600 --> 00:07:23,965
ثم قلنا ساس على الخطأ.

86
00:07:23,965 --> 00:07:30,255
ثم التالي يقول أنبوب غولب ديست.

87
00:07:30,255 --> 00:07:35,950
وهكذا، يحدد gulp dest وجهة الملفات التي تمت معالجتها.

88
00:07:35,950 --> 00:07:43,860
لذا، هذه هي الطريقة التي يتم بها تحديد مهمة نموذجية في gulp لأنه يعمل gulp على التدفقات.

89
00:07:43,860 --> 00:07:48,875
لذلك، ملفات الدفق الخاصة بك من خلال الأنابيب حتى

90
00:07:48,875 --> 00:07:54,805
يتم نقلها ومن ثم سيتم إيداعها في وجهة محددة.

91
00:07:54,805 --> 00:07:59,610
لذلك، سترى بنية مماثلة لكثير من المهام غولب التي

92
00:07:59,610 --> 00:08:04,740
كنا تكوين في هذا التمرين وممارسة المقبل.

93
00:08:04,740 --> 00:08:11,460
الآن بعد أن فهمت قليلاً حول كيفية عمل gulp مع التدفقات وكيف

94
00:08:11,460 --> 00:08:21,005
تستخدم مهمة gulp الأنبوب لمعالجة الملفات من خلال مجموعة من الوظائف،

95
00:08:21,005 --> 00:08:28,290
ويصبح أكثر وضوحًا لك لماذا نقوم بإعداد مهمة sass هذه كما هو موضح في هذا الرمز هنا.

96
00:08:28,290 --> 00:08:33,260
وتسمى المهمة التالية التي سنقوم بتكوين gulp،

97
00:08:33,340 --> 00:08:39,900
وسنقوم بتكوين هذه المهمة كساعة sass.

98
00:08:39,900 --> 00:08:42,700
لذا، هذه مهمة مشاهدة سنقوم بتهيئتها،

99
00:08:42,700 --> 00:08:48,920
ومن ثم ستحدد الوظيفة.

100
00:08:49,190 --> 00:08:51,330
وهكذا هنا،

101
00:08:51,330 --> 00:08:53,320
مهمة المشاهدة الخاصة بالجولب ساس،

102
00:08:53,320 --> 00:08:58,490
ما نقوم به هو تحديد الملفات التي سنراقبها.

103
00:08:58,490 --> 00:09:05,600
لذلك، نستخدم مهمة مشاهدة gulp لمشاهدة الملف.

104
00:09:05,600 --> 00:09:08,830
لذا، تم بالفعل دمج الساعة في gulp.

105
00:09:08,830 --> 00:09:17,660
لذلك، سوف يستغرق ساعة gulp ثم نحدد الملفات هناك *.SCSS.

106
00:09:17,660 --> 00:09:21,390
لذا، كما ترون، ستشاهد ساعة gulp

107
00:09:21,390 --> 00:09:25,915
هذه الملفات ثم عند حدوث أي تغييرات على هذه الملفات،

108
00:09:25,915 --> 00:09:30,225
ستقوم بتشغيل مهمة sass،

109
00:09:30,225 --> 00:09:32,975
التي حددناها سابقًا.

110
00:09:32,975 --> 00:09:37,360
لذلك، هذه هي الطريقة التي يتم بها إعداد مهمة مشاهدة ساس.

111
00:09:37,360 --> 00:09:39,495
الآن بعد أن قمنا بهذين،

112
00:09:39,495 --> 00:09:42,730
دعونا إعداد مهمة مزامنة المتصفح هذه بعد ذلك.

113
00:09:42,730 --> 00:09:47,650
لذا، أغلق ذلك باستخدام الفاصلة المنقوطة ثم

114
00:09:47,650 --> 00:09:53,375
المهمة التالية التي سنقوم بإعدادها هي مهمة مزامنة المتصفح.

115
00:09:53,375 --> 00:10:01,735
لذلك، سأحدد مهمة مزامنة المتصفح هناك.

116
00:10:01,735 --> 00:10:04,550
ثم بالنسبة لمهمة مزامنة المتصفح،

117
00:10:04,550 --> 00:10:07,480
سأحدد هذه الوظيفة.

118
00:10:07,480 --> 00:10:11,725
مرة أخرى، لاحظ الهيكل الذي نكتب فيه التعليمات البرمجية،

119
00:10:11,725 --> 00:10:16,405
مهمة gulp ثم قمت بتحديد شيء يتبع ولكن مع وظيفة.

120
00:10:16,405 --> 00:10:17,990
الآن مرة أخرى كما قلت،

121
00:10:17,990 --> 00:10:23,155
ونحن نتعلم وحدات العقدة في الدورة الأخيرة من هذا التخصص،

122
00:10:23,155 --> 00:10:28,520
وسوف تصبح أكثر وضوحا بالنسبة لك لماذا لا وحدات مكتوبة مع هذا الهيكل،

123
00:10:28,520 --> 00:10:31,790
ولماذا يتم كتابة وظائف مثل هذا.

124
00:10:31,790 --> 00:10:34,470
لذلك، نقول gulp مزامنة متصفح المهام.

125
00:10:34,470 --> 00:10:38,260
هنا، سأقوم بتعريف متغير،

126
00:10:38,260 --> 00:10:40,920
متغير جافا سكريبت يسمى الملفات،

127
00:10:40,920 --> 00:10:45,050
وهو لا شيء سوى في الصفيف،

128
00:10:45,160 --> 00:10:55,935
وأنه داخل هذه الملفات مجموعة أود تحديد جميع الملفات التي

129
00:10:55,935 --> 00:10:58,790
إذا تم تعديل مزامنة المتصفح يحتاج

130
00:10:58,790 --> 00:11:07,125
إلى التسبب في إعادة التحميل أو الملف.

131
00:11:07,125 --> 00:11:12,690
لذا، ملفات html، ملفات CSS في مجلد CSS،

132
00:11:12,690 --> 00:11:18,420
ثم سأشاهد أيضًا ملفات الصور وملفات

133
00:11:26,080 --> 00:11:31,960
JavaScript.

134
00:11:33,840 --> 00:11:36,730
كل هذه الملفات إذا تغير أي منها.

135
00:11:36,730 --> 00:11:40,800
لذلك، بعد ذلك، سأقوم بتكوين مزامنة المتصفح هنا.

136
00:11:40,800 --> 00:11:44,315
لذلك، سأقول مزامنة المتصفح.

137
00:11:44,315 --> 00:11:49,010
لقد قمنا بالفعل بتعريف هذا المتغير المسمى مزامنة المتصفح في وقت سابق.

138
00:11:49,010 --> 00:11:54,400
لذلك، يجب علينا تهيئة مزامنة المتصفح،

139
00:11:56,230 --> 00:12:01,805
وهكذا، فإن المعلمة الأولى لذلك

140
00:12:01,805 --> 00:12:08,895
هي الملفات التي ستحتاج إلى مراقبتها،

141
00:12:08,895 --> 00:12:18,160
ثم تحدد المعلمة الثانية الخيارات التي نعطيها للمتصفح.

142
00:12:18,160 --> 00:12:21,720
لذا، فإن الخيار الذي أقوم بتحديده هو للخادم.

143
00:12:21,720 --> 00:12:31,350
سأحدد الدليل الأساسي كدليل الحالي،

144
00:12:31,350 --> 00:12:38,595
ثم يكمل مواصفات مهمة مزامنة المتصفح.

145
00:12:38,595 --> 00:12:43,280
لذلك، مع هذا، أكملنا تحديد مهمة مزامنة المتصفح هنا.

146
00:12:43,280 --> 00:12:46,750
لذلك، يمكنك أن ترى أن كيف قمنا بتكوين مهمة مزامنة المتصفح،

147
00:12:46,750 --> 00:12:48,480
حددنا الملفات ثم حفظ

148
00:12:48,480 --> 00:12:51,750
مزامنة المتصفح فيه وتوفير الملفات كمعلمة الأولى.

149
00:12:51,750 --> 00:12:58,940
المعلمة الثانية هي خيارات المكون الإضافي للمزامنة للمتصفح.

150
00:12:58,940 --> 00:13:02,620
ثم أخيرا، سنقوم جدولة أو

151
00:13:02,620 --> 00:13:10,680
سنقوم بتكوين المهمة المسماة الافتراضي.

152
00:13:10,680 --> 00:13:17,005
مثلما لدي المهمة الافتراضية في Grunt،

153
00:13:17,005 --> 00:13:23,475
يمكننا أيضًا الحصول على مهمة افتراضية مماثلة محددة لـ gulp.

154
00:13:23,475 --> 00:13:28,095
لذلك، هنا نقول gulp مهمة مزامنة المتصفح الافتراضي،

155
00:13:28,095 --> 00:13:33,275
ومن ثم تحديد وظيفة.

156
00:13:33,275 --> 00:13:42,085
وداخل هناك سوف نحدد بداية الجولب.

157
00:13:42,085 --> 00:13:46,185
لذا، يحدد هذا أنه يجب أن أبدأ

158
00:13:46,185 --> 00:13:54,730
هذه المهمة الأخرى التي يجب أن تبدأ مهمة مشاهدة sass. مهمة الساعة sass يجب أن تبدأ.

159
00:13:54,840 --> 00:14:00,370
تأكد من تشغيل مهمة مزامنة المستعرض قبل بدء تشغيل مهمة مشاهدة sass.

160
00:14:00,370 --> 00:14:04,060
لذلك، هذا هو بناء الجملة لتحديد ذلك في غولب.

161
00:14:04,060 --> 00:14:08,095
لذلك، مع هذا، قمنا بتكوين كل ما نحتاجه في ملف gulp.

162
00:14:08,095 --> 00:14:09,870
لذا، بالعودة مرة أخرى،

163
00:14:09,870 --> 00:14:11,675
هناك خطوات قمنا بها.

164
00:14:11,675 --> 00:14:17,460
استخدمنا لأول مرة تتطلب تضمين جميع الإضافات الخاصة بهم gulp هناك،

165
00:14:17,460 --> 00:14:22,575
ثم قمنا بتكوين مهمة sass،

166
00:14:22,575 --> 00:14:25,455
ثم حددنا مهمة مشاهدة sass.

167
00:14:25,455 --> 00:14:31,995
هذا هو المكان الذي نستخدم فيه ساعة gulp المتوفرة لنا مثل من gulp.

168
00:14:31,995 --> 00:14:37,290
ثم حددنا مهمة مزامنة المتصفح ثم أخيرًا

169
00:14:37,290 --> 00:14:43,150
إعادة جدولة المهمة الافتراضية مع المتصفح Sync وبدء gulp بساعة sass.

170
00:14:43,150 --> 00:14:45,705
الآن، دعونا نرى التغييرات،

171
00:14:45,705 --> 00:14:49,875
ومن ثم سنمضي قدما وتنفيذ ملف gulp إضافة،

172
00:14:49,875 --> 00:14:52,255
ونوع موجه gulp.

173
00:14:52,255 --> 00:14:59,780
سترى أن gulp يبدأ بمزامنة المتصفح وبدء تشغيل مهمة مشاهدة sass،

174
00:14:59,780 --> 00:15:06,565
ثم ستبدأ مزامنة المتصفح في تقديم الملفات.

175
00:15:06,565 --> 00:15:12,770
إذا قمت بعرض موقع الويب الخاص بك باستخدام متصفح،

176
00:15:12,770 --> 00:15:17,425
فستتمكن من رؤية موقع الويب الذي يتم عرضه في المتصفح. و

177
00:15:17,425 --> 00:15:23,090
اسمحوا لي أيضا أن أوضح أداء مهمة المراقبة.

178
00:15:23,090 --> 00:15:26,795
لذلك، سأسحب style.css

179
00:15:26,795 --> 00:15:31,185
وأحاول فقط حفظ التغيير وستلاحظ أنه على الجانب الأيسر،

180
00:15:31,185 --> 00:15:36,850
يتم استدعاء مهمة ساس على الفور

181
00:15:36,850 --> 00:15:44,460
وسيقوم بإعادة ترجمة ملف.scss style.ss في ملفات CSS.

182
00:15:44,460 --> 00:15:48,840
ومن ثم سيتم إعادة تحميل هذا المتصفح في هذه المرحلة.

183
00:15:48,840 --> 00:15:54,085
مع هذا نكمل الجزء الأول من ممارسة الجولب.

184
00:15:54,085 --> 00:15:58,710
في الجزء الثاني، سنقوم بإعداد مجلد التوزيع.

185
00:15:58,710 --> 00:16:05,030
هذا هو الوقت المناسب بالنسبة لك للقيام git-commit مع الرسالة Gulp الجزء 1.