كيفية تخصيص Bootstrap v4 باستخدام حزم العقدة

لقد سئلت مؤخرًا عما إذا كان بإمكاني المساعدة في تطوير سمة WordPress لمواقع تشفير العملات. كانوا يبنونها باستخدام Bootstrap v4 ، لذلك كان لدي بالفعل الكثير من الأفكار حول كيفية إنشاء كل صفحة. عندما انضممت إلى repb bitbucket ، أدهشني أن أرى أنه لم يكن لديهم إعداد للأدوات. كُلّ الأنماط كُتبتْ بالفانيليا css ... لم تفعل ذلك منذ فترة. لقد كان Scss هو ذهابي إلى آخر 3 سنوات ، لذلك قررت تغيير طريقة عملنا.

ماذا أحتاج

كل هذه الأدوات (علاج Unbox)

كنت بحاجة لهذا المشروع لضمان جودة الكود وسهولة التطوير من خلال كتابة css غير مسبوقة والاستفادة من كل شيء من وظائف Sassy و mixin والمتغير الذي يتضمنه Bootstrap. لم يكن تجميع جافا سكريبت مصدر قلق رئيسي في الوقت الحالي ، لذا فقد كان ذلك لوقت آخر.
بالنظر إلى مستودع Bootstrap ، قررت استخدام هذه الأدوات.

  • عقدة ساس لتجميع scss / ساس إلى المغلق
  • الاصلاح التلقائي لإضافة بادئات عند الحاجة
  • postcss لاستخدام في الواقع autoprefixer
  • stylelint للتحقق من رمز الأخطاء
  • تنظيف المغلق لإنشاء إصدارات مصغرة

استكشاف الاحتمالات

بدأت أبحث في ملف Bootstrap Github repo وأكتشف كيف يقومون بإنشاء ملفات التوزيع والمستندات. بعد ذلك صادفت مقطع فيديو استخدم فيه شخص ما لمشاهدة ملفات scss والبناء على كل تغيير. حاولت في كلا الاتجاهين وهنا ما اكتشفته.

NPM / غزل

يستخدم مشروع Bootstrap البرامج النصية وحزم npm لتجميع كل شيء وإعداد خادم محلي عبر jekyll. بالنسبة لهذا المشروع ، كنت مهتمًا فقط بتجميع scss إلى css. أنا أفضل أيضًا Yarn على NPM ولكن هذا هو التفضيل الشخصي فقط ، فهم يعملون بنفس الطريقة. لقد كان الإعداد سهلًا للغاية (على الرغم من أن جميع عمليات تشغيل npm لم تفعل ذلك من أجلي) وقد تدعم كل ما أحتاج إليه.

بلع

Gulp هو وسيلة سريعة حقا لإنشاء خطوط أنابيب البناء. يعتمد على جافا سكريبت تمامًا ، وهذا يعني أنه يمكنك إعداد خط أنابيب باستخدام جافا سكريبت فقط. اعتقدت أنه كان رائعًا وأظهر الفيديو أنه سريع جدًا. عندما بدأت في إنشاء خط الأنابيب الخاص بي ، لم أستطع معرفة كيفية دمج مادة الطباعة في خط الأنابيب ، لذلك اخترت استخدام البرنامج النصي NPM لهذا المشروع.
إذا كنت تعرف كيف ، من فضلك قل لي.

أستخدم WebStorm من IntelliJ ، وهي بيئة تطوير متكاملة قوية حقًا وأحبها وسرعان ما زاد من سرعتي في التطوير. لا تحتاج إلى IDE لمتابعة ، يمكنك التعامل مع سطر الأوامر والمفكرة ، لن تنصح بذلك على الرغم من ...

هيا بنا نبدأ

لذلك قررنا الآن الأدوات التي يجب استخدامها وكيفية تشغيلها ، يمكننا البدء في المشروع.
إذا لم تستخدم حزم العقدة مطلقًا ، فيمكنك اتباع أدلة الإعداد الخاصة بـ Yarn أو NPM. أنت بحاجة إلى إحدى هذه الأدوات لمتابعة هذه المقالة. ستحتاج أيضًا إلى فهم أساسي لسطر الأوامر. يحتوي برنامج Codecademy على دورة جيدة جدًا لقد اتبعتها أيضًا.
الآن بعد أن حصلت على جميع الأدوات والمعرفة المطلوبة ، فلنبدأ.

