มูลนิธิ - โครงการเริ่มต้น

คุณสามารถเริ่มต้นด้วยการพัฒนาโครงการของคุณด้วยเทมเพลตที่มีอยู่ซึ่งสามารถติดตั้งผ่านYeti LaunchหรือFoundation CLI. คุณสามารถเริ่มต้นด้วยโครงการใหม่โดยใช้เทมเพลตเหล่านี้โดยใช้ระบบGulp build สำหรับการประมวลผล Sass, JavaScript, การคัดลอกไฟล์เป็นต้น

เทมเพลตพื้นฐาน

เทมเพลตพื้นฐานคือเทมเพลต SASS ซึ่งรวมถึงโครงสร้างไดเรกทอรีแบบแบนและรวบรวมเฉพาะไฟล์ SASS และเป็นการดีที่จะมีเทมเพลตแบบง่ายนี้ในขณะที่ใช้ SASS เท่านั้น คุณสามารถใช้แม่แบบพื้นฐานได้โดยใช้ Yeti Launch หรือใช้ Foundation CLI โดยใช้คำสั่งต่อไปนี้ -

$ foundation new --framework sites --template basic

การตั้งค่านี้เป็นครั้งแรกเรียกใช้NPM ติดตั้ง , ซุ้มติดตั้งและใช้งานเริ่มต้น NPMคำสั่งเพื่อเรียกใช้งาน นอกจากนี้คุณยังสามารถดาวน์โหลดไฟล์แม่แบบจากGithub

เทมเพลต ZURB

เป็นการผสมผสานระหว่าง CSS / SCSS, JavaScript, เทมเพลต Handlebars, โครงสร้างมาร์กอัป, การบีบอัดภาพและใช้การประมวลผล SASS คุณสามารถใช้เทมเพลต ZURB โดยใช้Yeti Launchหรือใช้Foundation CLIโดยใช้คำสั่งด้านล่าง -

$ foundation new --framework sites --template zurb

ในการเรียกใช้เทมเพลตนี้ให้ทำตามขั้นตอนเดียวกับที่ระบุไว้ในเทมเพลตพื้นฐาน นอกจากนี้คุณยังสามารถดาวน์โหลดไฟล์แม่แบบจากGithub

การคัดลอกเนื้อหา

คุณสามารถคัดลอกเนื้อหาในโฟลเดอร์src / assetsโดยใช้Gulpซึ่งเนื้อหาจะเป็นโฟลเดอร์โครงการของคุณ สิ่งสำคัญคือไฟล์ SASS ไฟล์ JavaScript และรูปภาพจะไม่อยู่ภายใต้กระบวนการคัดลอกเนื้อหานี้เนื่องจากจะมีกระบวนการของตนเองในการคัดลอกเนื้อหา

การรวบรวมเพจ

คุณสามารถสร้างหน้าเว็บ HTML ภายใต้สามโฟลเดอร์คือหน้า , รูปแบบและpartialsซึ่งอยู่ภายในsrc /ไดเรกทอรี คุณสามารถใช้คอมไพเลอร์ไฟล์ Flat Paniniที่สร้างเลย์เอาต์สำหรับเพจโดยใช้เทมเพลตเพจบางส่วน HTML กระบวนการนี้สามารถทำได้โดยใช้ภาษาเท็มเพลตของ Handlebars

การรวบรวม SASS

คุณสามารถคอมไพล์ SASS เป็น CSS โดยใช้Libsassและไฟล์ SASS หลักจะถูกเก็บไว้ในsrc / assets / scss / app.scssและบางส่วนของ SASS ที่สร้างขึ้นใหม่จะถูกเก็บไว้ในโฟลเดอร์นี้เอง ผลลัพธ์ของ CSS จะเหมือนกับ CSS ปกติซึ่งอยู่ในลักษณะซ้อนกัน คุณสามารถบีบอัด CSS กับการทำความสะอาด CSSและลบ CSS ไม่ได้ใช้จากสไตล์การใช้UnCSS

การคอมไพล์ JavaScript

ไฟล์ JavaScript จะถูกเก็บไว้ในโฟลเดอร์src / assets / jsพร้อมกับ Foundation และการอ้างอิงทั้งหมดจะเชื่อมโยงเข้าด้วยกันเป็นไฟล์app.js ไฟล์จะถูกผูกเข้าด้วยกันตามที่ระบุไว้ในลำดับด้านล่าง -

• การพึ่งพามูลนิธิ
• ไฟล์จะถูกเก็บไว้ในโฟลเดอร์src / assets / js
• ไฟล์จะถูกรวมเข้าไว้ในแฟ้มเรียกว่าเป็นหนึ่งapp.js

การบีบอัดภาพ

ตามค่าเริ่มต้นภาพทั้งหมดจะถูกเก็บไว้ในโฟลเดอร์assets / imgภายใต้โฟลเดอร์dist คุณสามารถบีบอัดรูปภาพในขณะที่สร้างสำหรับการผลิตโดยใช้gulp-imageminซึ่งรองรับไฟล์ JPEG, PNG, SVG และ GIF

BrowserSync

คุณสามารถสร้างเซิร์ฟเวอร์BrowserSyncซึ่งเป็นการทดสอบเบราว์เซอร์ที่ซิงโครไนซ์ได้ที่http://localhost:8000และสามารถดูเทมเพลตที่คอมไพล์โดยใช้ URL นี้ ในขณะที่เซิร์ฟเวอร์ของคุณกำลังทำงานเพจจะรีเฟรชโดยอัตโนมัติเมื่อคุณบันทึกไฟล์และคุณจะเห็นการเปลี่ยนแปลงที่เกิดขึ้นกับเพจแบบเรียลไทม์ขณะที่คุณทำงาน