أدوات برمجية

أتمتة المهام بواسطة gulpjs و كيفية الاستفادة منه بمشروعك

 

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

السؤال دائما اذا تعمل شيء روتيني متكرر  ليه ما أطور سكربت ينفذ المهام تلقائياً بدلاً عني ؟

وانا بدوري اركز على المهام الأكبر واحصل على انتاجية أفضل .

في هذه التدوينة سوف نستعرض اداة  توفر علينا جهد ووقت وتغنينا عن المهام المتكررة بحيث نعمل سكربت واوامر بسيطة يتم تنفيذها بسطر فقط وتختصر علينا اشياء كثير وايضا ما ننسى شيء من المهام – التنفيذ تلقائي -automatically . بواسطة Gulpjs


ما هو Gulpjs ؟

اداة تم تطويرها بلغة جافاسكربت الهدف منها تنفيذ مهام tasks تلقائيا بناء على المهام الخاصة بك.

من ضمن المهام :

  1.   Minify – ضغط وتقليل حجم ملفات javascript و CSS
  2. unit testing –  عمل وحدات اختبار للكود و التأكد من عمله بفعالية .
  3. Less / Saas Compilation – تحويل وترجمة ملفات Less/Saas الى ملفات CSS

من مميزاتها

تستطيع فصل ملفات التطوير عن الملفات النهائية للمشروع بحيث عند انتهاء مهمة السكربت  يتم نقلها تلقائيا الى مجلد تم تحديده بواسطتك مثلا dist/js لملفات الجافاسكربت .

تمكنك من دمج اكثر من ملف في ملف واحد فقط .

تكتب جميع مهامك tasks بملف واحد وكل مهمة لها اسم خاص بها يمكنك اختياره بنفسك minify-css ، minify-js او تكون المهمة بالمسمى الافتراضي default.

خطوات كتابة سكربتك الخاص بمهامك:
  1. تستدعي المكتبات اللازمة
  2. تحدد الملفات التي سوف يتم تنفيذ المهام عليها
  3. تحدد ماذا يجب ان تفعل بالملفات
  4. تحدد المجلد النهائي لوضع مخرجات هذا السكربت عن الانتهاء من تنفيذه .

شرح اوامر gulpjs

gulp.task –  جميع الاوامر الخاصة بالمهمة task تكون بداخل هذا الامر.