بدء مشروع

افتح أداة سطر الأوامر وانتقل إلى الدليل الذي تريد العمل فيه ، وقم بإنشاء دليل جديد وانتقل إلى هذا الدليل. سيبدو شيء مثل:

مشاريع مؤتمر نزع السلاح
$ mkdir bootstrap-setup
$ cd bootstrap-setup

إذا كنت ترغب في استخدام git ، يمكنك البدء مع git init واستخدام جميع الأوامر عند الضرورة.
الآن يمكننا إعداد مشروعنا باستخدام الأمر init. عند تشغيل غزل init أو npm init ، سيبدأ مدير الحزم في إعداد الملفات المطلوبة وسيطرح عليك بعض الأسئلة:

الاسم: اسم المشروع
الإصدار: (0.0.0) 0.0.1
الوصف: وصف المشروع
نقطة الدخول: // ملف مثل index.html أو فقط "."
اختبار القيادة: // اتركه فارغا
بوابة المخزون: // عنوان URL للمستودعات إذا كان لديك أي
الكلمات الرئيسية: // اتركها فارغة (NPM فقط)
المؤلف: // اسمك
الرخصة: N / A

سيتم استخدام هذه الإجابات لبناء package.json. يشبه هذا الملف تكوين المشروع الخاص بك ، فهو يشتمل على جميع المعلومات الأساسية والحزمة المستخدمة في أي بيئة. سوف محتويات package.json تبدو وكأنها شيء من هذا القبيل.

{
  "name": "bootstrap-setup" ،
  "الإصدار": "1.0.0" ،
  "الوصف": "إعداد الأدوات مثل bootstrap" ،
  "الأساسية": "."،
  "المؤلف": "جيجس بوديوس" ،
  "الترخيص": "MIT"
}

الآن يمكننا البدء في تثبيت الحزم وتشغيل البرامج النصية.

تثبيت الحزم

هذا هو الجزء الأسهل ، إنه مجرد تثبيت جميع الحزم. لا يحتاج مشروعي إلى تضمين أي حزمة في إصدار الإصدار ، مما يعني أنني بحاجة فقط إلى تبعيات لبيئة التطوير الخاصة بي. لإضافة حزم كـ devDependencies ، يمكنك استخدام ما يسمى علامة: -D.
لتثبيت الحزم مع NPM تقوم بتشغيل:

npm تثبيت <اسم الحزمة> -D

إذا كنت تستخدم الغزل ، مثلي ، فأنت تقوم بتشغيل:

إضافة الغزل <اسم الحزمة> -D

لقد بدأت من خلال تثبيت / إضافة عقدة ساس عن طريق تشغيل الغزل إضافة عقدة ساس- د. سيؤدي هذا إلى تثبيت حمولة بعقب من node_modules ولأنها الحزمة الأولى ، ستقوم بإنشاء ملف package.lock ، وتجاهله ، وليس مهمًا.

إذا كنت لا تريد متابعة تثبيت كل حزمة على حدة ، يمكنك تشغيل هذه الأوامر.

غزل

الغزل إضافة العقدة autoprefixer تنظيف css-cli autocre-cli stylelint stylelint-scss stylelint-order

الآلية الوقائية الوطنية

تثبيت npm nod-sass clean-css-cli autoprefixer postcss-cli stylelint stylelint-scss stelelint-order

الآن وبعد أن أصبح لدينا جميع الحزم التي نحتاجها ، يجب علينا تهيئة بعض الأشياء.

تكوين الأدوات

تصوير أودوم برافات على أونسبلاش

لإبقائه منظمًا بشكل جيد ، أنشئ دليلًا مثل build أو configs للاحتفاظ بجميع ملفات config.

Stylelint

للتأكد من أنك و / أو تقوم أنت والمطورين المشاركين بكتابة تعليمات برمجية نظيفة ومتسقة ، فإننا نستخدم linter لتصفية الأخطاء وعرضها على أخطاء الحمار. Stylelint هي الحزمة التي يستخدمها Bootstrap لتكوينها الخاص ، كما هو الحال مع كل حزمة أخرى قمنا بتثبيتها للتو. في دليل الإنشاء ، أضف ملفًا باسم .stylelintrc وانسخ المحتويات من الملف المسمى بالتساوي في ملف إعادة التمهيد Bootstrap.

