[toc]
Hsk-garen 脚手架
如果发现文章有任何错误，请联系相关负责人修改，或者联系作者(972325584@qq.com) 原文地址:http://29b2b4a9.wiz03.com/share/s/0FIHiF2KRkk72qWr_r2tEb4P38y9Sr2ftkTN2HY_O93Mp44V
hsk-garen是HskUI的脚手架(前端工程化工具),用于HskUI项目的编译和执行，主要功能有自动生成代码,代码编译够构建等
hsk-garen由优化vue-cli而来
hsk-garen使用webpack实现代码编译和构建,资源的模块化等功能,并且屏蔽了webpack的复杂性，让开发者不需要去了解复杂的webpack的配置和webpack的插件和loader的使用。会默认将webpack的配置最适合vue组件的开发。虽然这样极大的损失了项目构建的可定制化，但能开箱即用啊！
hsk-garen在构建的过程中会支持一些代码的自动生成(比如路由生成，图标的动态生成，公共组件的代理代码等等)，这些代码的自动生成，极大的提高了开发效率和规范化代码，同样提高了代码的可扩展性
hsk-garen流程图:
配置文件
hsk-garen根据配置文件运行，配置文件默认需要为项目的src/conf/build-config.js。
代码生成器
代码构建
构建的配置文件是build-config中的builder配置项。
当前的构建分为三种方式:browser,file,test。根据配置builder.model指定
不管使用哪种模式，webpack都使用了下列插件
基础webpack配置使用了下面插件:
- webpack.DefinePlugin:定义常量,用于定义配置项
constant的内容 - webpack.ContextReplacementPlugin:内容替换，用于处理momentjs中语言配置只加载中文
- html-webpack-plugin:webpack html插件,用于对入口html自动注入资源文件
- copy-webpack-plugin:复制，用于对static文件夹下的内容复制到构建目录中去
browser
browser模式会在本地用node启动一个web server,所有的资源文件全被加载到内存。使用者打开浏览器，访问本地web服务器,即可查看到效果，适合于开发环境。
在browser模式下,除了基础配置中使用的插件,还使用了下面的插件:
- HotModuleReplacementPlugin:热替换
file
file模式会启动webpack将项目代码构建成目标文件，这些目标文件可直接发布到web服务器(一般为nginx,apache)上作为静态资源文件发布，适合于生产环境。
在file模式下,除了基础配置中使用的插件,还使用了下面的插件:
- lodash-webpack-plugin:lodash按需加载
- webpack.optimize.UglifyJsPlugin:js代码压缩
- optimize-css-assets-webpack-plugin:css优化
- extract-text-webpack-plugin:样式代码抽取
- webpack.optimize.CommonsChunkPlugin:公共包抽取,详情请见代码分割和按需加载
根据配置使用:
- compression-webpack-plugin:使用gzip压缩
- webpack-bundle-analyzer:启动代码分析报告
test
test模式会启动karma,然后karma启动webpack对整个项目进行构建，构建完成后，karma执行测试案例进行项目测试，适用于对代码进行测试。
test模式下只使用了webpack.DefinePlugin插件
在测试环境下需要配置builder.karma对karma进行配置，更多karma的配置可以查看karma详细配置
