مقدمة لأتمتة JavaScript باستخدام Gulp

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

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

Gulp هو نظام بناء يستخدم تدفقات Node.js لتنفيذ نهج وجهة المصدر غير المتزامن للأتمتة. كل شيء مكتوب بجافا سكريبت ، لذلك من السهل على أي شخص لديه معرفة متوسطة بالشفرة أن يبدأ. تتكون عملية بناء Gulp من مجموعة من المراقبين والمهام. بالإضافة إلى ذلك ، يحتفظ المجتمع الذي يقف وراء Gulp بدليل مكون إضافي ضخم داخل npm مما يساعد على إنجاز أي مهمة من ربط JavaScript إلى إنشاء خطوط رموز من SVGs.

بدائل الجلب

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

أساسيات أتمتة العمليات

الإضافات

الإضافات هي الوسيلة التي من خلالها ينجز gulp كل عملية. يتم تثبيت المكونات الإضافية من خلال npm ويتم بدئها باستخدام كلمة "تتطلب".

مهام

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

جلوبس

الكرات هي أنماط أحرف بدل تشير إلى الملفات. تُستخدم الكرات الكروية أو مصفوفات الكرات الأرضية كمدخلات في مصدر المهمة.

مراقبون

يراقب المراقبون ملفات المصدر للتغييرات ومهام الاتصال كلما تم اكتشاف تغيير.

gulpfile.js

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

مهمة مباشرة

للبدء ، تحتاج إلى Node.js و shell سطر أوامر مع وصول المسؤول. يمكنك تنزيل Node.js من هنا. بمجرد التثبيت ، يمكنك تشغيل الأمر التالي للتأكد من أن npm محدث.

 sudo npm install npm -g

تشير العلامة -g إلى أن التثبيت سيكون عالميًا.

أنت الآن جاهز لتثبيت Gulp والبدء في استدعاء بعض المهام البسيطة. استخدم الأمر التالي لتثبيت Gulp عالميًا.

 sudo npm install gulp -g

لاحظ أنه يمكنك أيضًا استخدام نفس الأمر للتحديث.

يمكنك تنزيل مجموعة أدوات البدء التي ستساعدك في مهمتك الأولى من toptal-gulp-tutorial / step1. يتضمن مهمة بسيطة للغاية تقوم بتجميع ملفات SCSS إلى CSS. يستخدم البرنامج المساعد gulp-sass ، الذي يستخدم libsass. لقد اخترت libsass هنا لأنه أسرع بكثير من بديل Ruby ، ​​على الرغم من أنه يفتقر إلى بعض وظائفه. بمجرد الوصول إلى الدليل الجذر لمشروعك ، يمكنك استخدام الأمر التالي لتثبيت جميع المكونات الإضافية المطلوبة.

 npm install

يقرأ هذا الأمر ملف package.json ويثبت جميع التبعيات المطلوبة. نحن نستخدم "تثبيت npm" هنا كاختصار لما يلي:

 npm install gulp --save-dev npm install gulp-sass --save-dev

تضيف علامة "–save-dev" المكونات الإضافية المحددة إلى package.json devDependencies بحيث في المرة التالية التي تريد فيها تثبيت كل شيء ، يمكنك استخدام "npm install" المفيد.

في هذه المرحلة ، يمكنك تشغيل مهمتك الأولى. قم بتشغيل الأمر التالي وراقب حيث يتم تجميع جميع ملفات SCSS في المجلد / scss في CSS في الدليل المقابل:

 gulp scss

لاحظ أننا في هذا المثال نحدد المهمة المراد تشغيلها. إذا حذفنا اسم المهمة ، فسيتم تشغيل الاسم الذي يحمل اسم "افتراضي".

تجول التعليمات البرمجية

تم إنجاز ما سبق في 7 أسطر فقط من كود JavaScript. بالتأكيد ، ستشعر وكأنك في بيتك بمجرد أن تفهم بساطته:

 var gulp = require('gulp'); var scss = require('gulp-sass');

