كيفية تسخير الآلات: أن تكون منتجًا مع متسابقي المهام

المتسابقون هم الأبطال (أو الأشرار ، اعتمادًا على وجهة نظرك) الذين يكدحون بهدوء وراء معظم تطبيقات الويب والجوال. يوفر متسابقو المهام قيمة من خلال أتمتة العديد من مهام التطوير مثل ربط الملفات وتجميع خوادم التطوير وتجميع التعليمات البرمجية. في هذه المقالة ، سنغطي نصوص Grunt و Gulp و Webpack و npm. سنقدم أيضًا بعض الأمثلة لكل واحد لتبدأ. بالقرب من النهاية ، سأطرح بعض المكاسب السهلة والنصائح لدمج الأفكار من هذا المنشور في تطبيقك.

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

مزيد من القراءة على SmashingMag:

• كن مستخدمًا قويًا في سطر الأوامر باستخدام Oh-My-ZSH و Z.
• مقدمة إلى PostCSS
• انهض والجري مع Grunt
• بناء مع الجلب

ملاحظة على سطر الأوامر

تعد أدوات تشغيل المهام وأدوات البناء في الأساس أدوات سطر أوامر. خلال هذه المقالة ، سأفترض مستوى لائقًا من الخبرة والكفاءة في العمل مع سطر الأوامر. إذا فهمت كيفية استخدام الأوامر الشائعة مثل cd و ls و cp و mv ، فيجب أن تكون على ما يرام أثناء استعراض الأمثلة المختلفة. إذا كنت لا تشعر بالراحة عند استخدام هذه الأوامر ، فستجد منشورًا تمهيديًا رائعًا متاحًا في Smashing Magazine. دعونا نبدأ الأمور مع جدهم جميعًا: Grunt.

الناخر

كان Grunt أول عداء مهام يعتمد على JavaScript. أستخدم Grunt في شكل ما منذ عام 2012. الفكرة الأساسية وراء Grunt هي أنك تستخدم ملف JavaScript خاصًا ، Gruntfile.js ، لتهيئة العديد من المكونات الإضافية لإنجاز المهام. لديها نظام بيئي واسع من المكونات الإضافية وهي أداة ناضجة ومستقرة للغاية. يحتوي Grunt على دليل ويب رائع يقوم بفهرسة غالبية المكونات الإضافية (حوالي 5500 حاليًا). عبقرية Grunt البسيطة هي مزيجها من JavaScript وفكرة ملف التكوين المشترك (مثل makefile) ، والتي سمحت للعديد من المطورين بالمساهمة في Grunt واستخدامها في مشاريعهم. هذا يعني أيضًا أنه يمكن وضع Grunt تحت نفس نظام التحكم في الإصدار مثل باقي المشروع.

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

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

مثال

لنلقِ نظرة على كيفية عمل Grunt بالفعل. سيؤدي تشغيل grunt في سطر الأوامر إلى تشغيل برنامج سطر أوامر Grunt الذي يبحث عن Gruntfile.js في جذر الدليل. يحتوي Gruntfile.js على التكوين الذي يتحكم في ما سيفعله Grunt. بهذا المعنى ، يمكن اعتبار Gruntfile.js نوعًا من كتب الطبخ التي يتبعها الطاهي (مثل Grunt ، البرنامج) ؛ ومثل أي كتاب طبخ جيد ، Gruntfile.js على العديد من الوصفات (مثل المهام).

سنقوم بوضع Grunt خلال الخطوات باستخدام البرنامج المساعد Grunticon لإنشاء رموز لتطبيق ويب افتراضي. يأخذ Grunticon دليلًا من SVGs ويخرج العديد من الأصول:

• ملف CSS مع SVGs base-64-encoded كصور خلفية ؛
• ملف CSS بإصدارات PNG من SVGs base-64-encoded كصور خلفية ؛
• ملف CSS يشير إلى ملف PNG فردي لكل رمز.

