- Tiết kiệm thời gian và công sức hơn so với việc viết
html/cssthuần - Lazyload hình ảnh (Chỉ cần thêm
.lazyvàoimg) - Minify
image/css/js Prefixer CSShầu hết mọi trình duyệt- Hỗ trợ viết JS chuẩn
ES2015 - Auto Reload khi lưu file
- Node.js - JavaScript runtime environment
- NPM - Node package manager
- Gulp - The streaming build system
- Pugjs - HTML template engine
- SASS - CSS pre-processor
- Bower - Package manager
- BrowserSync - Live CSS Reload & Browser Syncing
Để sử dụng bộ kit, bạn phải cài đặt Node.js.
Nếu đã cài đặt Node.js, bạn có thể bỏ qua bước này.
Cài đặt gulp, bower, node-sass
Bật Terminal hoặc PowerShell với quyền Administrator và chạy các lệnh sau:
npm install gulp bower node-sass -global
Nếu bạn đã cài đặt và sử dụng Bower trước đây, hãy bỏ qua lệnh này
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
Lệnh này fix lỗi không sử dụng được Bower ở hệ điều hành Windows
Chạy bộ kit
Chạy 2 lệnh sau để cài đặt các package được sử dụng trong bộ kit:
npm i
bower update
Khởi động bộ kit
npm start
Bật browser và truy cập vào URL:
http://localhost:8000/
Bạn muốn truy cập website từ thiết bị khác hãy nhập URL sau:
Các thiết bị phải kết nối chung bộ định tuyến(Router)
http://10.0.0.215:8000/
Bạn có thể thay đổi PORT mặc định tại ./config.json
| Input | Description | Output |
|---|---|---|
src/views/_layout.pug |
MasterPage của project | |
src/views/*.pug |
HTML được build ra từ đây | dist/*.html |
src/components/*.sass |
Các stylesheet của project | dist/css/main.min.css |
src/components/main.js |
Script được viết ở đây | dist/js/main.min.js |
src/assets/images/* |
Nơi chứa hình ảnh *.{svg,gif,png,jpg,jpeg,webp} |
dist/img/* |
src/assets/fonts/fonts.css |
Import web-font vào CSS @font-face |
dist/fonts/global.min.css |
src/assets/fonts/* |
Nơi chứa web-font *.{woff2,woff,eot,ttf} |
dist/fonts/* |
config.json object global |
Import các JS library, font icons, CSS framework vào project | dist/css/global.min.css dist/js/global.min.js dist/fonts/* |