✔ مشروع بداية بسيط يتيح تسليم المشاريع بشكل أسرع و/أو:
- النشر التلقائي لصفحات جيثب
- نشر الإصدار إلى جيثب
يوفر هذا مشروعًا مثالًا يقوم بأتمتة المهام مع Gulp بما في ذلك:
يحتوي هذا المشروع على بعض الطلبات التي تحتاج إلى مواجهتها من أجل تجميعها.
من أجل البدء في استخدام المشروع ، تحتاج إلى استنساخه إلى جهاز الكمبيوتر الخاص بك باستخدام أمر GIT ، استبدل [your-project] باسم مشروعك:
git clone https://github.com/adorade/startit.git [your-project]انتقل إلى المجلد:
cd [your-project]تثبيت التبعيات:
yarn install لاحظ أنه تم إصلاح إصدارات الوحدة النمطية لضمان التوافق. قم بتشغيل yarn outdated وتحديث package.json حسب الضرورة.
للبدء في استخدامه ، فإن الشيء الوحيد الذي عليك القيام به هو فتح المشروع على محرر الرمز الذي تم اختياره والرمز. لتجميع ومعاينة المعاينة جميع التغييرات الخاصة بك لديك بعض الأوامر التي ستساعدك. فيما يلي قائمة الأوامر التي يجب أن تعرفها.
يجب تنفيذ كل أمر على الدليل الجذر للمشروع باستخدام أمر Gulp مثل gulp cleaner أو gulp build :
| مهمة | وصف |
|---|---|
| أنظف | قم بإزالة جميع الملفات المترجمة |
| لينتر | أنماط الوبر والبرامج النصية وملفات الصلصال |
| أنماط | تجميع أساليب Sass |
| البرامج النصية | تجميع ملفات JavaScript |
| الخطوط | نسخ الخطوط |
| الإحصائيات | نسخ الملفات الثابتة |
| الصور | تحسين الصور |
| الصفحات | تجميع قوالب الصلصال |
| يخدم | ابدأ الخادم وشاهد أي تغييرات |
| يبني | بناء المشروع |
| ديف | تجميع ومشاهدة التغييرات |
| نشر | نشر الملفات على صفحات github |
| يطلق | نشر الإصدار إلى جيثب |
| تقصير | مهمة Gulp الافتراضية |
| الشيكات | تحقق من تكوين Gulp |
| يساعد | طباعة رسالة المساعدة |
Run gulp --tasks لمشاهدة جميع مهام Gulp المتاحة.
إذا كنت قيد التطوير ، فإن أمر gulp dev هو الخيار الأفضل لك. انتقل إلى مجلد المشروع في وحدة التحكم وتنفيذ gulp dev ، وسيقوم بتجميع المشروع وبدء خادم سيتم تحديثه في كل مرة تقوم فيها بتغيير شيء ما في الكود.
سوف يراقب Gulp للتغييرات وسيخبرك بكيفية الوصول إلى المشروع من عنوان URL المحلي والعامة.
كل متصفح يشير إلى عنوان URL سيتم تحديثه تلقائيًا. كميزة إضافية لاختبار الغرض ، سيتم انعكاس أي تفاعل على متصفح واحد على أي آخر. جربه على الهاتف والكمبيوتر اللوحي والكمبيوتر في نفس الوقت.
المشروع لديه بنية بسيطة ومرنة للغاية. إذا كان هناك حاجة إلى نقل المكان الافتراضي لأي ملف أو دليل ، فتأكد من التحديث إلى الموضع الجديد على ملف tool/util/config.js .
├── dist - > All the compiled files will be placed here (Production)
├── logs - > Logs files
├── src - > Source files for the project
│ ├── es6 - > Scripts
│ ├── fonts - > Fonts
│ ├── images - > Images
│ ├── scss - > Sass
│ ├── static - > Favicons...
│ ├── vendors - > Vendors folder for all the dependencies
│ └── views - > Templates directory for Pug files
├── test - > Tests Files
├── tmp - > All the compiled files will be placed here (Development)
├── tools - > Project tools and configuration
│ ├── build - > files for build
│ ├── tasks - > tasks files for gulp
│ └── util - > config and options for project
├── package.json - > NodeJS configuration file
├── gulpfile.esm.js - > Gulp tasks
├── README.md - > README
└── ... config files for packages سيتم توليد جميع الملفات في مجلدات dist و tmp تلقائيًا بواسطة المهام المختلفة عندما يجمع المشروع. تأكد من عدم تعديل أي ملف يدويًا في هذه المجلدات لأنه سيتم استبدال التغييرات في عملية التجميع.
يحتوي هذا المشروع على بعض خيارات التكوين اللطيفة لتلبية كل ما تحتاجه. لتكوين ، تحتاج إلى تحرير الملفات التالية وتغيير أي قيمة تحتاجها:
tool/util/banner.js - لافتة للبرامج النصية وملفات الأنماطtool/util/config.js - تكوين المشروعtool/util/options.js - خيارات الإضافات بعد كل تغيير قمت به ، تحقق من gulp checks إذا كان كل شيء في حالة جيدة وليس هناك أخطاء.
يتم وصف كل جانب من جوانب هذا التكوين في الملف بحيث تعرف الخيارات.
قم بالتشغيل في وضع التطوير المباشر:
yarn run start
# or
gulp
# or
gulp dev انتقل إلى http://localhost:1234/ أو عنوان URL External إذا وصل من جهاز آخر.
ابحث عن قائمة كاملة بالمهام:
gulp -T
# or
gulp -T --tasks-depth 0 قم بتعيين NODE_ENV إلى production بحيث تنتج مهام Gulp رمزًا نهائيًا ، أي ملفات Minify ، وتعطيل توليد Sourcemap.
yarn run build
# or
gulp build --production اضبط NODE_ENV على production يدويًا اعتمادًا على نظام التشغيل الخاص بك:
Linux/Mac OS:
NODE_ENV=production
gulp build (أو inline NODE_ENV=production gulp build )
Windows PowerShell:
$ env: NODE_ENV = " production "
gulp buildسطر الأوامر Windows Legacy:
set NODE_ENV = production
gulp build لنشر مشروعك تلقائيًا على صفحات github وجعله متاحًا على https://[your-username].github.io/[your-project-name] استخدم:
yarn run deploy
# or
gulp build --production && gulp deployلنشر الإصدار لاستخدام جيثب:
yarn run release
# or
gulp releaseهذا المشروع مرخص بموجب ترخيص معهد ماساتشوستس للتكنولوجيا