تمثل الملفات الثلاثة المختلفة الإمكانات المختلفة للمتصفحات والأجهزة المحمولة. ستتلقى الأجهزة الحديثة SVGs عالية الدقة كطلب واحد (أي ملف CSS واحد). ستحصل المتصفحات التي لا تتعامل مع SVGs ولكنها تتعامل مع الأصول ذات التشفير الأساسي 64 على ورقة أنماط PNG base-64. أخيرًا ، ستحصل أي متصفحات لا يمكنها التعامل مع هذين السيناريوهين على ورقة الأنماط "التقليدية" التي تشير إلى ملفات PNG. كل هذا من دليل واحد من SVGs!

يبدو تكوين هذه المهمة كما يلي:

 module.exports = function(grunt) { grunt.config("grunticon", { icons: { files: [ { expand: true, cwd: 'grunticon/source', src: ["*.svg", ".png"], dest: 'dist/grunticon' } ], options: [ { colors: { "blue": "blue" } } ] } }); grunt.loadNpmTasks('grunt-grunticon'); };

دعنا نتصفح الخطوات المختلفة هنا:

1. يجب أن يكون برنامج Grunt مثبتًا عالميًا.
2. قم بإنشاء ملف Gruntfile.js في جذر المشروع. من الأفضل أيضًا تثبيت Grunt باعتباره تبعية npm في ملف package.json الخاص بك جنبًا إلى جنب مع Grunticon عبر npm i grunt grunt-grunticon --save-dev .
3. قم بإنشاء دليل لـ SVGs ودليل وجهة (حيث ستذهب الأصول المبنية).
4. ضع نصًا صغيرًا في head HTML الخاص بك ، والذي سيحدد الرموز المراد تحميلها.

إليك الشكل الذي يجب أن يبدو عليه دليلك قبل تشغيل مهمة Grunticon:

 |-- Gruntfile.js |-- grunticon | `-- source | `-- logo.svg `-- package.json
|-- Gruntfile.js |-- grunticon | `-- source | `-- logo.svg `-- package.json

بمجرد تثبيت هذه الأشياء وإنشائها ، يمكنك نسخ مقتطف الشفرة أعلاه إلى Gruntfile.js . يجب أن تكون قادرًا بعد ذلك على تشغيل grunt grunticon من سطر الأوامر ومشاهدة تنفيذ مهمتك.

يقوم المقتطف أعلاه ببعض الأشياء:

• يضيف كائن config جديد إلى Grunt على السطر 32 يسمى grunticon ؛
• يملأ الخيارات والمعلمات المختلفة لـ Grunticon في كائن icons ؛
• أخيرًا ، يسحب البرنامج المساعد Grunticon عبر loadNPMTasks .

إليك ما يجب أن يبدو عليه دليلك بعد Grunticon:

 |-- Gruntfile.js |-- dist | `-- grunticon | |-- grunticon.loader.js | |-- icons.data.png.css | |-- icons.data.svg.css | |-- icons.fallback.css | |-- png | | `-- logo.png | `-- preview.html |-- grunticon | `-- source | `-- logo.svg `-- package.json
|-- Gruntfile.js |-- dist | `-- grunticon | |-- grunticon.loader.js | |-- icons.data.png.css | |-- icons.data.svg.css | |-- icons.fallback.css | |-- png | | `-- logo.png | `-- preview.html |-- grunticon | `-- source | `-- logo.svg `-- package.json

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

Gulp: كتل LEGO لنظام البناء الخاص بك

ظهرت Gulp في وقت ما بعد Grunt وتطلعت إلى أن تكون أداة بناء لم تكن كلها تكوينًا بل كودًا فعليًا. الفكرة وراء الكود فوق التكوين هي أن الكود أكثر تعبيراً ومرونة من تعديل ملفات التكوين اللانهائية. العقبة مع Gulp هي أنها تتطلب معرفة تقنية أكثر من Grunt. ستحتاج إلى أن تكون على دراية بواجهة برمجة تطبيقات تدفق Node.js وأن تكون مريحًا في كتابة JavaScript الأساسية.

يعد استخدام Gulp لتدفقات Node.js السبب الرئيسي في كونه أسرع من Grunt. يعني استخدام التدفقات أنه بدلاً من استخدام نظام الملفات كـ "قاعدة بيانات" لتحويلات الملفات ، يستخدم Gulp عمليات التحويل في الذاكرة. لمزيد من المعلومات حول التدفقات ، تحقق من وثائق API لـ Node.js streams ، جنبًا إلى جنب مع كتيب الدفق.

