حل مشكلة حذف ملفات JavaScript القديمة بشكل تلقائي في مشاريع Angular 2 باستخدام Gulp

في إطار مشروع Angular 2، يظهر أحيانًا تحتاج إلى تغيير أسماء ملفات TypeScript وإجراء تعديلات على الهيكل الذي يحتوي على ملفات JavaScript المترجمة. واجهتك الآن مشكلة تتعلق بالملفات القديمة التي لا تزال في دليل “js/” بعد إعادة تسمية ملف TypeScript. يمكنك حل هذه المشكلة عبر تكوين مهمة Gulp لحذف الملفات القديمة بشكل تلقائي.

قبل الشروع في إنشاء مهمة Gulp، يجب عليك تحديد الملفات التي تحتاج إلى الحذف. يبدو أن الأسلوب الأمثل هنا هو البحث عن الملفات في الدليل “js/” التي ليس لها نظير في الدليل “source/”.

أولاً وقبل كل شيء، يمكنك تثبيت حزمة “del” باستخدام npm:

bashCopy code
npm install del --save-dev

ثم يمكنك تعديل ملف gulpfile.js الخاص بك على النحو التالي:

javascriptCopy code
const gulp = require('gulp');
const ts = require('gulp-typescript');
const del = require('del');

const tsProject = ts.createProject('tsconfig.json');

// مهمة لترجمة ملفات TypeScript
gulp.task('compile-ts', () => {
    const tsResult = gulp.src('source/**/*.ts')
        .pipe(tsProject());
        
    return tsResult.js.pipe(gulp.dest('js'));
});

// مهمة لحذف الملفات القديمة بعد الترجمة
gulp.task('clean-js', () => {
    const oldJsFiles = 'js/**/*.js';
    const sourceTsFiles = 'source/**/*.ts';

    return del([oldJsFiles, `!js/**/${sourceTsFiles}`]);
});

// مهمة تجميع كل الأعمال
gulp.task('build', gulp.series('compile-ts', 'clean-js'));

// مهمة لمراقبة التغييرات وتنفيذ المهمات بشكل تلقائي
gulp.task('watch', () => {
    gulp.watch('source/**/*.ts', gulp.series('build'));
});

// مهمة افتراضية تنفذ كل المهام
gulp.task('default', gulp.series('build', 'watch'));

بعد تكوين المهمة ‘clean-js’، يمكنك تشغيلها بشكل منفصل باستخدام:

bashCopy code
gulp clean-js

أو يمكنك تضمينها في مهمة أكبر مثل ‘build’ كما هو موضح في المثال أعلاه. بمجرد تشغيل ‘gulp build’، ستتم عملية ترجمة الملفات الجديدة وحذف الملفات القديمة بشكل تلقائي.

في سياق مشروع Angular 2 الذي تعمل عليه، يُستخدم TypeScript لتطوير التطبيق. TypeScript هو لغة برمجة تُضاف إلى JavaScript لتوفير نظام نوع قوي ومزايا أخرى تساعد في تطوير تطبيقات أكثر صلابة وسهولة صيانة.

ملف tsconfig.json:
قد تحتاج أيضًا إلى إعادة النظر في ملف tsconfig.json الخاص بك لضبط إعدادات TypeScript الخاصة بك. يمكن أن تؤثر الخيارات مثل "outDir" على مكان حفظ الملفات المترجمة. قم بالتحقق من أن هذه الإعدادات تتوافق مع بنية مشروعك.

استخدام npm scripts:
بدلاً من Gulp، يمكنك أيضًا استخدام npm scripts لتحقيق نفس الغرض. قد تكون هذه بعض الخطوات التي يمكنك إضافتها إلى ملف package.json الخاص بك:

jsonCopy code
"scripts": {
  "compile": "tsc",
  "clean-js": "del js/**/*.js && del !js/source/**/*.ts",
  "build": "npm run compile && npm run clean-js",
  "watch": "tsc -w"
}

ثم يمكنك تشغيل هذه الأوامر باستخدام:

bashCopy code
npm run compile
npm run clean-js
npm run build
npm run watch

توثيق Angular:
لا تنسى الاطلاع على توثيق Angular، حيث يقدم مصدرًا غنيًا بالمعلومات والأمثلة التي يمكن أن تساعدك في فهم أفضل لكيفية بناء تطبيق Angular بشكل أفضل وفعال.

باختصار، يتطلب إدارة الأسماء المتغيرة وحذف الملفات القديمة العمل بشكل فعّال من خلال تكامل عمليات TypeScript مع Gulp أو npm scripts، وضبط إعدادات البنية الخاصة بمشروع Angular الخاص بك لضمان تلبية احتياجات التطوير الخاصة بك.