frontend starter

項目模板

因為網絡開發不需要痛苦。

項目模板是快速構建靜態站點的方式。使用一個命令，使用WebPack，Gulp，Hannebars.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

提醒

如果您想將此回購用於下一個項目，請確保進行以下更改：

1. 編輯data.yml ，填寫與您的網站關聯的HTML元數據。
2. 編輯package.json提供name ， version ， description ， license和repository.url 。
3. 刪除.git文件夾，以便您從新的提交歷史記錄開始。
4. 將README.md編輯為您的喜好。

gulp命令

可用的GULP命令的概述：

gulp build

將站點構建到dist目錄。這包括：

• SCSS，sourcemaps和自動修復
• JS uglification
• 車把到HTML

gulp build:optimized

這用於分發網站的優化版本（用於部署）。它包括gulp build和以下所有內容：

• SCSS縮小
• CSS / JS內聯源

gulp watch

觀看需要更改本地文件的更改，並根據需要重建網站的某些部分，以納入dist目錄。

gulp serve

在後台運行gulp watch ，並在Localhost上為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.