كيفية استخدام Grunt لأتمتة سير العمل الخاص بك [دروس]

أنا داعية ضخم للأتمتة لأنه يجعل الحياة أكثر بساطة. لماذا تقضي بعض الوقت في مهام وراثية رتيبة تمتص قوة حياتك فورًا عندما يكون لديك جهاز كمبيوتر للقيام بالأشياء نيابة عنك؟ هذا صحيح بشكل خاص لتطوير الشبكة.

يمكن أن تكون العديد من مهام التطوير واجبا. أثناء تطويرك ، قد ترغب في ترجمة تعليمات برمجية ، عند الضغط على إصدار التطوير ، يمكنك ربط الملفات وتصغيرها وإزالة موارد التطوير فقط وما إلى ذلك. حتى تلك غير المعقدة نسبيًا مثل حذف مجموعة من الملفات أو إعادة تسمية المجلدات يمكن أن يستغرق جزء كبير من عصرنا.

في هذه المقالة سأريك كيف يمكنك أن تجعل حياتك أسهل من خلال الاستفادة من الوظائف الممتازة التي تقدمها Grunt ، عداء مهام Javascript. سوف أرشدك خلال العملية برمتها ، فلا تقلق حتى لو لم تكن معالج Javascript!

المزيد على Hongkiat.com:

• CSSMatic يجعل CSS سهلة لمصممي الويب
• أتمتة المهام في ماك مع إجراءات المجلد
• أتمتة ملفات Dropbox الخاصة بك مع الإجراءات
• 10 تطبيقات للمساعدة في أتمتة المهام على جهاز Android الخاص بك
• كيفية (تلقائيا) النسخ الاحتياطي موقع الويب الخاص بك في دروببوإكس

تثبيت النخير

يعد تثبيت Grunt أمرًا سهلاً لأنه يستخدم حزمة إدارة العقدة. هذا يعني أنه قد يلزم أيضًا تثبيت العقدة نفسها. افتح محطة أو موجه أوامر (سأتصل بهذا الجهاز من الآن فصاعدًا) وأدخل NMP -v.

إذا رأيت رقم إصدار لديك الآلية الوقائية الوطنية مثبت ، إذا رأيت خطأ "لم يتم العثور على أمر" ، فسيتعين عليك تثبيته بالانتقال إلى صفحة تنزيل العقدة وتحديد الإصدار الذي تحتاجه.

بمجرد تثبيت Node ، يصبح الحصول على Grunt أمرًا واحدًا يصدر في الجهاز:

تثبيت npm -g grunt-cli

الاستخدام الأساسي

سوف تستخدم Grunt على أساس مشروع إلى مشروع لأن كل مشروع سيكون له متطلبات مختلفة. دعونا نبدأ المشروع الآن عن طريق إنشاء مجلد والانتقال إليه عبر محطة لدينا كذلك.

ملفان يشكلان قلب Grunt: package.json و Gruntfile.js. يحدد ملف الحزمة كل التبعيات الخارجية التي ستستخدمها الأتمتة ، يتيح لك Gruntfile التحكم ماذا بالضبط هذه تستخدم. لنقم الآن بإنشاء ملف حزمة bare-bones بالمحتوى التالي:

"name": "test-project" ، "version": "1.0" ، "devDependencies": "grunt": "~ 0.4.5"،

الاسم والإصدار متروك لك ، يجب أن تحتوي التبعيات على جميع الحزم التي تستخدمها. نحن لا نفعل أي شيء في الوقت الحالي ، لذلك سنتأكد من إضافة Grunt نفسها كتبعية.

ربما تسأل نفسك عن ما يفعله هذا الخط المتعرج (~) الذي يطلق عليه التلدة هناك.

يمكن طلب الإصدارات باستخدام القواعد من الإصدار الدلالي لـ npm. شيء صغير:

