gulp pug starter

Gulp-Pug-Starter

الخصائص

• فصول BEM
• يتم استخدام بنية BEM
• يتم استخدام عابرة Pug ​​و SCSS
• يتم استخدام Babel Transpower لدعم JavaScript الحديثة (ES6) في المتصفحات
• يتم استخدام WebPack لتجميع وحدات JavaScript
• يتم استخدام الرمز الصلب
• يتم استخدام كود التحقق من الأخطاء أمام اللجنة

تثبيت

• تثبيت Nodejs
• تثبيت عالميا:
  • الغزل: npm i -g yarn
  • Gulp: npm i -g gulp
  • أدوات BEM: npm i -g bem-tools-core
• قم بتنزيل التجميع باستخدام GIT: git clone https://github.com/andreyalexeich/gulp-pug-starter.git
• انتقل إلى مجلد التجميع الذي تم تنزيله: cd gulp-pug-starter
• أدخل yarn set version berry
• قم بتنزيل التبعيات اللازمة: yarn
• لبدء العمل ، أدخل الأمر: yarn run dev (وضع التطوير)
• لجمع المشروع ، أدخل أمر yarn run build (وضع التجميع)

إذا فعلت كل شيء بشكل صحيح ، فيجب عليك فتح متصفح مع خادم محلي. يتضمن وضع التجميع تحسين المشروع: ضغط الصورة ، وصنع ملفات CSS و JS للتنزيل على الخادم.

بنية الملف

 gulp-pug-starter
├── dist
├── gulp-tasks
├── src
│   ├── blocks
│   ├── fonts
│   ├── img
│   ├── js
│   ├── styles
│   ├── views
│   └── .htaccess
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .yarnrc.yml
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
└── .gitignore

• جذر المجلد:
  • .babelrc.js - إعدادات بابل
  • .bemrc.js - إعدادات BEM
  • .eslintrc.json - إعدادات ESLINT
  • .gitignore - حظر على تتبع ملفات GIT
  • .stylelintrc - إعدادات Stylelint
  • .stylelintignore - حظر على تتبع ملفات Stylelint
  • .yarnrc.yml - وضع الغزل
  • gulpfile.babel.js - إعدادات Gulp
  • webpack.config.js - إعدادات WebPack
  • package.json - قائمة التبعيات
• مجلد src - المستخدم أثناء التطوير:
  • الكتل والمكونات: src/blocks
  • الخطوط: src/fonts
  • الصور: src/img
  • ملفات JS: src/js
  • صفحات الموقع: src/views/pages
  • ملفات SCSS: src/styles
  • ملفات Pug Office: src/views
  • ملف تكوين خادم الويب Apache مع إعدادات GZIP: src/.htaccess
• مجلد dist هو مجلد يتم إطلاق خادم محلي من أجله للتطوير (عند بدء تشغيل yarn run dev )
• مجلد gulp-tasks مجلد مع مهام Gulp

⌨ الفرق

• yarn run lint:styles - تحقق من ملفات SCSS. بالنسبة إلى VSCode ، تحتاج إلى تثبيت مكون إضافي. بالنسبة إلى WebStorm أو PhpStorm ، تحتاج إلى تمكين Stylelint Languages & Frameworks - Style Sheets - Stylelint (سيتم إصلاح الأخطاء تلقائيًا أثناء حفظ الملف)
• yarn run dev - بدء تشغيل خادم لتطوير المشروع
• yarn run build - اجمع مشروعًا مع التحسين دون بدء تشغيل الخادم
• yarn run build:views - تجميع ملفات الصلصال
• yarn run build:styles - تجميع ملفات SCSS
• yarn run build:scripts - جمع JS فشل
• yarn run build:images - جمع الصور
• yarn run build:webp - لضبط الصور على تنسيق .webp
• yarn run build:sprites - جمع البراعم
• yarn run build:fonts - جمع الخطوط
• yarn run build:favicons - جمع Favikonki
• yarn run build:gzip - جمع تكوين Apache
• yarn run bem-m -add Bem Block
• yarn run bem-c - أضف المكون
• yarn run lint:styles --fix -fix Errors في ملفات SCSS وفقًا لإعدادات Stylelint
• yarn run lint:scripts - تحقق من JS FAIL
• yarn run lint:scripts --fix -fix Errors في ملفات JS وفقًا لإعدادات ESLINT

توصيات للاستخدام

نهج المكون لتطوير موقع الويب

• كل كتلة BEM لها مجلد خاص بها داخل src/blocks/modules
• يحتوي المجلد المكون من كتلة BEM على ملف PUG واحد ، ملف SCSS واحد وملف JS واحد (إذا كانت الكتلة تستخدم برنامج نصي)
  • يتم استيراد ملف Block Pug في ملف src/views/index.pug (أو إلى ملف الصفحة اللازم حيث سيتم استدعاء الكتلة)
  • يتم استيراد ملف SCSS من الكتلة إلى ملف src/blocks/modules/_modules.scss
  • يتم استيراد ملف Block JS إلى src/js/import/modules.js

