حان الوقت لبدء الشخير
في هذا التمرين والتمرين التالي سنقوم بتكرار
نفس النوع من الإعداد كما فعلنا مع نصوص الآلية الوقائية الوطنية.
في الجزء الأول، سنقوم بإعداد التحويل من SCSS إلى CSS.
ثم سنقوم بإعداد مهمة مشاهدة وأيضا تقديم التعليمات البرمجية باستخدام مزامنة المتصفح.
في الجزء الثاني من التمرين،
سنستفيد من عثمان والمهام المختلفة لإعداد أضعاف التوزيع.
هذه التمارين ليست بأي حال من الأحوال الطريقة الوحيدة
لتنفيذ تكوينات Grunt أو ملفات الاتصال.
هذا مجرد توضيح لكيفية الاستفادة من هذه الأدوات.
قد ترغب في التوصل إلى طريقتك الخاصة لإعداد
ملف Grunt الخاص بك وملف الاتصال الخاص بك لمشاريعك.
خطوتنا الأولى في الاستفادة من Grunt هي إعداد Grunt CLI كوحدة آلية وقائية وطنية عالمية.
للقيام بذلك، أضف نوع المطالبة: NPM -g تثبيت Grunt CLI.
هذه هي واجهة سطر الأوامر لـ Grunt.
بمجرد إعداد هذا،
سنقوم بإعداد وحدة NPM Grunt المحلية لاستخدامها في مشاريعنا.
يتيح لنا Grunt CLI الاستفادة من Grunt.
لقد أنشأنا واجهة سطر الأوامر (غرونت)
ثم الخطوة التالية هي إعداد Grunt محليًا،
لذلك؛ NPM تثبيت Grunt ناقص حفظ dev.
ثم قم بتثبيت Grunt محليًا.
بمجرد الانتهاء من هاتين الخطوتين،
فإن الخطوة التالية هي الانتقال إلى مشروعنا ثم إنشاء ملف جديد،
وسنقوم بتسميته باسم Gruntfile.js.
داخل هذا Gruntfile.js، سنقوم بإعداد التعليمات البرمجية لتكوين مهام Grunt لدينا.
في هذا الملف، الخطوة الأولى هي إضافة «استخدام صارم» بمعنى
«استخدام صارم» شفرة جافا سكريبت.
ثم تقول module.exports
= وظيفة (النخر).
ثم في الداخل هنا، سنقوم بإعداد تكوين Grunt لجميع المهام.
كما ذكرت سابقا، Grunt هو عداء المهام القائم على التكوين.
لذلك، سنقوم بتثبيت مختلف المكونات الإضافية Grunt
لمختلف المهام ومن ثم تكوينها في ملف Grunt لدينا.
للقيام بالتكوين،
سوف نضيف في التعليمات البرمجية هنا،
قائلا: Grunt.InitConfig
وداخل هذا InitConfig،
سنضيف في التكوين لمهام Grunt للعجلة.
بمجرد إكمال هذا،
دعنا نحفظ التغييرات.
في خطوتنا التالية،
سنقوم بإعداد عدد قليل من المكونات الإضافية Grunt لتمكيننا من تحويل رمز SCSS إلى رمز CSS.
للقيام بذلك، سأقوم بتثبيت وحدة الآلية الوقائية الوطنية تسمى
Grunt SASS - Grunt SASS، حفظ def.
بالإضافة إلى ذلك،
سأقوم بإعداد اثنين من وحدات Grunt أخرى تسمى،
NPM تثبيت الوقت الناخر، وجيت غرونت.
هذه وحدتين — الوقت الناخر وجيت النخر.
تقوم وحدة الوقت Grunt بطباعة إحصائيات الوقت لتشغيل مهام Grunt المختلفة.
يتم استخدام وحدة Jit Grunt للتحميل في
تلك المكونات الإضافية Grunt كلما كانت مطلوبة داخل أي تطبيق.
البديل الآخر هو تحميل في
وحدات Grunt المختلفة بشكل صريح في ملف تهيئة Grunt الخاص بك.
أنا أفضل استخدام جيت غرونت بحيث أنها سوف تأخذ الرعاية من تحميل
في أي غرانت المكونات الإضافية التي أحتاج إليها كما قد تكون مطلوبة،
كما هو الحال في عندما الاستفادة منها في التعليمات البرمجية.
قم بتثبيت هذين الوقت Grunt و Jit Grunt وبمجرد تثبيتها،
فقد حان الوقت لتكوين مهمة تحويل SASS الخاصة بنا.
الآن من الواضح أنك يجب أن تتساءل لماذا نكتب هذه
module.exports ثم تعمل وهلم جرا.
هذه هي الطريقة التي نحدد بها وحدات العقدة.
سوف نتعامل مع بنية وحدات العقدة ولماذا نستخدم هذا النهج
في دورة وحدات العقدة من جانب الخادم لاحقًا في التخصص.
في الوقت الحالي، فقط اقبل أن هذه هي الطريقة التي يتم بها كتابة التعليمات البرمجية لـ
Grunt، لأن ملف Grunt
هو نفسه وحدة العقدة التي سيتم تحميلها في مختلف المكونات الإضافية Grunt.
بعد أن نفعل ذلك، ونحن في طريقنا إلى طلب اثنين من الإضافات Grunt هنا.
للقيام بذلك، سنقول تتطلب («الوقت - grunt»)،
وسنقول نخر مقابل التكوين الذي نستخدمه للتحميل في Time Grunt.
تتطلب، كما ستتعلم لاحقًا عند التعرف على وحدات العقدة،
هي طريقة لقول هذا الحمل في وحدة عقدة Time Grunt
لاستخدامها داخل وحدة العقدة المعينة هذه.
وبالمثل، سوف تتطلب وحدة عقدة جيت غرونت.
تتأكد وحدة عقدة Jit Grunt هذه من أنه سيتم تحميلها في
أي وحدات عقدة أخرى أو أي المكونات الإضافية Grunt الأخرى - والتي هي وحدات عقدة، في
الأساس، كما هو الحال في عندما تكون ضمنية بالفعل داخل بلدي Grunt للقيام بمهام مختلفة.
سيكون البديل هو تحميل يدويا في كل واحد من
تلك المكونات الإضافية Grunt صراحة باستخدام العبارة المطلوبة.
أنا أنقذ نفسي قليلا من المتاعب فقط باستخدام جيت غرونت،
الذي يعتني بتحميل وحدات العقدة هذه عند الحاجة.
الآن الانتقال إلى التكوين،
كما فهمنا، يعمل Grunt على التكوين،
لذلك كل المكونات Grunt التي نرغب في توظيفها لأداء مهمة،
فإنه يحتاج إلى تكوين داخل هذا الملف Grunt InitConfig.
هذا التكوين هو في الأساس كائن جافا سكريبت في الأساس.
إذا كنت معتادًا على كائنات جافا سكريبت،
فستبدأ في فهم بناء الجملة بسرعة كبيرة.
المهمة الأولى التي سأقوم بتهيئتها هي SASS.
لذا، اكتب في SASS هنا،
ثم داخل SASS، أقول dist.
الآن عليك أن تعتقد أن هذه هي الطريقة التي يتم بها التكوين.
لذلك، أقول ديست،
ثم داخل هناك،
أقول الملفات، ثم في هناك،
وأنا تحديد الملفات التي تحتاج إلى تحويلها.
أقول، CSS/styles.CSS، الذي
يعتمد على CSS/styles.scss.
مع هذا، نقوم بإكمال تكوين مهمة ساس هنا.
بمجرد إكمال تكوين مهمة SASS،
إذا كنت ترغب حقًا في تنفيذ مهمة SASS،
فحينئذٍ أدناه ستقوم بتكوين مهمة SASS بالقول «grunt.RegisterTask»،
ثم سأدعو هذه المهمة CSS،
ثم
سأقواس الكاتب، أقول «SASS».
الآن، لفهم بناء الجملة هنا،
وهذا كما ترون يقول «Grunt.RegisterTask» واسم هذه المهمة هو CSS.
وما الذي تنطوي عليه هذه المهمة؟
تتضمن هذه المهمة تنفيذ مهمة SASS التي تم تكوينها بالفعل هنا.
هذه هي الطريقة التي نقرأ بها هذه الصيغة هنا.
إذا كنت لا ترغب في ذلك، فلن تحتاج إلى تكوين هذا،
لأننا سنستخدم SASS مع مهمة الساعة
لتشغيل SASS تلقائيًا عند تغيير ملف SCSS الخاص بنا.
مع هذا، دعونا حفظ التغييرات. و
اسمحوا لي أن أريكم هذه المهمة بالذات في العمل.
إذا قمت بتكوين المهمة مع اسم CSS هناك،
ثم إضافة المطالبة،
يمكنك كتابة «grunt.CSS» ومن ثم سيتم
تنفيذ مهمة تحويل رمز ساس إلى رمز CSS.
الذهاب إلى موجه الأوامر الخاص بك، في موجه،
اكتب في «grunt.CSS» وسترى
مهمة ساس تنفيذ ثم تحويل ملف.sess styles.sess إلى ملف styles.CSS.
أيضًا، كما ترون،
سيقوم Time Grunt بطباعة إحصائيات كهذه
للإشارة إلى مقدار الوقت الذي استغرقته كل مهمة من هذه المهام.
إذا كان ذلك يهمك،
فيمكنك إلقاء نظرة على هذه التفاصيل هنا.
في خطوتنا التالية، سنقوم بتكوين الساعة والخادم، من
أجل الحفاظ على مشاهدة على
ملفات SASS وتحويلها تلقائيًا عند تغييرها،
ومن ثم سنقوم بإعداد الخادم،
باستخدام BrowsersSync لخدمة موقعنا الإلكتروني.
لإعداد Watch and Service Tasks،
سأقوم بتثبيت اثنين من المكونات الإضافية الناخر،
لذلك سأقول تثبيت npm،
grunt-contrib-watch ناقص save-dev.
إذن هذه هي ساعة هرونت-كونتريب
Grunt المكونات في وهو وحدة عقدة، لذلك تثبيت ذلك.
لذا يتيح لك المكون الإضافي Watch الاحتفاظ بالساعة على ملفاتك المختلفة.
المكون الإضافي التالي الذي سأقوم
بتثبيته هو grunt-المتصفح-sync.
وحدة BrowserSync هي الوحدة التي سأستخدمها،
لحفظ الملفات من مجلد مشروعي،
حتى أتمكن من رؤية موقع الويب في متصفح.
بمجرد تثبيت هاتين الوحدتين،
حان الوقت للذهاب إلى بلدي grunt.initconfig،
ومن ثم تكوين المهمتين.
واحد للحفاظ على ساعة،
والثاني لخدمة الملفات باستخدام BrowserSync.
لذا، بالعودة إلى initconfig الخاص بي،
ضع فاصلة هناك بعد SASS،
ثم انتقل إلى السطر التالي.
تذكر دائما أن تضع هذه الفاصلة هناك
تتسبب فاصلة مفقودة في الكثير من الصداع عندما تحاول تشغيل مهام النخر الخاصة بك.
من الصعب جداً تحديد أنك فاتتك فاصلة
لذلك من المهم الانتباه إلى
بناء الجملة والتأكد من أنك لا تفوت أي من تلك الفواصل.
سيعود ليعضك في الوقت الخطأ
لذا فإن المهمة التالية،
التي سأقوم بتكوين هي WatchTask.
لذا أقول «ووتش» وماذا أريد مشاهدته؟
أريد مشاهدة هذه الملفات، وهي CSS/*.SCSS.
إذن هذا هو ملف SCSS الذي أريد مشاهدته.
جميع ملفات SCSS في مجلد CSS الخاص بي.
إذا تم تعديل أي منها،
فإن المهمة المقابلة التي سأقوم بتنفيذها هي SASS.
مهمة ساس التي قمت بتكوينها بالفعل في وقت سابق.
لذلك مع هذا، قمت بتكوين WatchTask الخاص بي،
للحفاظ على مشاهدة على ملفات SCSS ثم
تحويلها تلقائيًا عن طريق استدعاء SASS.
الآن مع WatchTask يمكنني الاحتفاظ بساعة على عدة ملفات،
ثم استدعاء المهام المقابلة تلقائيًا لتلك الملفات.
على سبيل المثال، يمكنني الاحتفاظ بساعة على
ملفات JavaScript الخاصة بي ثم أقوم تلقائيًا بتلميح JS،
عندما تتغير ملفاتي.
أو للقيام بتحديد الهوية وهلم جرا.
الآن، التالي الذي سأقوم بتهيئته هو BrowserSync.
مرة أخرى لا ننسى الفاصلة بعد WatchTask،
ثم اكتب في BrowserSync.
أود أن أقول بروسرسينك هنا ومن ثم لبروسرسينك،
وأود أن أقول تكوين مهمة داخل.
الآن، هذا هو بناء الجملة الذي نستخدمه لوضع
التكوين داخل ملف النخر لدينا.
لذلك يقول بروسرسينك ديف.
الآن، إذا سألتني لماذا،
نحن بحاجة فقط لقراءة الوثائق،
لكل واحد من تلك المكونات الإضافية ومن ثم معرفة كيفية تكوين تلك المكونات الإضافية.
لذلك، لقد قرأت بالفعل الوثائق ولقد برزت
بعض الإعداد الأساسي لكل من هذه المهام لذلك لهذا السبب أنا مجرد كتابتها في.
من الواضح إذا كنت تريد المزيد من المرونة،
فقد ترغب في قراءة الوثائق المقابلة ثم معرفة
طرق أخرى لتكوين هذه المهام.
التكوين الخاص بي هنا هو مجرد طريقة واحدة لمعالجة أو حل المشاكل.
حتى هنا أنا تحديد بسفيلز،
لذلك هذا الملف تحديد الملفات التي تحتاج إلى مراقبة
من قبل بلدي بروسرسينك وبعد ذلك عندما يتغير أي من هذه الملفات،
ثم بلدي بروسرسينك سوف يسبب المتصفح ليتم إعادة تحميل.
لذلك سأقوم بمشاهدة جميع الملفات في مجلد CSS الخاص بي،
وملفات HTML في مجلد مشروعي،
ثم جميع ملفات جافا سكريبت الخاصة بي في مجلد JS.
لذلك، مع هذا قمت بتكوين جميع تلك الملفات التي سأبقيها على الساعة،
ثم تتسبب تلقائيًا في إعادة تحميل صفحتي عند الحاجة.
وبعد ذلك، فإن التكوين التالي الذي أحتاج إلى
القيام به هو بعض الخيارات الأخرى، لبلدي BrowserSync.
لذا فإن الخيارات التي سأقوم بتحديدها هي،
WatchTask true، مما يعني أن هناك watchTask قيد التشغيل،
والدليل الأساسي لخادمي.
لذلك أقول BaseDir،
ثم أحدد، شرطة مائلة نقطية.
لذا فإن الدليل الحالي،
كدليل أساسي.
لذا مع هذه التغييرات،
دعني أحفظ التغييرات على ملف النخر الخاص بي،
ثم سأنزل أدناه ثم أقوم بتكوين مهمة أخرى، تسمى هنا الافتراضي.
لذلك، أود تحديد المهمة على أنها افتراضية.
لهذه المهمة الافتراضية، ماذا أحتاج إلى القيام به؟
أحتاج إلى تنفيذ
BrowserSync وكذلك المهمة الثانية التي سأقوم بها هي المشاهدة.
سيكون لدي للقيام بمهمة بروسرسينك أولا ثم واتشتاسك في وقت لاحق.
لأن مهمة بروسرسينك ستبدأ في خدمة الخادم الخاص بي.
إذا قمت بعمل WatchTask أولاً ومهمة Browsersync لاحقًا،
فإن WatchTask ستقوم بشكل أساسي
بإيقاف كل شيء ثم لن يتم تنفيذ جميع المهام المتبقية وراء ذلك.
لذلك إذا كنت تستخدم watchTask،
فافعل ذلك كآخر واحد في التسلسل الذي تحدده في هذه الأقواس المربعة.
مع هذا، يتم تكوين مشروعي الآن،
للحفاظ على مراقبة على ملفات SASS الخاصة بي وتقديمها كلما لزم الأمر.
لذا، هذا يكمل ملفي الناخر،
دعنا نعود إلى محطتنا.
بالعودة إلى المحطة الطرفية الخاصة بي،
لقد فتحت علامة تبويب أخرى ثم في علامة التبويب هذه،
سأقوم بتشغيل مهمة النخر،
والتي ستحافظ أيضًا على تشغيل BrowsersSync الخاص بي وسيخدم
الملفات وإعادة تحميل صفحة الويب تلقائيًا،
إذا تغير أي من هذه الملفات.
لذلك إذا قمت بتكوين مهمة كمهمة افتراضية كما فعلنا في التمرين،
فعند المطالبة،
أحتاج فقط إلى كتابة النخر ثم ستقوم تلقائيًا بتنفيذ المهمة الافتراضية.
بمجرد بدء تشغيل المهام الخاصة بي،
يمكنك أن ترى أنه قد بدأ BrowserSync وأنه يخدم
الملفات وأيضا أنه يقوم بتشغيل WatchTask،
الذي ينتظر أي تغييرات لتشغيل مهمة SCSS تلقائيًا.
لإثبات لك كيفية تشغيل مهمة SCSS،
كلما قمت بإجراء أي تغييرات على ملف Styles.scss الخاص بي،
لذلك قمت بإحضار ملف Styles.scss،
وأنا ببساطة ذاهب لحفظ هذا الملف.
وبعد ذلك ستلاحظ أنه على الفور،
على الجانب الأيسر يتم استدعاء مهمة SASS وتشغيلها ثم إعادة التحويل البرمجي وهذا
سيؤدي أيضًا إلى تغيير ملف Styles.scss، بعد إعادة التحويل البرمجي.
ثم سيؤدي ذلك إلى تشغيل BrowserSync لإعادة تحميل صفحة الويب الخاصة بي تلقائيًا.
مع هذا، ونحن استكمال لدينا نخر جزء واحد ممارسة.
هذا هو الوقت المناسب لحفظ ملفاتك،
إلى مستودع Git مع الرسالة Grunt الجزء الأول.