كل هذه القواعد حددت ما هو مسموح وما الذي سوف يلقي خطأ. على سبيل المثال ، "max-blank-lines": 2 ستلقي خطأ إذا كان لديك 4 خطوط فارغة بين سطرين من التعليمات البرمجية.

Postcss

Postcss مطلوب لتشغيل autopefixer الذي سيضيف بادئات البائع عند الضرورة ، اعتمادًا على التكوين الذي تحدده.

لتحديد المتصفحات التي تريد دعمها ، يمكنك إضافة صفيف إلى الحزمة. ملف json الذي يحدد إصدارًا مثل هذا:

"قائمة المتصفحات": [
    "آخر إصدار رئيسي واحد" ،
    "> = 1٪" ،
    "Chrome> = 45" ،
    "Firefox> = 38" ،
    "الحافة> = 12" ،
    "Explorer> = 10" ،
    "iOS> = 9" ،
    "Safari> = 9" ،
    "Android> = 4.4" ،
    "أوبرا> = 30"
]،

هذه هي المتصفحات المدعومة الافتراضية من قبل Bootstrap.

لتتمكن من إضافة بادئات عند الحاجة ، يلزمك إنشاء ملف postcss.config.js ولصقه في:

"استخدام صارم"
module.exports = (ctx) => ({
    الخريطة: ctx.file.dirname.includes ('أمثلة')؟ خاطئة : {
        مضمنة: خطأ ،
        الشرح: صحيح ،
        sourcesContent: صحيح
    }،
    الإضافات: {
        الاصلاح التلقائي: {cascade: false}
    }
})

الآن يتم تكوين الأدوات ويمكننا تشغيل بعض البرامج النصية ... لكن أولاً نحتاج إلى بعض ملفات scss. أسهل طريقة ، ببساطة إضافة دليل لملفات scss وإنشاء ملف main.scss. في هذا الملف ، قم باستيراد ملفات مصدر bootstrap من node_modules:

import "../../node_modules/bootstrap/scss/bootstrap"؛

الآن لدينا شيء لتجميع ويمكننا البدء في كتابة البرامج النصية.

تحديد البرامج النصية

الصورة من قبل ماركوس Spiske على Unsplash

بداخلك package.json ، يمكنك إضافة قسم يمكنك من خلاله تحديد البرامج النصية ليتم تشغيلها داخل سطر الأوامر. يعد هذا ملائمًا جدًا حيث يمكنك تجميع العديد من البرامج النصية التي يمكنك تشغيلها بشكل منفصل في أمر واحد بسيط.
في مشروعي قمت بتعريف هذه النصوص:

  • المغلق: الوبر (لاختبار scss لدينا مع تكوين stylelint)
  • المغلق: ترجمة (لتجميع scss لدينا في ملفات المغلق)
  • css: بادئة (لإضافة بادئات عبر autoprefixer)
  • المغلق: تصغير (لإنشاء ملفات مصغرة)
  • css: watch (لبدء مشاهدة التغييرات في scss dir)
  • css (لتشغيل css: lint ، css: compile ، css: بادئة و css: تصغير الكل معًا)

لقد قمت بالفعل بنسخ معظم القواعد من حزمة Bootstrap’s.

افتح package.json الخاص بك وإضافة صفيف لوضع البرامج النصية الخاصة بك فيها. يمكنك البرامج النصية مثل هذا:

"نصوص": {
  "[script-name]": "[النصي لتشغيل سطر الأوامر]" ،
}

المغلق: الوبر

سيتم تشغيل هذا الأمر stylelint مع التكوين الذي حددناه مسبقًا. إذا لم يكن أي شيء وفقًا للقواعد ، فسيتم إرجاع ذلك بدقة في سطر الأوامر. البرنامج النصي يشبه هذا.

stylelint - تكوين البنية /.

بشكل أساسي: قم بتشغيل stylelint ، استخدم القواعد من التكوين الخاص بنا ، الكود الذي سنقوم بإدخاله هو scss ، انتقل من خلال كل ملف scss في scss dir والدلائل الفرعية وقم بالتخزين المؤقت للنتائج إلى dir build الخاص بنا. أضفت التخزين المؤقت لتسريع المراقب الذي سننشئه في دقيقة واحدة.

المغلق: تجميع

