# generator-foreground

> 前端开发脚手架生成器

Latest version **1.1.1** (published 2016-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install generator-foreground
pnpm add generator-foreground
yarn add generator-foreground
bun add generator-foreground
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2016-11-14 |
| First published | 2016-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | bian |
| Maintainers | mrbian |
| Keywords | yeoman-generator |

## Links

- npm: https://www.npmjs.com/package/generator-foreground
- Repository: https://git.oschina.net/mrbian/koa-generator
- npm.io page: https://npm.io/package/generator-foreground

## Dependencies (5)

- [chalk](https://npm.io/package/chalk.md) ^1.1.3
- [yosay](https://npm.io/package/yosay.md) ^1.2.0
- [yeoman-test](https://npm.io/package/yeoman-test.md) ^1.1.0
- [yeoman-assert](https://npm.io/package/yeoman-assert.md) ^2.1.2
- [yeoman-generator](https://npm.io/package/yeoman-generator.md) ^0.22.5

## Recent versions

- 1.1.1 (latest) — 2016-11-14
- 1.1.0 — 2016-11-14
- 1.0.9 — 2016-11-14
- 1.0.8 — 2016-11-14
- 1.0.7 — 2016-11-14
- 1.0.6 — 2016-11-14
- 1.0.5 — 2016-11-14
- 1.0.4 — 2016-09-15
- 1.0.3 — 2016-09-15
- 1.0.2 — 2016-09-15
- 1.0.1 — 2016-09-14
- 1.0.0 — 2016-09-01

## 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出来，否则在最后打包发布的时候会有问题

---
_Source: https://npm.io/package/generator-foreground · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._