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