الآن لدينا رمز نظيف ، نحتاج إلى تحويله إلى رمز قابل للاستخدام. Node-sass هو معالج مسبق node.js sass / scss من شأنه أن يجمع ملفاتك إلى CSS قابلة للاستخدام.

node-sass - موسع - نمط الإخراج - خريطة المصدر صحيح - مصدر الخريطة - صحيح - الدقة 6 scss / main.scss style.css

بشكل أساسي: قم بإخراج css في الوضع الموسع ، وقم بإنشاء خرائط مصدر لسهولة تصحيح الأخطاء ، والسماح بـ 6 أرقام عشرية ، واستخدام scss / main.scss وإخراجها كـ style.css. قراءة سهلة :).

المغلق: بادئة

لدينا صالحة للاستعمال! جيد في أحدث المتصفحات ، للأسف لا نزال بحاجة إلى بادئات البائعين. الاصلاح التلقائي للانقاذ! يمكننا تشغيله كجزء من postcss لأنه في الواقع ملحق له. لذلك النصي:

postcss - تكوين البنية / postcss.config.js - استبدال \ "*. css \" \ "! *. min.css \"

بشكل أساسي: قم بتشغيل postcss ، استخدم التكوين الخاص بنا واستخدم جميع ملفات .css ، ولكن ليس ملفات .min.css وسبقه إذا لزم الأمر بناءً على قائمة المتصفح الخاصة بنا.

المغلق: صغر

نحن جميعا مع مجموعة المغلق والبادئات قابلة للاستخدام لجميع المتصفح الذي نحتاج إلى دعم. يمكن أن تتوقف عند هذا الحد ، لكن الخطوة الأخيرة الجيدة هي تصغير ملفاتك لتقليل حجم الملف. إليك الطريقة:

cleancss - المستوى الأول - خريطة المصدر - source-map-inline-sources - output style.min.css style.css

بشكل أساسي: قم بتشغيل عمليات التنظيف ، ومستوى التنظيف لتنفيذ عملية التنظيف ، قم بإنشاء خريطة مصدر للملف المصغر ، و style.min.css الإخراج من style.css.

المغلق

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

yarn css: lint && yarn css: ترجمة && yarn css: بادئة && yarn css: تصغير
لتشغيل هذه مع NPM تحتاج إلى استبدال الغزل مع تشغيل npm. وإلا فإنها لن تعمل.

بشكل أساسي: قم بتشغيل جميع النصوص أعلاه بالترتيب. إذا كنت تستخدم npm: استبدل الغزل باستخدام npm. (هذا هو المكان الذي يأتي فيه تشغيل npm-all)

المغلق: ساعة

كل شيء يعمل الآن ويمكن تنفيذه مع أمر واحد ، رائع!

