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

لحسن الحظ ، يقوم Gulp.js بأتمتة هذه العمليات. توضح هذه المقالة تطبيقها في أتمتة مهام CSS المختلفة: تحسين الصور ، وتجميع SASS ، ومعالجة الأصول وضمها ، ويبدوم البائع التلقائي ، وإزالة محددات CSS غير المستخدمة ، و CSS Minification ، وتقارير حجم الملف ، وتوليد خريطة المصدر لـ DevTools ، وإعادة نقل المستعرض المباشر.

المزايا الرئيسية لاستخدام Gulp.js:

• الأتمتة: أتمتة المهام المتكررة مثل تحسين الصورة ، وتجميع Sass ، و CSS Minification.
• المرونة: يستخدم javaScript لتكوين المهمة ، مما يتيح تعديلًا سهلاً على أساس البيئة (التطوير/الإنتاج).
• القابلية للتوسع: يعزز العديد من المكونات الإضافية (على سبيل المثال ، gulp-imagemin ، gulp-sass ) للحصول على وظيفة محسّنة.
• Live Redazing: يتكامل مع Browsersync للتحديثات في الوقت الفعلي عبر متصفحات وأجهزة متعددة.
• إدارة المهام الفعالة: يتعامل مع المهام بشكل متسلسل أو بالتوازي لأوقات البناء المحسنة.

لماذا تختار Gulp؟

يوجد العديد من المتسابقين في المهام (Grunt ، WebPack ، Parcel ، NPM Scripts) ، لكن Gulp يبرز بسبب استقرارها وسرعة ودعم المكون الإضافي الواسع والتكوين القائم على JavaScript. يوفر هذا النهج القائم على الكود مزايا ، مما يتيح تعديل الإخراج الشرطي-على سبيل المثال ، إزالة sourcemaps أثناء النشر النهائي.

ابدء:

يستخدم هذا البرنامج التعليمي Gulp 4. تأكد من تثبيت Git و Node.js. استنساخ مشروع المثال من Github:

git clone https://github.com/craigbuckler/gulp4-css
cd gulp4-css
npm i gulp-cli -g
npm i
gulp

انتقل إلى

http: // localhost: 8000/ (أو عنوان URL الخارجي المعروض) في متصفحك.

بدلاً من ذلك ، قم بإنشاء مشروع جديد:

تثبيت node.js.
قم بتثبيت Gulp على مستوى العالم:
2. npm i gulp -cli -g
إنشاء مجلد مشروع (على سبيل المثال ،
3. My-Gulp-Project ).
تهيئة NPM:
4. npm init
إنشاء
5. src مجلدات فرعية لملفات المصدر (الصور ، SCSS).
قم بإنشاء مجلد
6. build للملفات المترجمة.
إنشاء ملف
7. index.html ملف للاختبار.

تثبيت الوحدة:

تثبيت الوحدات اللازمة:

npm i gulp gulp-imagemin gulp-newer gulp-noop gulp-postcss gulp-sass gulp-size gulp-sourcemaps postcss-assets autoprefixer cssnano usedcss browser-sync --save-dev

The ] gulpfile.js

يحدد المهام. يركز مثال مبسط على تحسين الصور ومعالجة CSS:

// gulpfile.js (مثال مبسط) const gulp = require ('gulp') ؛ const ImageMin = require ('gulp-imagemin') ؛ const sass = require ('gulp-sass') (تتطلب ('sass')) ؛ // ملاحظة: باستخدام Dart-Sass const postcss = يتطلب ('gulp-postcss') ؛ const autoprefixer = مطلوب ('autoprefixer') ؛ const cssnano = مطلوب ('cssnano') ؛ // مهمة الصورة صور وظيفة () { إرجاع Gulp.SRC ('src/images/*') .pipe (ImageMin ()) .pipe (gulp.dest ('Build/Images')) ؛ } // مهمة CSS وظيفة CSS () { إرجاع Gulp.SRC ('SRC/SCSS/Main.SCSS') .pipe (sass (). on ('error' ، sass.logerror)) .pipe (postcss ([autoprefixer () ، cssnano ()])))) .pipe (gulp.dest ('build/css')) ؛ } التصدير. orports.css = css ؛ orports.default = gulp.paralled (الصور ، css) ؛ // قم بتشغيل المهام بالتوازي

// gulpfile.js (Simplified Example)

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const sass = require('gulp-sass')(require('sass')); //Note: using dart-sass
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

// Image task
function images() {
  return gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('build/images'));
}

// CSS task
function css() {
  return gulp.src('src/scss/main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(gulp.dest('build/css'));
}

exports.images = images;
exports.css = css;
exports.default = gulp.parallel(images, css); // Run tasks in parallel

ارجع إلى النص الأصلي للحصول على مثال كامل.

تذكر تكييف مسارات الملفات لمطابقة بنية المشروع. قم بتشغيل Gulp

في محطةك لتنفيذ المهام. تتوفر التفسيرات الكاملة والمفصلة

gulpfile.js ومزيد من التفسيرات في المقالة الأصلية.