เทมเพลตเว็บไซต์แบนและตอบสนองออกแบบและเขียนรหัสโดย Maxim Orlov
การสาธิต: http://website-templates.github.io/portfolio_one-page-template
Mockup ผลิตภัณฑ์ที่สร้างขึ้นด้วย http://magicmockups.com/
./
├── .editorconfig
├── gulpfile.js
├── package.json
├── README.md
|
├── gulp_tasks/ * gulp tasks
| ├── config/ * gulp tasks config
│ | ├── paths.js
│ | └── aliases.js
│ |
| └── task.js
|
├── screenshots/ * responsive test screenshots
|
├── dev/ * site source
│ ├── images/ * image sources
| │
│ ├── pug/ * templates
| | ├── blocks/ * blocks library
| │ | └── block.pug
| │ ├── helpers/ * helper mixins
| │ ├── vendor/ * third-party code
| │ ├── layouts/ * page layouts
| │ └── pages/ * main pages templates
| │
│ ├── js/ * source js
| | ├── vendor/ * vendor scripts library
| | ├── lib/ * site scripts library
| │ ├── head.js * head scripts
| │ └── body.js * body scripts
| │
| ├── sass/ * sass preprocessor styles
| | ├── blocks/ * blocks library
| │ | └── block.sass
| │ ├── helpers/ * mixins and vars
| │ ├── vendor/ * third-party code
| │ ├── custom.sass
| │ ├── noscript.sass
| │ └── screen.sass
| │
│ ├── helpers/ * helper files
| | ├── favicon.ico
| | └── .htaccess
| │
│ ├── fonts/ * font sources
| │
│ └── data/ * configs and data for templates
│
└── build/ * built source
├── index.html
├── page.html
|
└── static/ * static assets
├── css/ * minified styles
|
├── images/ * minified images
│
├── js/ * minified assembled js
|
└── fonts/ * @font-face-ready webfonts
โครงการนี้มีไฟล์. editorConfig ที่รูท มันอธิบายถึงสไตล์เยื้องช่องว่างท้าย ฯลฯ ดูรายละเอียดเพิ่มเติมได้ที่นี่
หากคุณไม่เคยใช้อึกมาก่อนอย่าลืมตรวจสอบคู่มือการเริ่มต้นใช้งานให้ตรวจสอบ recips เหล่านี้
ก่อนเริ่มต้นคุณต้องติดตั้ง NPM เช่นเดียวกับ อึก ทั่วโลก
ขั้นตอนง่ายๆในการเริ่มต้น:
package.json โดยรัน: npm installdev/data/config.json ดูส่วนการกำหนดค่าไซต์ หม้อไอน้ำนี้ใช้เทมเพลต PUG ที่มีการกำหนดค่าข้อมูลภายนอก การตั้งค่าหลักสามารถพบได้ในไฟล์ dev/data/config.json และมีให้สำหรับการใช้งานในเทมเพลตด้วย config.key-name
ที่นี่กลุ่มของงาน gulp พร้อมคำอธิบายบางอย่าง
ลบตัวยึดตำแหน่งออกจากไดเรกทอรีที่ทำงาน Gulp: gulp cleanup
งาน Dev กับเซิร์ฟเวอร์คงที่ Gulp: gulp dev
สร้างงาน Gulp: gulp build
สร้างโครงการสร้างใหม่และสร้างโครงการทั้งหมด Gulp: gulp rebuild
เรียกใช้เซิร์ฟเวอร์โดยไม่ต้องดูการเปลี่ยนแปลง Gulp: gulp server
โครงการนี้ใช้ BrowsERSYNC เป็นเซิร์ฟเวอร์แบบคงที่พร้อมตัวเลือกการโหลดสดที่เปิดใช้งานและกำหนดค่า
มิกซ์