مثال

كما هو الحال في قسم Grunt ، سنضع Gulp خلال الخطوات بمثال مباشر: تجميع وحدات JavaScript النمطية الخاصة بنا في ملف تطبيق واحد.

تشغيل Gulp هو نفسه تشغيل Grunt. سيبحث برنامج سطر الأوامر gulp عن كتاب الطبخ للوصفات ( Gulpfile.js ) في الدليل الذي يتم تشغيله فيه.

يعتبر تحديد عدد الطلبات التي تقدمها كل صفحة من أفضل ممارسات أداء الويب (خاصةً على الهاتف المحمول). ومع ذلك ، فإن التعاون مع مطورين آخرين يكون أسهل بكثير إذا تم تقسيم الوظائف إلى ملفات متعددة. أدخل متسابقي المهام. يمكننا استخدام Gulp لدمج ملفات JavaScript المتعددة لتطبيقنا بحيث يتعين على عملاء الهاتف المحمول تحميل ملف واحد ، بدلاً من العديد من الملفات.

لدى Gulp نفس النظام البيئي الضخم من المكونات الإضافية مثل Grunt. لذا ، لتسهيل هذه المهمة ، سنستند إلى المكون الإضافي gulp-concat. لنفترض أن هيكل مشروعنا يشبه هذا:

 |-- dist | `-- app.js |-- gulpfile.js |-- package.json `-- src |-- bar.js `-- foo.js

يوجد ملفان من ملفات JavaScript في دليل src الخاص بنا ، ونريد دمجهما في ملف واحد ، app.js ، في ملف dist/ directory الخاص بنا. يمكننا استخدام مهمة Gulp التالية لإنجاز ذلك.

 var gulp = require('gulp'); var concat = require('gulp-concat'); gulp.task('default', function() { return gulp.src('./src/*.js') .pipe(concat('app.js')) .pipe(gulp.dest('./dist/')); });

البتات المهمة موجودة في رد الاتصال gulp.task . هناك ، نستخدم واجهة برمجة تطبيقات gulp.src للحصول على جميع الملفات التي تنتهي بـ .js في دليل src الخاص بنا. تقوم واجهة برمجة التطبيقات gulp.src بإرجاع دفق من تلك الملفات ، والتي يمكننا بعد ذلك تمريرها (عبر واجهة برمجة تطبيقات pipe ) إلى البرنامج المساعد gulp-concat. يقوم المكون الإضافي بعد ذلك بتجميع جميع الملفات الموجودة في الدفق وتمريرها إلى وظيفة gulp.dest . تقوم وظيفة gulp-dest ببساطة بكتابة المدخلات التي تتلقاها على القرص.

يمكنك أن ترى كيف يستخدم Gulp التدفقات لمنحنا "اللبنات الأساسية" أو "السلاسل" لمهامنا. يبدو سير عمل Gulp النموذجي كما يلي:

1. احصل على جميع الملفات من نوع معين.
2. قم بتمرير هذه الملفات إلى مكون إضافي (concat!) ، أو قم ببعض التحويل.
3. قم بتمرير تلك الملفات المحولة إلى كتلة أخرى (في حالتنا ، كتلة dest ، والتي تنهي سلسلتنا).

كما في مثال Grunt ، سيؤدي تشغيل gulp ببساطة من جذر دليل مشروعنا إلى تشغيل المهمة default المحددة في ملف Gulpfile.js . تجمع هذه المهمة بين ملفاتنا ودعونا نواصل تطوير تطبيقنا أو موقعنا الإلكتروني.

حزمة الويب

أحدث إضافة إلى نادي عداء مهام JavaScript هي Webpack. يُصنِّف Webpack نفسه على أنه "مجمّع وحدة" ، مما يعني أنه يمكنه إنشاء حزمة من تعليمات JavaScript البرمجية ديناميكيًا من عدة ملفات منفصلة باستخدام أنماط الوحدة النمطية مثل نمط CommonJS. يحتوي Webpack أيضًا على مكونات إضافية ، والتي تسميها برامج التحميل.

لا يزال Webpack شابًا إلى حد ما ولديه وثائق كثيفة ومربكة إلى حد ما. لذلك ، أوصي بمستودع Pete Hunt's Webpack كنقطة انطلاق رائعة قبل الغوص في الوثائق الرسمية. أنا أيضًا لا أوصي بـ Webpack إذا كنت جديدًا على متسابقي المهام أو لا تشعر بالكفاءة في JavaScript. بغض النظر عن هذه المشكلات ، فإنها لا تزال أداة أكثر تحديدًا من الاتساع العام لـ Grunt و Gulp. يستخدم العديد من الأشخاص Webpack جنبًا إلى جنب مع Grunt أو Gulp لهذا السبب بالذات ، مما يتيح لـ Webpack التفوق في تجميع الوحدات النمطية والسماح لـ Grunt أو Gulp بمعالجة المزيد من المهام العامة.

يتيح لنا Webpack في النهاية كتابة رمز على غرار Node.js للمتصفح ، وهو فوز كبير للإنتاجية وفصل واضح للمخاوف في الكود الخاص بنا عبر الوحدات النمطية. دعنا نستخدم Webpack لتحقيق نفس النتيجة كما فعلنا مع مثال Gulp ، بدمج عدة ملفات JavaScript في ملف تطبيق واحد.

مثال

غالبًا ما يتم استخدام Webpack مع Babel لتحويل كود ES6 إلى ES5. يتيح تحويل الشفرة من ES6 إلى ES5 للمطورين استخدام معيار ES6 الناشئ أثناء تقديم ES5 للمتصفحات أو البيئات التي لا تدعم ES6 بشكل كامل حتى الآن. ومع ذلك ، في هذا المثال ، سنركز على بناء حزمة بسيطة من الملفين من مثال Gulp. للبدء ، نحتاج إلى تثبيت Webpack وإنشاء ملف التكوين ، webpack.config.js . هذا هو الشكل الذي يبدو عليه ملفنا:

 module.exports = { entry: "./src/foo.js", output: { filename: "app.js", path: "./dist" } };

في هذا المثال ، نوجه Webpack إلى ملف src/foo.js الخاص بنا لبدء عمله في السير في مخطط التبعية الخاص بنا. لقد قمنا أيضًا بتحديث ملف foo.js ليبدو كالتالي:

 //foo.js var bar = require("./bar"); var foo = function() { console.log('foo'); bar(); }; module.exports = foo;

وقمنا بتحديث ملف bar.js ليبدو كالتالي:

 //bar.js var bar = function() { console.log('bar'); }; module.exports = bar;

هذا مثال أساسي جدًا من CommonJS. ستلاحظ أن هذه الملفات الآن "تصدر" وظيفة. بشكل أساسي ، يسمح لنا CommonJS و Webpack بالبدء في تنظيم الكود الخاص بنا في وحدات قائمة بذاتها يمكن استيرادها وتصديرها من خلال تطبيقنا. Webpack ذكي بما يكفي لمتابعة الكلمات الأساسية للاستيراد والتصدير وتجميع كل شيء في ملف واحد ، dist/app.js لم نعد بحاجة إلى الحفاظ على مهمة التسلسل ، ونحتاج ببساطة إلى الالتزام بهيكل لشفرتنا بدلاً من ذلك. أفضل بكثير!

تمتد

يعتبر Webpack أقرب إلى Gulp في أنه "مجرد JavaScript." يمكن تمديدها للقيام بمهام عداء أخرى عبر نظام اللودر الخاص بها. على سبيل المثال ، يمكنك استخدام محمل css ومحمل sass لتجميع Sass في CSS وحتى استخدام Sass في JavaScript الخاص بك عن طريق التحميل الزائد على نمط CommonJS require ! ومع ذلك ، فإنني عادةً ما أؤيد استخدام Webpack فقط لبناء وحدات JavaScript النمطية ولاستخدام نهج آخر أكثر عمومية لتشغيل المهام (على سبيل المثال ، Webpack و npm scripts أو Webpack و Gulp للتعامل مع أي شيء آخر).

البرامج النصية npm

نصوص npm هي أحدث جنون محب ، ولسبب وجيه. كما رأينا مع كل هذه الأدوات ، فإن عدد التبعيات التي قد يقدمونها للمشروع قد يخرج عن نطاق السيطرة في النهاية. أول مشاركة رأيتها تدافع عن نصوص npm كنقطة دخول لعملية البناء كانت بواسطة James Halliday. يلخص منشوره بشكل مثالي القوة التي تم تجاهلها لنصوص npm (التركيز لي):

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

هل التقطت تلك النقطة الأخيرة في النهاية؟ يتمثل النداء الأساسي للنصوص البرمجية npm في أنها تتمتع "ببصمة تكوين صغيرة جدًا". هذا هو أحد الأسباب الرئيسية التي جعلت البرامج النصية npm تبدأ في الظهور (بعد أربع سنوات تقريبًا ، للأسف). مع Grunt و Gulp وحتى Webpack ، يبدأ المرء في النهاية في إغراق المكونات الإضافية التي تغلف الثنائيات وتضاعف عدد التبعيات في المشروع.

لدى Keith Cirkel البرنامج التعليمي go-to حول استخدام npm لاستبدال Grunt أو Gulp. إنه يوفر مخططًا لكيفية الاستفادة الكاملة من قوة البرامج النصية npm ، وقد قدم مكونًا إضافيًا أساسيًا ، Parallel Shell (ومجموعة أخرى مثله تمامًا).

مثال

في قسمنا حول Grunt ، أخذنا الوحدة النمطية الشهيرة Grunticon وأنشأنا أيقونات SVG (مع ملفات PNG الاحتياطية) في مهمة Grunt. اعتاد أن يكون هذا هو نقطة الألم الوحيدة مع نصوص npm بالنسبة لي. لفترة من الوقت ، كنت سأبقي Grunt مثبتًا للمشاريع فقط لاستخدام Grunticon. أود حرفيًا "توجيه" إلى Grunt في مهمة npm الخاصة بي لتحقيق بداية عداء المهام (أو ، كما بدأنا نسميها في العمل ، أداة بناء أداة). لحسن الحظ ، أصدرت The Filament Group ، المجموعة الرائعة وراء Grunticon ، نسخة مستقلة (أي خالية من Grunt) من أداتهم ، Grunticon-Lib. لذلك ، دعنا نستخدمها لإنشاء بعض الرموز باستخدام نصوص npm!

هذا المثال أكثر تقدمًا من مهمة نصية نموذجية في npm. مهمة البرنامج النصي npm النموذجية هي استدعاء لأداة سطر الأوامر ، مع العلامات المناسبة أو ملف التكوين. إليك مهمة أكثر نموذجية تجمع Sass إلى CSS:

 "sass": "node-sass src/scss/ -o dist/css",

انظر كيف هو مجرد سطر واحد مع خيارات متنوعة؟ لا حاجة إلى ملف مهمة ، ولا توجد أداة بناء لتدور - فقط npm run sass من سطر الأوامر ، وأنت Sass الآن هو CSS. إحدى الميزات الرائعة حقًا لنصوص npm هي كيفية تجميع مهام البرنامج النصي معًا. على سبيل المثال ، لنفترض أننا نريد تشغيل بعض المهام قبل تشغيل مهمة Sass الخاصة بنا. سننشئ إدخال نصي جديد مثل هذا:

 "presass": "echo 'before sass',

هذا صحيح: npm يفهم البادئة pre- . كما أنه يفهم البادئة post- . سيتم تشغيل أي إدخال نصي يحمل نفس الاسم مثل إدخال برنامج نصي آخر post- pre- أو لاحقة قبل هذا الإدخال أو بعده.

سيتطلب تحويل الرموز الخاصة بنا ملف Node.js فعليًا. إنه ليس خطيرًا للغاية ، رغم ذلك. ما عليك سوى إنشاء دليل tasks وإنشاء ملف جديد باسم grunticon.js أو icons.js أو أيًا كان منطقيًا لأولئك الذين يعملون في المشروع. بمجرد إنشاء الملف ، يمكننا كتابة بعض JavaScript لإطلاق عملية Grunticon الخاصة بنا.

ملاحظة: كل هذه الأمثلة تستخدم ES6 ، لذلك سنستخدم babel-node لتشغيل مهمتنا. يمكنك بسهولة استخدام ES5 و Node.js ، إذا كان ذلك أكثر راحة.

 import icons from "grunticon-lib"; import globby from "globby"; let files = globby.sync('src/icons/*'); let options = { colors: { "blue": "blue" } }; let icon = new icons(files, 'dist/icons', options); icon.process();

دعنا ندخل في الكود ونكتشف ما يحدث.

1. نحن import (أي تتطلب) مكتبتين ، grunticon-lib و globby . Globby هي إحدى أدواتي المفضلة ، وهي تجعل العمل مع الملفات والكرة الأرضية أمرًا سهلاً للغاية. يقوم Globby بتحسين Node.js Glob (حدد جميع ملفات JavaScript عبر ./*.js ) مع دعم Promise. في هذه الحالة ، نستخدمه للحصول على جميع الملفات في دليل src/icons .
2. بمجرد القيام بذلك ، نقوم بتعيين بعض الخيارات في كائن options ثم استدعاء Grunticon-Lib بثلاث حجج:
   • ملفات الأيقونات ،
   • الوجهة،
   • تتولى المكتبة مسؤولية هذه الرموز وتقوم بمضغها ، وفي النهاية تنشئ إصدارات SVGs و PNG في الدليل الذي نريده.
3. نحن على وشك الانتهاء. تذكر أن هذا موجود في ملف منفصل ، ونحن بحاجة إلى إضافة "خطاف" لاستدعاء هذا الملف من البرنامج النصي npm الخاص بنا ، مثل هذا: "icons": "babel-node tasks/icons.js" .
4. يمكننا الآن npm run icons ، وسيتم إنشاء أيقوناتنا في كل مرة.

تقدم البرامج النصية npm مستوى مماثلًا من القوة والمرونة مثل متسابقي المهام الآخرين ، بدون دين البرنامج المساعد.

تمت تغطية تفاصيل متسابقي المهام هنا

بعض المكاسب السهلة

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

مخطوطات التفاف!

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

 { "scripts": { "start": "gulp" } }

تستخدم العديد من المشاريع كتل البرنامج النصي start test npm لمساعدة المطورين الجدد على التأقلم بسرعة. يقدم البرنامج النصي المغلف طبقة أخرى من التجريد لسلسلة بناء عداء المهام الخاصة بك ، ومع ذلك أعتقد أنه من المفيد أن تكون قادرًا على التوحيد حول العناصر الأولية npm (مثل test ). أوامر npm لها طول عمر أفضل من الأداة الفردية.

رش القليل من Webpack

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

استخدم PostCSS بسهولة مع البرامج النصية npm

PostCSS عبارة عن مجموعة رائعة من المكونات الإضافية التي تعمل على تحويل وتحسين CSS بمجرد كتابتها ومعالجتها مسبقًا. بمعنى آخر ، إنه معالج لاحق. من السهل بما يكفي الاستفادة من PostCSS باستخدام البرامج النصية npm. لنفترض أن لدينا برنامج Sass كما في المثال السابق:

 "sass": "node-sass src/scss/ -o dist/css",

يمكننا استخدام الكلمات الأساسية lifecycle البرنامج النصي npm لإضافة برنامج نصي ليتم تشغيله تلقائيًا بعد مهمة Sass:

 "postsass": "postcss --use autoprefixer -c postcss.config.json dist/css/*.css -d dist/css",

سيتم تشغيل هذا البرنامج النصي في كل مرة يتم فيها تشغيل البرنامج النصي Sass. تعتبر حزمة postcss-cli رائعة ، لأنه يمكنك تحديد التكوين في ملف منفصل. لاحظ أنه في هذا المثال ، نضيف إدخال نصي آخر لإنجاز مهمة جديدة ؛ هذا نمط شائع عند استخدام البرامج النصية npm. يمكنك إنشاء سير عمل ينجز جميع المهام المختلفة التي يحتاجها تطبيقك.

خاتمة

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

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