• يمكنك تحديد نسخة بالضبط مثل 4.5.2
• يمكنك استخدام أكبر من / أقل من للإشارة إلى إصدار الحد الأدنى أو الحد الأقصى مثل > 4.0.3
• باستخدام التلدة يحدد كتلة الإصدار. عن طريق ~ 1.2 يعتبر 1.2.x, أي إصدار أعلى من 1.2.0 ولكن أقل من 1.3

يتوفر الكثير من الطرق لتحديد الإصدارات ، لكن هذا يكفي لمعظم الاحتياجات. والخطوة التالية هي إنشاء Gruntfile والذي سيؤدي أتمتة أعمالنا.

 module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json'))؛ grunt.registerTask ('افتراضي' ، []) ؛ ؛ 

هذا هو في الأساس الهيكل العظمي ل Gruntfile. هناك مكانان للاهتمام. موقع واحد هو داخل initConfig () وظيفة. هذا هو المكان الذي يذهب كل تكوين المشروع الخاص بك. سيشمل ذلك أشياء مثل التعامل مع تجميع LESS / SASS وتقليل البرامج النصية وما إلى ذلك.

الموقع الثاني أسفل تلك الوظيفة حيث تحدد المهام. تستطيع أن ترى مهمة واحدة محددة اسمه “الافتراضي”. إنه فارغ في الوقت الحالي ، لذا فهو لا يفعل شيئًا ، لكننا سنتوسع في الأمر لاحقًا. تصطف المهام بشكل أساسي على البتات والقطع من تكوين مشروعنا وتنفيذه.

على سبيل المثال ، مهمة اسمه “مخطوطات” قد يسلسل كل نصوصنا ، ثم تصغير الملف الناتج ثم نقله إلى موقعه النهائي. يتم تحديد جميع هذه الإجراءات الثلاثة في تكوين المشروع ولكن “سحبت معا” بواسطة المهمة. إذا لم يكن هذا واضحًا بعد ، فلا تقلق ، فسأوضح لك كيف يتم ذلك.

مهمتنا الأولى

لنقم بإنشاء مهمة تقلل من ملف جافا سكريبت واحد بالنسبة لنا.

هناك أربعة أشياء نحتاج إلى القيام بها في أي وقت نريد فيه إضافة مهمة جديدة:

• تثبيت البرنامج المساعد إذا لزم الأمر
• تتطلب ذلك في Gruntfile
• اكتب مهمة
• إضافته إلى مجموعة مهام إذا لزم الأمر

(1) البحث وتثبيت البرنامج المساعد

أسهل طريقة للعثور على المكون الإضافي الذي تحتاجه هي كتابة شيء مثل هذا في Google: “تصغير جافا سكريبت البرنامج المساعد نخر”. يجب أن تقودك النتيجة الأولى إلى المكون الإضافي grunt-المساهمة-uglify وهو ما نحتاجه تمامًا.

تخبرك صفحة جيثب بكل ما تحتاج إلى معرفته. التثبيت عبارة عن سطر واحد في المحطة ، إليك ما تحتاج إلى استخدامه:

 npm تثبيت grunt-المساهمة-uglify - حفظ ديف 

قد تحتاج إلى تشغيل هذا مع امتيازات المشرف. إذا كنت تحصل على شيء من هذا القبيل npm ERR! يرجى محاولة تشغيل هذا الأمر مرة أخرى كجذر / مسؤول. على طول الطريق ، فقط اكتب sudo قبل الأمر وأدخل كلمة المرور عند المطالبة:

 sudo npm install - grunt-المساهمة-uglify - حفظ ديف 

هذا الأمر في الواقع يوزع الخاص بك package.json الملف ويضيفها كتبعية هناك ، فلن تحتاج إلى القيام بذلك يدويًا.

(2) تتطلب في Gruntfile

والخطوة التالية هي إضافة في Gruntfile كشرط. أرغب في إضافة مكونات إضافية في الجزء العلوي من الملف ، إليك ملف Gruntfile الكامل بعد الإضافة grunt.loadNpmTasks ( 'الناخر-contrib-قبح')؛.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-particip-uglify')؛ grunt.initConfig (pkg: grunt.file.readJSON ('package.json'))؛ grunt.registerTask ('افتراضي' ، []) ؛ ؛ 

