الابتداء مع Gulp.js

Gulp عبارة عن أداة تستند إلى Javascript تتيح لك أتمتة أجزاء من سير العمل الخاص بك. أتمتة يمكن أن توفر لك حرفيا ساعات في اليوم. سواء كنت مطورًا أو مصممًا يقوم بإنشاء إطارات سلكية HTML بين الحين والآخر ، فإنني أشجعك على البحث.

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

تثبيت اللب

لا تقلق ، التثبيت سهل للغاية. سنحتاج إلى استخدام الجهاز الطرفي في OSX و Linux ، أو موجه الأوامر الخاص بنظام Windows. سأشير إليها باسم المحطة الطرفية من الآن فصاعدًا.

فتحه واكتب npm -v واضغط على إدخال. إذا رأيت رقم الإصدار معروضًا ، فلديك عقدة مثبتة بالفعل - وهذا تبعية لـ Gulp.

إذا كنت تحصل على “القيادة لم يتم العثور” (أو خطأ مشابه) ، انتقل إلى صفحة تنزيل Node.js وحدد الحزمة المناسبة لنظامك. بمجرد التثبيت ، سيكون الأمر npm متاحًا في الجهاز.

تثبيت Gulp هو بنفس السهولة. الصق الأمر التالي في الجهاز ، هذا كل شيء:

npm تثبيت - غلوب العالمية

سيؤدي ذلك إلى تثبيت أمر Gulp الذي سيكون متاحًا على مستوى العالم على نظامك.

إضافة Gulp إلى مشروع

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

تثبيت NPM - بلسم حفظ ديف

سيؤدي هذا إلى إنشاء مجلد node_modules وملف npm-debug.log في مجلد المشروع. يتم استخدام هذه من قبل Gulp للقيام بشيء لمشروعك ، لا تحتاج إلى التفكير في هذه المرحلة.

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

و Gulpfile

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

