frontend starter

เทมเพลตโครงการ

เพราะการพัฒนาเว็บไม่จำเป็นต้องเจ็บปวด

เทมเพลตโครงการเป็นวิธีการสร้างไซต์คงที่อย่างรวดเร็ว ด้วยคำสั่งเดียวสร้างหน้าคงที่โดยใช้ webpack, gulp, handlebars.js และ scss

[ES6]

คุณสมบัติ

• ติดตั้งโครงการด้วยคำสั่งเพียงสามคำ (ดู "การพัฒนา" ด้านล่าง)
• ใช้ handlebars.js เพื่อให้ HTML ของเราจัดระเบียบเป็นเทมเพลตและส่วนหนึ่ง
• ใช้ SCSS เพื่อให้ CSS ของเราจัดเป็นส่วนประกอบเชิงตรรกะ
• ใช้ Browsersync เพื่อเปิดตัวเว็บไซต์การพัฒนาของเราโดยอัตโนมัติโหลดหน้าเว็บเมื่อใดก็ตามที่เราเปลี่ยน HTML และฉีดการเปลี่ยนแปลงไปยัง CSS, JavaScript และรูปภาพที่ต้องการโหลดซ้ำ
• ใช้ HTML minifier และเพิ่มประสิทธิภาพ HTML, CSS, JavaScript และรูปภาพของเราตามลำดับ

ทั้งหมดมีคำสั่งหนึ่งจากเทอร์มินัล:

yarn start

การตั้งค่า

npm install -g gulp  # May require `sudo` 

การพัฒนา

yarn install            # One time
gulp serve

การแจ้งเตือน

หากคุณต้องการใช้ repo นี้สำหรับโครงการต่อไปของคุณตรวจสอบให้แน่ใจว่าได้ทำการเปลี่ยนแปลงต่อไปนี้:

1. แก้ไข data.yml เติมในข้อมูลเมตา HTML ที่เกี่ยวข้องกับเว็บไซต์ของคุณ
2. แก้ไข package.json ให้ name , version , description , license และ repository.url
3. ลบโฟลเดอร์ .git เพื่อที่คุณจะได้เริ่มต้นจากประวัติความเป็นมาใหม่
4. แก้ไข README.md ตามความต้องการของคุณ

คำสั่งอึก

ภาพรวมของคำสั่งอึกที่มีอยู่:

gulp build

สร้างไซต์ลงในไดเรกทอรี dist ซึ่งรวมถึง:

• SCSS, sourcemaps และ autoprefixing
• js uglification
• มือจับถึง html

gulp build:optimized

สิ่งนี้ใช้สำหรับการแจกจ่ายไซต์เวอร์ชันที่เหมาะสม (สำหรับการปรับใช้) มันรวมทุกอย่างตั้งแต่ gulp build รวมถึง:

• SCSS minification
• การจัดหาแบบอินไลน์ CSS / JS

gulp watch

เฝ้าดูการเปลี่ยนแปลงในไฟล์ท้องถิ่นและสร้างบางส่วนของเว็บไซต์ตามความจำเป็นลงในไดเรกทอรี dist

gulp serve

เรียกใช้ gulp watch ในพื้นหลังและให้บริการไดเรกทอรี dist ที่ localhost:3000 ด้วยการโหลดซ้ำอัตโนมัติโดยใช้ Browsersync

โครงสร้าง

├── webpack.config.dev.js   # Controls javascript and css bundling
├── Gulpfile.js             # Controls Gulp, used for building the website
├── README.md               # This file
├── data.yml                # Metadata associated with the site.
├── dist/                   # Gulp builds the static site into this directory
├── package.json            # Dependencies
└── src/                    # All source code
    ├── assets/ 
        ├── css/            # Stylesheets
        ├── font/           # Font files
        ├── img/            # Images and SVGs
        ├── js/             # Javascript libraries and scripts
    ├── views/     
        ├── partials/       # Handlebars HTML partials that are included / extended
        └── templates/      # Handlebars HTML files, one per page on the site.