(3) إنشاء مهمة لتقليل البرامج النصية

كما ناقشنا ، ينبغي أن يتم ذلك داخل initConfig () وظيفة. تمنحك صفحة Github للمكون الإضافي (ومعظم المكونات الأخرى) الكثير من المعلومات والأمثلة. إليك ما استخدمته في مشروع الاختبار الخاص بي.

 uglify: build: src: 'js / scripts.js'، dest: 'js / scripts.min.js' 

هذا واضح جدا ، وأنا حددت scripts.js ملف في دليل js المشروع الخاص بي والوجهة للملف المصغر. هناك العديد من الطرق لتحديد الملفات المصدر ، وسوف نلقي نظرة على ذلك لاحقًا.

الآن ، دعونا نلقي نظرة على Gruntfile الكامل بعد إضافته ، للتأكد من أنك تعرف كيف تتناسب الأشياء معًا.

 module.exports = function (grunt) grunt.loadNpmTasks ('grunt-particip-uglify')؛ grunt.initConfig (pkg: grunt.file.readJSON ('package.json') ، uglify: build: src: 'scripts.js'، dest: 'scripts.min.js') ؛ grunt.registerTask ('افتراضي' ، []) ؛ ؛ 

(4) أضف هذا التكوين إلى مجموعة مهام

الآن يمكن أن تذهب إلى محطة الخاص بك ونوع نخر القبح لكننا سنحتاج إلى مجموعات مهام لتشغيل مهام متعددة لاحقًا. لدينا المهمة الافتراضية فارغة ، فقط في انتظار إضافة شيء ما ، لذلك دعونا نقوم بتعديله إلى ما يلي:

 grunt.registerTask ('افتراضي' ، ['uglify']) ؛ 

في هذه المرحلة ، يجب أن تكون قادرًا على الذهاب إلى المحطة ، اكتب الناخر وانظر التصغير يحدث. لا تنس إنشاء scripts.js ملف بالطبع!

هذا لم يستغرق الكثير من الوقت لإعداد فعلت؟ حتى لو كنت جديدًا على كل هذا واستغرق الأمر بعض الوقت في العمل من خلال الخطوات ، فإن الوقت الذي يتم توفيره سيتجاوز الوقت الذي تقضيه في غضون عدد قليل من الاستخدامات.

تسلسل الملفات

دعنا ننظر في تسلسل الملفات و تعلم كيفية تحديد ملفات متعددة كهدف على طول الطريق.

التسلسل هو عملية دمج محتويات ملفات متعددة في ملف واحد. سنحتاج إلى المكون الإضافي grunt-المساهمة-concat. دعونا نعمل من خلال الخطوات:

لتثبيت استخدام البرنامج المساعد npm تثبيت grunt-المساهمة-concat - حفظ ديف في المحطة. بمجرد الانتهاء من ذلك ، تأكد من إضافته إلى Gruntfile تمامًا مثل قبل الاستخدام grunt.loadNpmTasks ( 'الناخر-contrib-CONCAT')؛.

يصل المقبل هو التكوين. دعنا نجمع بين ثلاثة ملفات محددة ، سيكون بناء الجملة مألوفاً.

 concat: dist: src: ['dev / js / header.js'، 'dev / js / myplugin.js'، 'dev / js / footer.js']، dest: 'js / scripts.js'،  ،, 

يأخذ الرمز أعلاه الملفات الثلاثة المقدمة كمصدر ويجمعها في الملف المعطى كوجهة.

هذا قوي بالفعل ولكن ماذا لو تم إضافة ملف جديد؟ هل نحتاج أن أعود إلى هنا طوال الوقت؟ بالطبع لا ، يمكننا تحديد مجلد كامل من الملفات لسَلسَلة.

 concat: dist: src: 'dev / js / *. js "] ، dest:' js / scripts.js '،،, 

الآن ، سيتم دمج أي ملف javascript داخل مجلد dev / js في ملف واحد كبير: شبيبة / scripts.js, أفضل بكثير!