آسف ، كان للقيام بذلك. (https://i.ytimg.com/vi/-Rt05oUmt5E/maxresdefault.jpg)

يمكننا إعداد مراقب لتشغيل البرنامج النصي المغلق في كل مرة يتم فيها تغيير / حفظ ملف scss. في حالة تشغيل هذا البرنامج النصي ، يمكنك حفظ الملف الخاص بك ، قم بتحديث المتصفح الخاص بك وسترى تغييراتك. لذلك دون مزيد من اللغط:

مشاهدة "غزل المغلق"

بعد كل هذا ، يجب أن تبدو مجموعة النصوص البرمجية الخاصة بك كما يلي:

"نصوص": {
  "css: lint": "stylelint - تكوين البنية /.
  "css: prefix": "postcss - build / postcss.config.js - استبدال \" *. css \ "\"! *. min.css \ ""،
  "css: compile": "node-sass - موسع نمط الإخراج - مخطط المصدر true - مخطط مصدر المحتويات true - الدقة 6 scss / main.scss style.css"،
  "css: minify": "cleancss - المستوى الأول - خريطة المصدر - source-map-inline-sources - output style.min.css style.css"،
  "css": "yarn css: lint && yarn css: compile && yarn css: prefix && yarn css: minify"،
  "css: watch": "watch" yarn css 'scss "
}

تشغيل البرامج النصية

الآن وبعد أن أصبح كل شيء يعمل ، يمكننا المضي قدمًا والبدء في تخصيص bootstrap وإنشاء موضوعنا. افتح الملف main.scss واستبدل محتواه بـ:

// $ primary: # fe39ed؛

import "../node_modules/bootstrap/scss/bootstrap"؛

قم ببدء مراقب الشاشة باستخدام yarn css: راقب وراقب سطر الأوامر. يجب أن تحصل على الإخراج التالي:

تشغيل الغزل v1.3.2
مشاهدة $ 'غزل المغلق' scss
> مشاهدة scss
$ yarn css: lint && yarn css: ترجمة && yarn css: بادئة && yarn css: تصغير
stylelint $ - تكوين البنية /.
SCSS / main.scss
 3:51 ✖ سطر جديد غير متوقع لنهاية المصدر بلا سطر مفقود في نهاية المصدر

يبدو لدينا خطأ وفقا لل stylelint. ألق نظرة على السطر 3 من main.scss. تحدد قواعدنا أننا لسنا سطرًا فارغًا باعتباره السطر الأخير من كل ملف. المضي قدما وإضافة سطر فارغ إلى الملف وحفظه. من المفترض أن ترى بعض الإجراءات في سطر الأوامر ، ولا ينبغي لها أن ترمي أي أخطاء وترمز + بادئة + بادئة + تصغير بدون مشكلة.

الآن لتراها قيد التنفيذ: قم بإنشاء ملف index.html في جذر مشروعك. افتح الملف في المتصفح. أضف الآن ما يلي إلى محتوى الملف:



    <رئيس>
        
        
        
         إعداد بناء Bootstrap 

        
        
    
    
        
            
                
                    

                        $ الابتدائي                                                                 

قم بتحديث متصفحك وسترى:

سوف $ الأساسي تعيين لون الخلفية إلى # 007bff

الآن عد إلى main.scss وألق نظرة على السطر الأول. سوف يتجاوز هذا الخط القيمة الافتراضية لمتغير اللون الأساسي الذي يستخدمه Bootstrap. احذف الخطين المائلين ، // ، في بداية السطر وحفظ الملف. العقدة لا سحرها وتادا!

$ الأساسي الآن يعين الخلفية # fe39ed

لقد خصصنا الآن bootstrap! يمكنك استخدام variables.scss من ريبو Bootstrap كمرجع لجميع المتغيرات التي يمكنك استخدامها.

تأكد من قراءة الوثائق المتعلقة بها لفهم كامل كيفية التعامل مع السيناريوهات المختلفة واستخدام الألوان في المغلق المخصص.

إحدى الطرق الجيدة لتنظيم main.scss هي وضع كل المتغيرات في ملف منفصل ، كما لا تضيف قواعد css الفعلية إلى هذا الملف ولكن تضيفها في ملفاتها الخاصة ، وهيكل عمليات الاستيراد مثل:

import "المتغيرات" ؛
import "../../node_modules/bootstrap/scss/bootstrap"؛

// الأنماط المخصصة
import "layout"؛
import "pages"؛
import ...
إلقاء نظرة على bootstrap.build. إنها أداة تهيئة Bootstrap تم تصنيعها بواسطة Oleg Berman ، إنها رائعة حقًا!

هذا هو ذلك

أنت الآن على استعداد لإنشاء وتخصيص وبناء موقع ويب يستند إلى bootstrap.

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

سرعة تشغيل البرامج النصية عبر مراقب

على الرغم من أن هذا يعمل ، إلا أن المراقب يتباطأ قليلاً في التقاط التغييرات. أيضا سرعة التجميع ليست من الدرجة الأولى. من ما رأيته في Youtube ، يجب أن يكون Gulp أسرع ، لكنني لم أستطع إدخال أنبوب في خط الأنابيب كما أردت. أيضًا قد يعمل برنامج تشغيل npm-all على تسريع شيء أو اثنين ، لكنني حصلت على بعض النصوص والأشياء المتداخلة ... كنت فقط أحمق وأدرك الآن.

ونعم ، أنا أعلم أن Webstorm قد بنى مجموعة sass ، لكن المتعاونين الآخرين يستخدمون محررهم المفضل لذلك أنا بحاجة إلى هذا.

قائمة الرغبات

  • تجميع أسرع
  • مراقب أسرع
  • إعادة التحميل السريعة للأنماط (يتم دفع التغييرات على الفور إلى المتصفح)
  • مخطوطات شبيبة
آمل أن تكونوا قد أحببت هذا المقال / البرنامج التعليمي