كيفية أتمتة المهام في رمز الاستوديو البصري

يمكن أن يوفر لك استخدام أداة إنشاء مثل Grunt أو Gulp الكثير من وقت التطوير أتمتة عدد قليل من المتكررة “مهام”. إذا اخترت Visual Studio Code كمحرر كود خاص بك ، فقد يكون سير عملك أكثر بساطة ، وفي نهاية المطاف ، يكون أكثر إنتاجية.

تم تصميم Visual Studio Code مع Node.js في جوهره تشغيل المهام دون الحاجة إلى مغادرة نافذة المحرر. وسنوضح لك كيفية القيام بذلك في هذا المنشور.

هيا نبدأ.

الشروط المسبقة

بادئ ذي بدء ، ستحتاج إلى تثبيت Node و NPM (Node Package Manager) و CLI (واجهة سطر الأوامر) الخاصة بأداة البناء المعنية كلها في نظامك. إذا لم تكن متأكدًا مما إذا كنت قد قمت بتثبيت كل هذه الأشياء ، فإن التحقق من ذلك سيكون سهلاً مثل كتابة سطور الأوامر.

سأفترض أيضًا أن الملفات والأدلة في مشروعك في مكانها الصحيح ، بما في ذلك التكوين الملف ، مثل gulpfile.js أو Gruntfile.js إذا كنت تستخدم Grunt بدلاً من ذلك. وتبعيات المشروع مسجلة في package.json يجب أيضا أن تكون مثبتة في هذه المرحلة.

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

. ├── css │ ├── sass ├── gulpfile.js ├── index.html ├── js │ ├── src ├── node_modules └── package.json

نحن نستخدم Gulp كأداة بناء في مشروعنا. لدينا عدد من المهام المسجلة في gulpfile.js على النحو التالي:

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

هناك على وجه التحديد أربع مهام حددناها:

• مخطوطات: المهمة التي ستقوم بتجميع ملفات JavaScript الخاصة بنا وكذلك تصغير الإخراج من خلال البرنامج الإضافي Gulp UglifyJS.
• الأنماط: المهمة التي ستقوم بتجميع ملفات SCSS الخاصة بنا إلى CSS وكذلك ضغط الإخراج.
• أتمتة: المهمة التي سوف أتمتة الأنماط و مخطوطات مهمة على الرغم من بلع المدمج في راقب خدمة.
• الافتراضي: المهمة التي ستقوم بتشغيل المهام الثلاثة المذكورة أعلاه معًا في وقت واحد.

نظرًا لأن أداة الإنشاء في مشروعنا مُعدَّة بالكامل ، يمكننا الآن أيضًا المضي قدمًا لأتمتة هذه المهام التي حددناها داخل gulpfile.js.

ومع ذلك ، إذا لم تكن معتادًا على استخدام أي من الأدوات المذكورة ، فإنني أوصيك بشدة بالنظر في عدد قليل من منشوراتنا السابقة لنقلك إلى الموضوع قبل المتابعة.

• كيفية استخدام النخر لأتمتة سير العمل الخاص بك
• الابتداء مع Gulp.js
• معركة مخطوطات البناء: Gulp vs Grunt

تشغيل وأتمتة المهام

تشغيل وأتمتة “مهام” في Visual Studio Code واضحة ومباشرة. أولا ، إطلاق لوحة القيادة بالضغط على تركيبة المفاتيح Shift + Cmd + P أو من خلال شريط القوائم, عرض> لوحة القيادة إذا كان هذا هو أكثر ملاءمة لك. ثم اكتب مهام, وحدد “المهام: تشغيل المهمة” من عدد قليل من الخيارات المعروضة في النتيجة.

مرئي ستوديو كود ذكي. يعرف أننا نستخدم Gulp ، التقط gulpfile.js, وكشف قائمة المهام التي حددناها داخل الملف.

هنا ، دعنا نختار الافتراضي مهمة. سيتم تجميع أوراق أنماط SCSS وملف JavaScripts عند تحديد هذه المهمة ، كما سيتم تشغيل الملف أتمتة المهمة التي سوف تسمح لل الأنماط و مخطوطات مهمة لتشغيل بشكل مستقل المضي قدما.

عند تغيير ملف - ورقة أنماط أو ملف JavaScript - سيتم تجميعه تلقائيًا. ينشئ Visual Studio Code أيضًا تقارير في الوقت المناسب لكل نجاح والأخطاء التي تحدث في عملية الإنشاء.

التداخل العميق

علاوة على ذلك ، يمكننا دمج مشروعنا في Visual Studio Code لتبسيط سير العمل لدينا. ودمج مهامنا في Visual Studio Code سهل وسريع.

قم بتشغيل لوحة القيادة وحدد “تكوين عداء المهام”. سيعطيك Visual Studio Code قائمة بأداة البناء التي يدعمها. في هذه الحالة ، نختار “بلع”, لأن هذا هو الذي نستخدمه في مشروعنا في هذه المقالة.

يجب أن يكون Visual Studio Code قد أنشأ ملفًا جديدًا باسم tasks.json تحت .vscode في دليل المشروع الخاص بك. tasks.json, في هذه المرحلة ، يحتوي على التكوين العاري.

وكما ترون أدناه ، فإن مهام خاصية في الوقت الحالي مجرد مجموعة فارغة.

"version": "0.1.0"، "command": "gulp"، "isShellCommand": true، "args": ["- no-color"]، "مهام": []

تمديد مهام القيمة على النحو التالي.

"version": "0.1.0"، "command": "gulp"، "isShellCommand": true، "args": ["- no-colour"]، "مهام": ["taskName": " الافتراضي "،" isBuildCommand ": true ،]

ال اسم المهمة يحدد اسم المهمة في موقعنا gulpfile.js التي نود تشغيلها. ال isBuildCommand تحدد الملكية الافتراضي القيادة كما “بناء” أمر. الآن ، بدلاً من الالتفاف على لوحة القيادة ، يمكنك ببساطة الضغط على مجموعة المفاتيح Shift + Cmd + B.

بالتناوب يمكنك اختيار “تشغيل بناء المهمة” نتائج بحث المهام في لوحة القيادة.

تغليف

أعتقد أن Visual Studio Code هو محرر رمز بمستقبل رائع. إنه سريع ومُصمم مع بعض الميزات المفيدة خارج الصندوق ، بما في ذلك الميزات التي أظهرناها في هذه المقالة.

لقد رأينا كيفية تشغيل مهمة من Gulp. يمكنك أيضًا استخدام Grunt بدلاً من ذلك. لقد رأينا كيفية دمج المهمة في Visual Studio Code وتشغيلها مع مجموعة من المفاتيح ، مما يجعل سير العمل لدينا أكثر انسيابية.

نأمل أن تجد هذه المقالة مفيدة كمرجع لتشغيل مهام الإنشاء ، ولا تنسَ مراجعة مقالاتنا السابقة للحصول على مزيد من النصائح لتحقيق أقصى استفادة من Visual Studio Code.

• مرئي ستوديو كود: 5 ميزات رهيبة التي تجعل من الصدارة
• كيفية تخصيص رمز مرئي ستوديو
• 8 ملحقات قوية في Visual Studio Code لمطوري الواجهة الأمامية
• Visual Studio Code: زيادة الإنتاجية عن طريق إدارة ربط المفاتيح
• تأثير تصميم Microsoft الشامل في التعليمات البرمجية Visual Studio