حان الوقت الآن لإنشاء مهمة حتى نتمكن من ربط بعض الملفات بالفعل.

 grunt.registerTask ('mergejs'، ['concat'])؛ 

ليست هذه هي المهمة الافتراضية بعد الآن لذا سنحتاج إلى كتابة اسمها في المحطة عندما نصدر الناخر أمر.

 نخر mergejs 

أتمتة أتمتة لدينا

لقد حققنا بالفعل الكثير من التقدم ولكن هناك المزيد! في الوقت الحالي ، عندما ترغب في تسلسل أو تصغير تحتاج إلى الانتقال إلى المحطة الطرفية واكتب الأمر المناسب. لقد حان الوقت لنلقي نظرة على راقب القيادة التي سوف تفعل هذا بالنسبة لنا. سنتعلم أيضًا كيفية تنفيذ المهام المتعددة في وقت واحد ، على طول الطريق.

للمضي قدماً ، سنحتاج إلى الاستيلاء على grunt-المساهمة-watch. أنا متأكد من أنه يمكنك تثبيته وإضافته إلى Gruntfile بنفسك الآن ، لذلك سأبدأ بعرض ما أستخدمه في مشروع الاختبار الخاص بي.

 مشاهدة: النصية: files: ['dev / js / *. js'] ، والمهام: ['concat' ، 'uglify'] ، ، 

أنا عينت مجموعة من الملفات لمشاهدة “مخطوطات”, فقط حتى أعرف ماذا يفعل. ضمن هذا الكائن ، قمت بتحديد ملفات لمشاهدتها ومهام ليتم تشغيلها. في المثال السابق للتسلسل ، قمنا بتجميع جميع الملفات في دليل dev / js.

في مثال التصغير ، قمنا بتصغير هذا الملف. من المنطقي مشاهدة مجلد dev / js لإجراء تغييرات وتشغيل هذه المهام كلما وجدت.

كما ترون ، يمكن استدعاء مهام متعددة بسهولة عن طريق فصلها بفواصل. سيتم تنفيذها بالتسلسل ، أولاً التسلسل ، ثم التصغير في هذه الحالة. يمكن القيام بذلك أيضًا مع مجموعات المهام ، وهذا سبب وجودها.

يمكننا الآن تعديل مهمتنا الافتراضية:

 grunt.registerTask ('افتراضي' ، ['concat' ، 'uglify']) ؛ 

الآن لدينا خياران. كلما أردت تسلسل وتقليل البرامج النصية الخاصة بك يمكنك التبديل إلى المحطة الطرفية والكتابة الناخر. يمكنك أيضًا استخدام أمر watch لبدء مشاهدة ملفاتك: نخر ساعة.

سوف يجلس هناك ، في انتظارك لتعديل هذه الملفات. بمجرد القيام بذلك ، ستؤدي جميع المهام المسندة إليها ، والمضي قدما ، وتجربتها.

هذا أفضل بكثير ، لا يلزم إدخال منا. يمكنك الآن العمل مع ملفاتك وسيتم تنفيذ كل شيء بشكل جيد من أجلك.

نظرة عامة

من خلال تلك المعرفة البدائية عن كيفية تثبيت المكونات الإضافية وكيفية عملها ، يمكنك إعداد نفسك لتصبح مدمنًا على الأتمتة بنفسك. هناك الكثير بالنسبة إلى Grunt أكثر مما ناقشناه ولكن لا يوجد شيء لا يمكنك التعامل معه بمفردك.

إن استخدام أوامر لتجميع SASS وتحسين الصور وإصلاحها تلقائيًا وغير ذلك هو مجرد إتباع الخطوات التي ناقشناها وقراءة بناء الجملة الذي يتطلبه البرنامج المساعد.

إذا كنت تعرف بعض الاستخدامات الكبيرة بشكل خاص لـ Grunt ، فيرجى إخبارنا في التعليقات ، فنحن مهتمون دائمًا بسماع كيفية استخدام أدوات مثل Grunt!