gulp pug 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-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 - ใช้ในระหว่างการพัฒนา:
  • บล็อกและส่วนประกอบ BEM: src/blocks
  • แบบอักษร: src/fonts
  • รูปภาพ: src/img
  • ไฟล์ JS: src/js
  • หน้าไซต์: src/views/pages
  • ไฟล์ SCSS: src/styles
  • ไฟล์ PUG Office: src/views
  • ไฟล์การกำหนดค่า Apache Web Server ที่มีการตั้งค่า GZIP: src/.htaccess
• โฟลเดอร์ dist เป็นโฟลเดอร์ที่เปิดตัวเซิร์ฟเวอร์ท้องถิ่นเพื่อการพัฒนา (เมื่อเริ่ม yarn run dev )
• โฟลเดอร์ gulp-tasks -A พร้อมงานอึก

⌨ทีม

• 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 หนึ่งไฟล์ (หากบล็อกใช้สคริปต์)
  • บล็อก pug-file ถูกนำเข้าสู่ไฟล์ src/views/index.pug (หรือไปยังไฟล์หน้าเว็บที่จำเป็นซึ่งจะเรียกว่าบล็อก)
  • SCSS-file ของบล็อกถูกนำเข้าสู่ไฟล์ src/blocks/modules/_modules.scss
  • ไฟล์บล็อก js ถูกนำเข้าสู่ src/js/import/modules.js

ตัวอย่างของโครงสร้างของโฟลเดอร์ที่มี bem block:

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

เพื่อไม่ให้สร้างโฟลเดอร์และไฟล์ที่เกี่ยวข้องด้วยตนเองมันเพียงพอที่จะกำหนดคำสั่งต่อไปนี้ในคอนโซล:

• yarn run bem-m my-block เพื่อสร้าง bem block ใน src/block/modules (สำหรับบล็อก BEM หลัก) ซึ่ง my-block คือชื่อของบล็อก BEM (หลังจากการสร้างคุณต้องลบเนื้อหาของไฟล์ BAM Block JS);
• yarn run bem-с my-component -เพื่อสร้างส่วนประกอบใน src/blocks/components (สำหรับส่วนประกอบ) โดยที่ my-component คือชื่อของส่วนประกอบ (หลังจากสร้างคุณต้องลบเนื้อหาของไฟล์ BEM องค์ประกอบ JS);

ส่วนประกอบ

• ส่วนประกอบ (ตัวอย่างเช่นไอคอนปุ่ม) จะออกในปั๊กโดยใช้สิ่งเจือปน
• แต่ละองค์ประกอบมีโฟลเดอร์ของตัวเองภายใน 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 รูปแบบ 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 จาก Sprite ใน 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 โดยไม่ต้องปั๊กหรือไม่?

ใช้ชุดประกอบนี้

- ชอบโครงการ?

บอกฉันเกี่ยวกับข้อบกพร่องวางดาวเป็นโทรเลขถึงฉันสำหรับเบียร์?

✉ผู้ติดต่อ

สำหรับคำถามทั้งหมดเขียนในโทรเลข