web前端【静态页项目】构建框架

本项目基于sass & ejs & gulp & requireJs & nodeJs & babel 相关技术，本项目包含三个终端用户：即：admin后台管理系统端、pc端、m移动端，可根据需要只用其中的某个端。

JavaScript 其它杂项

访问GitHub主页

共4Star

详细介绍

static-web-frame

web前端(静态页项目)构建框架【构建完交给后台同学去发挥，你就可以下班了】

本项目基于sass & ejs & gulp & requireJs & nodeJs & babel 相关技术

本项目包含三个终端用户：即：admin后台管理系统端、pc端、m移动端，可根据需要只用其中的某个端

Build Setup

# Clone project || 克隆项目
git clone https://github.com/yourVictor/static-web-frame.git

# Install dependencies || 安装依赖
npm install or cnpm install

# start project at localhost || 启动项目，本地开发代码，自动构建，随时查看效果
npm start

# build for production with minification || 编译项目，将编译后的代码交给后端开发人员，自己就可以下班了
npm run build-admin 编译admin端项目
npm run build-pc  编译pc端项目
npm run build-m  编译m端项目
npm run build  编译整个项目

project directory || 项目目录结构

static-web-frame
 ├─dist [编译后的项目代码，可以直接交给后端童鞋的代码]
 |   ├─[项目名称]-pc-view [pc端可以直接打开预览效果的代码]
 |   |         ├─index.html
 |   |         ├─js
 |   |         | ├─common-722ec8659e.js
 |   |         | └main-cb36d0e84e.js
 |   |         ├─css
 |   |         |  ├─index-d41d8cd98f.css
 |   |         |  └main-6c763fd116.css
 |   |         ├─img
 |   ├─[项目名称]-pc  [pc端交给后端童鞋对接的代码]
 |   |       ├─index.html
 |   |       ├─js
 |   |       | ├─common-722ec8659e.js
 |   |       | └main-cb36d0e84e.js
 |   |       ├─css
 |   |       |  ├─index-d41d8cd98f.css
 |   |       |  └main-6c763fd116.css
 |   |       ├─img
 |   ├─[项目名称]-m-view  [m端可以直接打开预览效果的代码]
 |   |         ├─index.html
 |   |         ├─js
 |   |         | ├─common-722ec8659e.js
 |   |         | └main-a15a733f9f.js
 |   |         ├─css
 |   |         |  ├─index-d41d8cd98f.css
 |   |         |  └main-6c763fd116.css
 |   |         ├─img
 |   ├─[项目名称]-m  [m端交给后端童鞋对接的代码]
 |   |      ├─index.html
 |   |      ├─js
 |   |      | ├─common-722ec8659e.js
 |   |      | └main-a15a733f9f.js
 |   |      ├─css
 |   |      |  ├─index-d41d8cd98f.css
 |   |      |  └main-6c763fd116.css
 |   |      ├─img
 |   ├─[项目名称]-admin-view  [admin端可以直接打开预览效果的代码]
 |   |           ├─index.html
 |   |           ├─js
 |   |           | ├─common-722ec8659e.js
 |   |           | └main-cb36d0e84e.js
 |   |           ├─css
 |   |           |  ├─index-d41d8cd98f.css
 |   |           |  └main-6c763fd116.css
 |   |           ├─img
 |   ├─[项目名称]-admin  [admin端交给后端童鞋对接的代码]
 |   |        ├─index.html
 |   |        ├─js
 |   |        | ├─common-722ec8659e.js
 |   |        | └main-cb36d0e84e.js
 |   |        ├─css
 |   |        |  ├─index-d41d8cd98f.css
 |   |        |  └main-6c763fd116.css
 |   |        ├─img
 |
 ├─src [项目源码]
 |  ├─project-admin [admin端源码]
 |  |     ├─js [项目admin端js,自动构建生成的，不用手动编写修改]
 |  |     | ├─common.js
 |  |     | └main.js
 |  |     ├─css [项目admin端css,自动构建生成的，不用手动编写修改]
 |  |     |  ├─index.css
 |  |     |  └main.css
 |  |     ├─img [项目admin端img目录]
 |  |     ├─_temporary [admin端_temporary,放置ejs、js和scss文件]
 |  |     |     ├─scss
 |  |     |     |  ├─main.scss [所有页面共用的一个scss文件]
 |  |     |     |  ├─theme  [放置主题scss文件:default,...]
 |  |     |     |  |   └_default.scss
 |  |     |     |  ├─page [放置页面scss文件:pop,...]
 |  |     |     |  |  └index.scss
 |  |     |     |  ├─layout  [放置页面布局scss文件]
 |  |     |     |  |   ├─___index.scss
 |  |     |     |  |   ├─__header.scss
 |  |     |     |  |   └_content.scss
 |  |     |     |  ├─component [放置组件scss文件:pop,...]
 |  |     |     |  |     ├─_flexLayout.scss
 |  |     |     |  |     ├─_float.scss
 |  |     |     |  |     └_pop.scss
 |  |     |     |  ├─base  [放置基本scss文件:css reset]
 |  |     |     |  |  └_reset.scss
 |  |     |     |  ├─abstract [放置抽象scss文件:scss参数和mixins]
 |  |     |     |  |    ├─__variables.scss
 |  |     |     |  |    └_mixins.scss
 |  |     |     ├─js_es5_es6  [放置js源码，支持写法：es5,es6,...]
 |  |     |     |  ├─common.js 
 |  |     |     |  └main.js 
 |  |     |     ├─ejs
 |  |     |     |  ├─templates  [放置模板ejs文件]
 |  |     |     |  |     └head_src.ejs
 |  |     |     |  ├─pages  [放置页面ejs文件]
 |  |     |     |  |   └index.ejs   
 |  ├─project-pc [pc端源码] 
 |  |     ├─ ...
 |  ├─project-m [m端源码]
 |  |     ├─ ...
 ├─gulpfile.js [gulp配置文件]
 ├─package.json [项目依赖]
 ├─projectConfig.js [项目构建配置文件]
 ...

project config || 项目构建配置

edit projectConfig.js to config project

参数名	参数类型	详细解释	备注
projectName	string	项目名称	整个项目名称，构建时会用到这个参数
admin	object	项目的admin端(即后台)构建配置	默认值: 见底下admin参数
pc	object	项目的pc端	同上
m	object	项目的m端(即移动端)	同上

admin 参数详情 [参数compress:代码压缩，参数version：版本号，参数类型：Boolean]

参数名	参数类型	详细解释	备注
css	object	css构建配置	默认值：{compress: true, version: true}
js	object	js构建配置	默认值：{compress: true, version: true}
img	object	img构建配置	默认值：{compress: true, version: true}
html	object	html构建配置	默认值：{compress: false, compressCss: true, compressJs: true}
pluginsPath	string	项目用到的插件路径，这个参数一般由后台开发人员提供	默认值：'plugins'

欢迎大家疯狂star，疯狂提issue。

推荐源码

暂无源码更多源码...