# foreground-generator

**Repository Path**: mrbian/foreground-generator

## Basic Information

- **Project Name**: foreground-generator
- **Description**: 前端脚手架生成器
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2016-08-28
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#foreground-generator
前端开发脚手架生成器

## 前端脚手架说明
- 使用webpack-dev-server + hot-middleware实现内存中文件热加载
- 使用gulp实现自动化

- 初始化项目

```
/**
* 编译一遍src/js、src/css、src/scss 下面的css和js以及html，生成assets文件夹
* 启动app，webpack-dev-server在内存中再次编译一遍
* 此时webpack-dev-server在内存中的文件和assets文件夹下的文件一模一样
* 这样配置方便更改js和css文件的前缀
*/
npm start   
```

- 添加一个页面

```
/**
* 询问filename之后
* 自动生成[filename].js放在src/js下
* 自动生成[filename].scss 和 [filename].css 在src/scss 和 src/css下
* 自动生成[filename].html 在src/html下
* 编译后重启工程
*/ 
gulp add
```

- src/html 和 src/js下的文件是一一对应关系，比如，a.html的webpack入口文件就是a.js
- server/views 下的渲染实例只需要在文件开头加入如下路径配置，就可以引入所有在入口文件配置好的js和css了

```
<% extend "../../assets/home.html" %>
```
***这个路径是views文件夹内部相对于assets文件夹的，而不是html相对于assets文件夹的，这点要注意***

- 修改了入口文件的js后，整个页面会自动reload，不需要F5刷新

### 发布
有两种发布方式
- 一 、 静态文件形式发布
```
gulp pack 
```
压缩所有的资源文件同时打包出server/views一级目录下面的html，assets/html文件夹下面得到的都是已经经过ect编译后的html  
如果需要修改资源文件的前缀，只需要修改package.json下面的remoteServer.staticPrefix   

此时assets文件夹可以直接交给后端  
可以让后端以静态文件的形式发布  

- 二、 动态渲染发布
```
gulp pack
```
压缩后，通过server动态渲染上线


## 生成器说明
- 可以选择js框架使用angular1、angular2、react、vue
- 可以选择css框架使用amazeui还是bootstrap
- 可以选择js代码是使用ES6还是ES5
- 自动为文件头加入作者信息和创建日期

## 使用
```
npm install -g generator-foreground
mkdir test 
cd test
yo foreground
```

## 友情提示
- 使用Webstorm将templates文件夹mark成outproject，让webstorm自动的Inspection对templates文件夹下的文件失效
- React框架对bower的支持不好，请引入node_modules下面的React
- 前端所有全局通用变量如jquery,React都一定使用expose-loader给expose出来，否则在最后打包发布的时候会有问题