Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wyyxdgm/gulp-less-start-kit
网站初始化集成
https://github.com/wyyxdgm/gulp-less-start-kit
bootstrap deploy ejs gulp hash i18n less postcss responsive uglify website
Last synced: about 5 hours ago
JSON representation
网站初始化集成
- Host: GitHub
- URL: https://github.com/wyyxdgm/gulp-less-start-kit
- Owner: wyyxdgm
- Created: 2019-11-12T13:04:14.000Z (about 5 years ago)
- Default Branch: struct
- Last Pushed: 2022-12-04T20:04:25.000Z (almost 2 years ago)
- Last Synced: 2023-03-02T11:51:30.540Z (over 1 year ago)
- Topics: bootstrap, deploy, ejs, gulp, hash, i18n, less, postcss, responsive, uglify, website
- Language: JavaScript
- Size: 9.83 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 官网快速构建
## Getting Started
主要包括一些开发任务和自动编译
### 开发基础
1.需要node环境，参考[Installing Node.js via package manager](https://nodejs.org/en/download/package-manager/)
2.quick start
```
npm install
npm run dev
npm run serve
```
### 开发指南
gulp 任务
```
├─┬ default // 一次性编译链接资源文件到dist/
│ ├── build:html
│ ├── css
│ └── copy
├─┬ watch // 开发时watch任务，自动更新，包含很多细分任务
│ ├── default
│ ├── watchhtml
│ ├── watchi18n
│ ├── watchcss
│ ├── watchcopy
│ ├── watchdev
│ └── serve
├── watchi18n // watch i18n/*.js
├── watchdev // 开发便利，lab/src/**下编辑代码片段能生成到lab/dist/**
├── watchcss
├── css // 编译src/css下的资源到dist/，支持less等
├── serve // start a static server at 8888
├── clean
├── watchcopy
├── copy // 拷贝相关资源到 dist/**
├── watchhtml
└── build:html // src/index.html -> dist/{{i18n}}/index.html
```
资源结构
```
├── dist # gulp 生成目录
│ ├── css
│ ├── en
│ ├── files
│ ├── fonts
│ ├── i18n
│ ├── img
│ ├── js
│ ├── video
│ └── zh
├── i18n
├── lab # 开发便利目录
│ ├── dist
│ └── src
├── lib
├── config.js # 配置语言部署信息等
├── node_modules
│ ├── ...
│ └── ...
└── src
├── css
├── files
├── fonts
├── i18n
├── img
├── pages # ejs 页面
├── js
└── video
```
dist目录由 `gulp` 可以生成
开发时使用 `gulp watch`，保持页面实时更新
## dev测试
src/index.html 增加一段HTML
* 片段生成例子
1. 执行 `gulp watch`，进入开发状态。
2. 新建lab/src/input.html（格式`/\w+.html/`），代码如下。
```html
标题
内容 12333。
```
* 生成lab/dist/input.html
```ejs
<%=__('标题')%>
<%=__('内容 12333。')%>
```
* 生成lab/dist/input.{i18n}.js 并自动导入 i18n/{i18n}.js
```js
// file: lab/dist/input.zh.js
{
"标题": "标题",
"内容 12333。": "内容 12333。"
}
// file: lab/dist/input.en.js
{
"标题": "Title",
"内容 12333。": "Content 12333."
}
```
## Details
* 同名文件引用
* `src/files/` 下面的文件对外访问路径，统一为如下路径。
```bash
/files/public-en.file
/files/public-zh.file
```
文件更新，使用:`ln -snf source_file open_link_name`
```bash
# ln -snf public-en-v{n}.file public-en.file
# ln -snf public-zh-v{n}.file public-zh.file
```