في البداية نقوم بتهيئة جميع الملحقات التي سنستخدمها. Gulp هو الوحيد الذي لا يمكننا الاستغناء عنه:

 gulp.task('scss', function() {

نحدد المهمة المسماة "scss":

 return gulp.src('scss/*.scss')

قم بتعيين الملفات المصدر للمهمة. يتم تعريف هذه على أنها الكرات الأرضية. في هذا المثال ، نشير إلى جميع الملفات الموجودة في المجلد “scss /” الذي ينتهي بـ “.scss”.

 .pipe(scss())

في هذه المرحلة ، نسمي المكون الإضافي gulp-sass الذي حددناه سابقًا:

 .pipe(gulp.dest('css'));

أخيرًا ، نستخدم "gulp.dest" لتحديد مجلد الوجهة لملفاتنا. يمكن أن يكون هذا أيضًا اسم ملف واحد إذا كانت الملفات متسلسلة.

لتحسين تنفيذ أتمتة العملية بشكل أكبر ، يمكنك محاولة تضمين بعض مكونات Gulp الإضافية الأخرى. على سبيل المثال ، قد ترغب في تصغير المنتج النهائي لمهمتك باستخدام gulp-minify-css وإضافة بادئات البائع تلقائيًا باستخدام gulp-autoprefixer.

توظيف مراقب

لقد قمت بإنشاء مجموعة أدوات للمراقب يمكنك استخدامها على الفور. يمكنك تنزيله من toptal-gulp-tutorial / step2. يتضمن نسخة محسّنة من مهمة SCSS التي تم إنشاؤها مسبقًا ، ومراقب يراقب الملفات المصدر ويستدعي المهمة. لبدء تشغيله ، استخدم الأمر التالي:

 gulp

يبدأ هذا الأمر المهمة "الافتراضية" التي تبدأ المراقب. في هذه المرحلة ، يمكنك تحرير أي من ملفات SCSS ومشاهدة إعادة تجميع ملفات CSS. ستتمكن من رؤية إشعارات Gulp في سطر الأوامر.

تجول التعليمات البرمجية

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

 return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

في هذا المثال ، يتم تزويد مصدر Gulp بمجموعة من الكرات الكروية. الأول يتضمن جميع الملفات التي تنتهي بـ ".scss" أيضًا في مجلدات فرعية ، والثاني يستثني الملفات التي تبدأ بـ "_". بهذه الطريقة يمكننا استخدام دالةimport المضمنة في SCSS لسلسلة ملف _page.scss.

 gulp.task('default', ['scss'], function() {

هنا نحدد المهمة "الافتراضية". يتم تشغيل مهمة "scss" كعنصر تبعية قبل "افتراضي".

 gulp.watch('scss/**/*.scss', ['scss']);

أخيرًا ، ندعو وظيفة مشاهدة Gulp للإشارة إلى أي ملف ينتهي بـ ".scss" وكلما حدث تغيير ، لتشغيل مهمة "scss".

أنت الآن جاهز لإنشاء مراقبين جدد لعمليات آلية أخرى مثل تسلسل JavaScript أو تلميح التعليمات البرمجية أو تجميع CoffeeScript أو أي شيء آخر قد يخطر ببالك. للتعمق في تنفيذ أتمتة JavaScript هذا ، أقترح إضافة gulp-notify الذي سيُعلمك عند تشغيل مهمة. يمكنك أيضًا إنشاء مهمة منفصلة لتقليل رمز CSS الناتج وتشغيل مهمة "scss" كتبعية لذلك. أخيرًا ، يمكنك استخدام gulp-rename لإضافة اللاحقة ".min" إلى الملفات الناتجة.

إضافات Gulp المتقدمة لأتمتة JavaScript

توجد الآلاف من المكونات الإضافية في قاعدة المكونات الإضافية لـ Gulp ، بعضها يتجاوز أتمتة JavaScript البسيطة لعملية الإنشاء. فيما يلي بعض الأمثلة البارزة:

BrowserSync

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

تصفح

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

حزمة الويب

على غرار Browserify ، يهدف Webpack إلى تحويل الوحدات ذات التبعيات إلى ملفات ثابتة. يمنح هذا الخيار مزيدًا من الحرية للمستخدم فيما يتعلق بكيفية تعيين تبعيات الوحدة النمطية ، ولا يهدف إلى اتباع نمط رمز Node.js.

كرما

يجلب Gulp-karma بيئة الاختبار سيئة السمعة إلى Gulp. تتبع Karma نهج التكوين الأقل الذي يؤيده Gulp أيضًا.

خاتمة

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

ترقبوا برنامج Gulp التعليمي الأكثر تقدمًا قريبًا.