var gulp = require ('gulp') ؛ gulp.task ('default'، function () // هذا لا يفعل شيئًا في الوقت الحالي ، سنضيف الوظيفة قريبًا)؛

بمجرد حفظ هذا الملف ، يمكنك العودة إلى جهازك النهائي وتشغيل أمر gulp من تلقاء نفسه. يكشف Gulp عن المشروع الموجود فيه ويدير المهمة الافتراضية - المهمة التي أنشأناها للتو. يجب أن نرى شيئا من هذا القبيل:

لا يحدث شيء هنا ، لأن المهمة فارغة ، لكنها تعمل بشكل جيد. الآن ، دعنا نذهب مع بعض الأمثلة المناسبة!

نسخ ملف

هذا ممل ، وسأعترف بهذا ، لكنه سيساعدك على فهم ما يجري بسهولة.

في مجلد المشروع الخاص بك إنشاء ملف اسمه to_copy.txt , ومجلد اسمه ديف. دعنا نذهب إلى Gulpfile لدينا وإنشاء مهمة جديدة اسمه نسخ.

gulp.task ('copy'، function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev'))؛)؛

يحدد السطر الأول مهمة تسمى نسخة. ضمن هذا نستخدم gulp.src لتحديد الملفات التي نستهدفها مع هذه المهمة - في هذه الحالة ، يكون ملفًا واحدًا اسمه to_copy.txt.

بعد ذلك نقوم بإدخال هذه الملفات على دالة gulp.dest التي تحدد المكان الذي نريد وضع هذه الملفات فيه - لقد استخدمت دليل dev.

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

الأمر توجيه الإخراج هو في قلب Gulp. إنها طريقة فعالة لنقل البيانات بين الأوامر. يحدد الأمر src الملفات التي يتم توجيهها إلى الأمر dest. في سيناريوهات أكثر تعقيدًا ، سنقوم بنقل ملفاتنا إلى أوامر أخرى قبل تحديد الوجهة.

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

gulp.task ('copy'، function () return gulp.src ('development / *') .pipe (gulp.dest ('production'))؛)؛

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

تجميع ساس

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

انا اطبع ساس غالب في جوجل ، والنتيجة الأولى هي عادة ما أحتاج ، يجب أن تجد صفحة لحزمة SASS. يوضح لك كيفية تثبيته (تثبيت npm gulp-sass). من المحتمل أنك ستحتاج إلى استخدام sudo لتثبيته كمسؤول ، لذلك سيكون على الأرجح (sudo npm install gulp-sass) .

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

$ primary: # ff9900؛ body background: $ primary؛ 

الآن إنشاء مهمة Gulp التالية في Gulpfile.

gulp.task ('sass'، function () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')))؛

قبل تشغيل الأمر ، لا تنس أن "تطلب" الحزمة الموجودة في الجزء العلوي من ملف Gulpfile مثل هذا:

var sass = require ('gulp-sass') ؛

عند الجري بلع ساس, سيتم نقل جميع الملفات ذات امتداد scss إلى وظيفة sass ، والتي ستحولها إلى css. ثم يتم توجيه هذه الأنابيب إلى وظيفة الوجهة التي تضعها في مجلد css.

مشاهدة الملفات والمجلدات

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

في Gulpfile ، قم بإنشاء أمر باسم أتمتة والتي ستستخدم الأمر watch لمشاهدة مجموعة من الملفات للتغييرات ، وتشغيل أمر معين عندما يتغير الملف.

gulp.task ('automate'، function () gulp.watch ('*. scss'، ['sass'])؛)؛

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

إذا قمت الآن بتغيير ملف style.scss الخاص بك ، فيجب تجميعه إلى ملف css داخل دليل css تلقائيًا.

تشغيل مهام متعددة

هناك العديد من المواقف التي قد ترغب في تشغيل مهام متعددة فيها. عند مشاهدة مجلد javascript الخاص بك ، قد ترغب في تجميع سلسلتين من الملفات ومن ثم المتابعة لتقليصهما. هناك طريقتان يمكنك القيام بذلك.

إذا كانت المهام مرتبطة ، أحب أن سلسلة لهم. وخير مثال على ذلك هو تسلسل ملفات جافا سكريبت وتقليلها. نقوم أولاً بنقل ملفاتنا إلى إجراء concat ، ثم توجيهها إلى gulp-uglify ، ثم نستخدم وظيفة الوجهة لإخراجها.

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

var gulp = require ('gulp') ؛ var uglify = require ('gulp-uglify') ؛ var concat = require ('gulp-concat') ؛ var sass = require ('gulp-sass') ؛ gulp.task ('scripts'، function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.')))؛ gulp.task ('styles'، function () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')))؛ gulp.task ('automate'، function () gulp.watch (['*. scss'، 'js / ** / *. js']، ['scripts'، 'styles'])؛)؛ gulp.task ('افتراضي' ، ['نصوص' ، 'أنماط']) ؛

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

إذا كنت اكتب بلع ساس, سيتم تجميع جميع ملفات scss الخاصة بك وحفظها في دليل css.

إذا كنت اكتب بلع (المهمة الافتراضية) ، الخاص بك مخطوطات سيتم تشغيل المهمة ، تليها الخاص بك الأنماط مهمة.

ال بلع أتمتة تقوم مهمة بمراقبة عدة مجلدات للتغييرات في ملفات scss و js الخاصة بنا وسوف تقوم بالمهمتين اللتين حددناهما ، في حالة اكتشاف تغيير.

نظرة عامة

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

• البحث عن البرنامج المساعد
• تثبيت البرنامج المساعد
• تتطلب البرنامج المساعد في Gulpfile الخاص بك
• استخدم بناء الجملة في الوثائق

الأوامر الخمسة المتاحة في Gulp (مهمة ، تشغيل ، مراقبة ، src ، dest) هي الأوامر الوحيدة التي تحتاج إلى معرفتها ، جميع الإضافات الخاصة بجهات خارجية لديها وثائق رائعة. إليك قائمة ببعض الأشياء التي أستخدمها والتي يمكنك البدء بها الآن:

• تحسين الصور باستخدام تحسين صورة gulp
• إنشاء صور العفاريت مع بلع العفريت
• سلسله الملفات مع بلع - concat
• تصغير الملفات باستخدام gulp-uglify
• حذف الملفات باستخدام gulp-del
• جافا سكريبت لينت مع بلع jslint
• JSON ينتنج مع بلع jsonlint
• Autoprefix CSS مع gulp-autoprefixer
• بحث واستبدال باستخدام gulp-frep
• تصغير CSS باستخدام culp-minify-css