gulp.src  –   يتم من خلاله تحديد مسار كافة الملفات التي سوف تتنفذ عليها الأوامر – ( styles/*.css) – ( js/*.js)  وهذا يعني جميع الملفات التي بصيغة css بداخل مجلد styles ، او يمكن تمرير الملفات بداخل array باسماء الاعتيادية .

gulp.dest – مسار المجلد لوضع ملفات او مخرجات هذه المهمة .

gulp.watch – مراقبة تغييرات الملفات المحددة .

 تثبيت gulpjs

gulpjs يتطلب وجود npm على جهازك ويكون مثبت مسبقا

ومن ثم نقوم بتنفيذ هذه الامر

npm install gulp-cli -g

الان تم تثبيت gulpjs على جهازنا ونستطيع استخدام اوامر gulp في  اي مشروع على الجهاز

ننتقل الى مجلد مشروعنا وبعدها  ننفذ هذا الأمر

npm install --save-dev gulp

 

 على افتراض ان مشروع يستخدم npm وفيه ملف package.json  ، اذا لم يكن لديك فنفذ هذا الأمر npm init بداخل مشروعك ثم نفذ الامر السابق لتنزيل gulp في مشروعك . 

ومن ثم ننشئ ملف اسمه gulpfile.js    لابد ان يكون بنفس الاسم 

 

وكذا يكون ثبتنا gulpjs ونستطيع استخدامه

وبعد ان تعرفنا على هذه الأداء وعن مكوناتها وكيفية تثبيته  – تبقى مثال عملي بواسطتها


المشكلة

شغال على مشروع ويب وعندي ملفات كثير css & javascript  وراح تعمل بطء في تحميل الصفحة لكثرتها وكبر حجمها ،

السيناريو التقليدي

كل مرة بارفع ملفاتي على الموقع او اختبره على جهازي راح اعمل ضغط وتقليل للحجم minify على كل ملف بنفسي وبعدها انسخ الملفات الى المجلد النهائي للمشروع .

الحل

اعمل سكربت يجهز لي الملفات من ضغط وتجميع للملفات بملف واحد ووضعه في المجلد النهائي للمشروع .

نفتح شاشة الاوامر cmd او terminal ونثبت الاضافات الخاصة بـ gulp

ملاحظة : gulp يحتوي على اضافات عديدة ولكل اضافة لها دور خاص بها .

 npm install --save-dev gulp-uglify pipe gulp-concat gulp-clean-css

تفاصيل عن الاضافات :
  1. gulp-uglify – تعمل لنا ضغط وتقليل حجم ملفات javascript
  2. gulp-clean-css – تعمل لنا ضغط وتقليل حجم لملفات css
  3. pipe – يتحكم بإنشاء واغلاق stream لكل ملف .
  4. gulp-concat – مأخوذة من concatenation – الا وهي تجميع الملفات في ملف واحد .

لننشيء ملفات javascript و css لتوضيح المثال ويكون تركيبة الملفات والمسارات مثل اللي بالصورة

 

 

 

 

 

 

 

 

 

نفتح ملف  gulpfile.js ونكتب الكود التالي ( نستدعي المكتبات اللازمة لمشروعنا)

var gulp = require('gulp');
var uglify  = require('gulp-uglify');
var cleanCss = require('gulp-clean-css');
var pipe = require('pipe');
var concat = require('gulp-concat');

الان نكتب كل مهمة لوحدها وباسم خاص بها – مثلا مهمة ضغط وتقليل حجم ملفات css – سوف يتم وضع الملفات في مجلد dest/style

gulp.task('minify-css',function(){
    gulp.src('./app/style/*.css')
    .pipe(cleanCss())
    .pipe(gulp.dest('./dest/style/'));
});

والمهمة الأخرى الخاصة بضغط وتقليل حجم ملفات javascript

gulp.task('minify-js',function(){
    gulp.src('./app/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./dest/js/'));
});

الان نحتاج ان ننفذ هذه المهام – عن طريق شاشة الاوامر terminal او cmd والدخول لمجلد المشروع وبنفس مسار ملف gulpfile.js نكتب هذا الامر

مبتدئاً بكلمة gulp واسم المهمة minify-css او minify-js ( بناء على تسميتك لها)

gulp minify-css

بعد تنفيذ الاوامر نكتشف انه تم انشاء مجلد خاص dest بالمخرجات والملفات التي تم تقليل حجمها سواء style او js

 

 

 

 

 

 

 

 

الان انتهينا من انشاء سكربت يقوم بالمهام الدورية بدلا عننا ، ولكن بقي تحسين بسيط ماذا لو تريد ان تجمع كافة الملفات بملف واحد  all.min.css او all.min.js

نستخدم مكتبة concat  ونعيد تنفيذ الاوامر مرة اخرى :

نستطيع كتابة امر التنفيذ لاكثر من مهمة مرة واحدة

gulp minify-css minify-js

الكود كاملا وباضافة concat

var gulp = require('gulp');
var uglify  = require('gulp-uglify');
var cleanCss = require('gulp-clean-css');
var pipe = require('pipe');
var concat = require('gulp-concat');

gulp.task('minify-css',function(){
    gulp.src('./app/style/*.css')
    .pipe(concat('all.min.css'))
    .pipe(cleanCss())
    .pipe(gulp.dest('./dest/style/'));
});
gulp.task('minify-js',function(){
    gulp.src('./app/js/*.js')
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('./dest/js/'));
});

صورة ملفات المشروع بعد تجميع الملفات بملف واحد

 

 

 

 

 

 

 

 


المصادر

الاضافات الخاصة بـ gulp

https://gulpjs.com/plugins/

رابط الموقع الرسمي للأداة

https://gulpjs.com/

رابط الاداة في موقع Github

https://github.com/gulpjs/gulp

 

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

Back To Top