gulp scss starter

Gulp-SCSS-Starter

الخصائص

• فصول BEM
• يتم استخدام بنية BEM
• يتم استخدام المعالج المسبق 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-scss-starter.git
• انتقل إلى مجلد التجميع الذي تم تنزيله: cd gulp-scss-starter
• أدخل yarn set version berry
• قم بتنزيل التبعيات اللازمة: yarn
• لبدء العمل ، أدخل الأمر: yarn run dev (وضع التطوير)
• لجمع المشروع ، أدخل أمر yarn run build (وضع التجميع)

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

بنية الملف

 gulp-scss-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 - المستخدم أثناء التطوير:
  • كتل BAM: src/blocks
  • الخطوط: src/fonts
  • الصور: src/img
  • ملفات JS: src/js
  • صفحات الموقع: src/views/pages
  • ملفات SCSS: src/styles
  • ملفات HTML: 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 - جمع ملفات HTML
• 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 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 واحدة على ملف HTML واحد ، وملف SCSS واحد وملف JS واحد (إذا كانت الكتلة تستخدم برنامج نصي)
  • يتم استيراد ملف HTML كتلة إلى ملف src/views/index.html (أو إلى ملف الصفحة اللازم من حيث سيتم استدعاء الكتلة)
  • يتم استيراد ملف SCSS من الكتلة إلى ملف src/blocks/modules/_modules.scss
  • يتم استيراد ملف Block JS إلى src/js/import/modules.js

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

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

من أجل عدم إنشاء المجلد والملفات المقابل يدويًا ، يكفي وصف الأمر التالي في وحدة التحكم: yarn run bem-m my-block لإنشاء كتلة BEM في src/block/modules ، حيث يكون my-block هو اسم كتلة BEM (بعد الإنشاء الذي تحتاجه إلى حذف محتويات ملف BEM).

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

• صفحات المشروع موجودة في مجلد src/views/pages
  • الصفحة الرئيسية: src/views/index.html

الخطوط

• الخطوط في مجلد 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 " > </ use >
</ svg >

قم بتغيير أنماط 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 (على سبيل المثال ، yarn add jquery )
  • لتوصيل ملفات المكتبة JS ، استيرادها في بداية ملف BEM Block JS (أي ، كتلة BEM التي تستخدم البرنامج النصي) ، على سبيل المثال:

   import $ from "jquery" ;

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

تحتاج SCSS + PUG؟

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

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

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

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

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