مثال على بنية المجلد مع كتلة BEM:

 blocks
├── modules
│   ├── header
│   │   ├── header.pug
│   │   ├── header.js
│   │   ├── header.scss

من أجل عدم إنشاء المجلد والملفات المقابل يدويًا ، يكفي وصف الأوامر التالية في وحدة التحكم:

• yarn run bem-m my-block لإنشاء كتلة BEM في src/block/modules (للكتل الرئيسية BEM) ، حيث تكون my-block هي اسم كتلة BEM (بعد الإنشاء تحتاج إلى حذف محتويات ملف BAM BLOCK JS) ؛
• yarn run bem-с my-component لإنشاء مكون في src/blocks/components (للمكونات) ، حيث يكون my-component هو اسم المكون (بعد إنشاء ، تحتاج إلى حذف محتويات ملف JS Component Component) ؛

عناصر

• يتم إصدار المكونات (على سبيل المثال ، الرموز ، الأزرار) في الصلصال باستخدام الشوائب
• يحتوي كل مكون على مجلد خاص به داخل src/blocks/components
• يحتوي المجلد الخاص بمكون واحد على ملف pug واحد ، وملف SCSS واحد وملف JS واحد (إذا كان المكون يستخدم البرنامج النصي)
  • يتم استيراد ملف pug المكون إلى src/views/index.pug (أو إلى ملف الصفحة اللازم من حيث سيتم استدعاء المكون)
  • يتم استيراد ملف SCSS المكون في ملف src/blocks/components/_components.scss
  • يتم استيراد ملف JS المكون في ملف src/js/import/components.js

صفحات المشروع

• صفحات المشروع موجودة في مجلد src/views/pages
  • ترث كل صفحة (بما في ذلك الصفقة الرئيسية) src/views/layouts/default.pug قالب
  • الصفحة الرئيسية: src/views/index.pug

الخطوط

• الخطوط في مجلد src/fonts
  • استخدام .woff تنسيقات و .woff2
  • الخطوط متصلة بملف src/styles/base/_fonts.scss
  • يمكنك ضبط الخطوط المحلية باستخدام هذه الخدمة

الصور

• الصور في مجلد src/img
  • يتم تحويل الصور تلقائيًا إلى تنسيق .webp . معلومات مفصلة عن الاستخدام هنا
  • يجب أن تكون صورة توليد Favikonok في مجلد src/img/favicon ويبلغ حجمها على الأقل 1024px x 1024px

SVG

لإنشاء العفاريت .svg يجب أن تكون صورة .svg في مجلد src/img/sprites . على سبيل المثال ، لدينا ملفات icon-1.svg و icon-2.svg و icon-3.svg ، ويجب علينا الاتصال icon-2.svg . للقيام بذلك ، في HTML ، تحتاج إلى استخدام علامة use :

svg
    use ( xlink:href = "img/sprites/sprite.svg#logo" )

قم بتغيير أنماط SVG-icons من العفريت في CSS:

 svg use {
    fill : red;
}

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

 < svg width =" 18 " height =" 19 " viewBox =" 0 0 18 19 " fill =" none " xmlns =" http://www.w3.org/2000/svg " >
  < path d =" M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z " fill =" #1B1B1D " />
</ svg >

من الضروري إزالة fill="none" و fill="#1B1B1D" . يجب أن يتحول هكذا:

 < svg width =" 18 " height =" 19 " viewBox =" 0 0 18 19 " xmlns =" http://www.w3.org/2000/svg " >
  < path d =" M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z " />
</ svg > 

مكتبات Forter

• يتم تثبيت جميع المكتبات الثالثة -في مجلد node_modules
  • لتنزيلها ، استخدم أمر yarn add package_name
  • لتوصيل ملفات المكتبة JS ، استيرادها في بداية ملف BEM Block JS (أي ، كتلة BEM التي تستخدم البرنامج النصي) ، على سبيل المثال:

   import $ from "jquery" ;

  • لتوصيل ملفات التصميم للمكتبات ، استيرادها إلى ملف src/styles/vendor/_libs.scss
  • لا يمكن تغيير ملفات JS والملفات الأسلوبية للمكتبات بمفردك

تحتاج SCSS بدون PUG؟

استخدم هذا التجميع.

؟ مثل المشروع؟

أخبرني عن الحشرات ، وضعت نجمة ، كن Telegram Ton بالنسبة لي للبيرة؟

✉ جهات الاتصال

لجميع الأسئلة ، اكتب في Telegram