https://github.com/bingkui/static-html-template

静态页面网站快速开发环境，支持自动刷新页面，less样式预处理。
https://github.com/bingkui/static-html-template

html html-template less template

Last synced: about 1 month ago
JSON representation

静态页面网站快速开发环境，支持自动刷新页面，less样式预处理。

• Host: GitHub
• URL: https://github.com/bingkui/static-html-template
• Owner: BingKui
• License: mit
• Created: 2018-05-25T06:23:13.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T18:13:52.000Z (about 2 years ago)
• Last Synced: 2024-04-15T15:57:39.380Z (9 months ago)
• Topics: html, html-template, less, template
• Language: CSS
• Homepage:
• Size: 623 KB
• Stars: 19
• Watchers: 4
• Forks: 3
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# static-html-template

静态页面网站快速开发环境，支持自动刷新页面，less样式预处理。

本项目主要为了快速创建一个官网类的全静态页面做技术支持，做到快速创建、快速开发、快速发布。

## 项目创建

使用 cli 工具进行项目创建，快速创建一个能够进行开发的项目。

全局安装：

```shell

> npm i -g sht-cli

```

创建项目：

```shell

> sht new

```

根据提示输入，就可以创建一个项目了。

## 开发环境准备

**安装依赖**

项目依赖node版本：v10.10.0

项目使用到了 `gulp` 需要全局安装。

```shell

> npm i -g gulp

```

项目根目录下，执行安装命令。

```shell

> npm i

```

项目使用到一个 Chrome 插件： LiveReload。

## 开发

运行项目

```shell

> npm start

```

## 打包发布

```shell

> npm run build

```

项目资源会全部打包到 build 目录下。

## 目录说明：

config: 配置存放目录， 存放相应的配置文件

img: 图片资源存放文件夹

js: js 资源存放文件夹

less: less 样式文件存放目录，会生成相应的 css 文件，存放在 style 文件夹

style: 样式文件存放目录

view: html 页面存放目录

build: 打包发布生成的目录，资源会全部放在这个文件夹，并进行压缩

## 可自己改造的地方

- 合并所有 css 文件为一个文件，并对相应页面引用做修改

- 合并所有的 js 文件为一个文件，并对相应页面引用做修改

- 修改 less 预处理器为 sass

## 新支持功能

- 命令行创建页面，包括完成 html 、 less 文件，并完成相应的引用配置

- cli 操作方式，创建项目（完成）

- GUI 操作界面，新建项目，管理项目，新增页面等功能

[更新日志](./CHANGELOG.md)