自定义前端构建东西天生器generator-pg-cloud
近期公司前端一向在做效力提拔，流程优化，很幸运这个担子落在了我身上，除了一些培训，分享以外，本身弄了个基于yeoman的前端构建环境天生器，在此分享给人人，以为有效的请试用。
好了，言归正传，这个天生器的名字如题目所示，叫做generator-pg-cloud,背面的代表我在公司所属的部门，人人就不要care了。最新版本的应该是1.4.3版本了，之间经历过很屡次种种大改小改，如今还算基础惬意吧。
准备工作：请准备好nodejs环境，装置yeoman,这是最基础的，假如想运用单元测试，请装置mocha,不知道怎样装置的自行百度，不再赘述。
YES!,如今该本文的正角儿进场了，$npm install -g generator-pg-cloud,假如没有报错，置信天生器已装置在你电脑上的nodejs根目次了。
如今让我们新建一个工程目次，$mkdir demo && cd demo，进入demo文件夹以后，运转$yo,假如在选项中没有涌现PG CLOUD，那末运转$npm link generator-pg-cloud将天生器链接进工程环境。也能够直接运转$yo pg-cloud直接装置，装置历程中会出如今一些选项提醒，根据本身的需求来就好了。
OK，不出预料的话，构建环境已天生终了了。如今让我们看看目次内里有些啥东西：
- app文件夹：我们就在这内里写代码
- bower_components文件夹：前端包治理器的文件夹，不知道bower的本身百度吧
- node_modules文件夹：不必多说，环境所依靠的node插件
- test文件夹：单元测试框架mocha的文件夹
- tmp文件夹：browserify编译JS文件的存储文件夹
- gitignore：git提交疏忽列表，像node_modules这类庞大的文件夹是不会提交的
- bower.json：bower的配置文件
- package.json：npm包治理配置文件
- gulpfile.js 构建东西的中心文件基于gulp,不要问我为啥不必grunt啦，grunt哪有这么潇洒？没它就玩不了
gulpfile.js 供应以下功用：
-
$gulp serve启动一个localhost,默许端口9090,会自动挪用浏览器并翻开,效果browser-async插件，当文件转变时，自动革新浏览器，假如你运用了一些须要编译的写法，比方基于commmonjs范例的require,ECMAScript6语法，React的JSX语法，browserify会自动帮你编译文件到.tmp文件，你只须要在html文件夹内里指定须要编译的script标签，给这个标签加一个属性browserify=’进口文件途径’,详见demo -
$gulp jshint应用jshint插件对语法进行检查 -
$gulp wiredep自动依靠注入，当你运用bower装置了一个插件，比方jquery,这个敕令能够让一切html页面都导入这个插件，免除痛楚的手动修正，假如此时gulp serve正在运转，则更会自动帮你注入，$gulp wiredep都免除了。 -
$gulp images紧缩app/resource文件夹下的资本文件图片，免除手动紧缩 -
$gulp default构建全部项目，天生一个新的项目文件夹dist,紧缩种种html,css,js文件，紧缩资本等等。 -
$gulp parsePath将html文件中的相对援用途径都替换成相对途径,重如果为了处理我们公司线上效劳器和构建环境差了一级目次的题目. -
$gulp dist启动构建目次的环境，这时刻重如果为了看看构建天生的目次有无题目，报错之类的。 -
$gulp debug建立一个debug效劳，这个功用重如果针对手机端调试打印log的,你须要编写一个AJAX要求，把你想打印的LOG以get体式格局发送到localhost:3000端口，就能在敕令行打印出你须要的LOG，同时翻开debug.html,在这个页面的控制台你也能看到log信息。
OK, 如今工程文件夹下的dist目次，就是你的布置目次了。
别的讲一讲怎样html文件中的一些范例：
- build:解释标签，放在build标签中的内容，既示意通知构建东西，这些JS，或许CSS文件是须要紧缩的。
- bower:解释标签,bower治理器装置的前端插件都将会自动注入到这个标签中。
- 假如你愿望运用nodejs的require,或许想要运用JSX React,或许是想要运用上到场属性browserify=‘须要编译的JS进口文件’，那末构建东西会自动在你写代码的时刻帮你编译成可执行文件，并会自动修正script标签的src属性，这个可执行文件将会放在.tmp隐蔽文件夹中。
也许就是如许了，末了附上DEMO地点，下载以后可进入文件夹运转$npm install（由于gitignore的缘由，会把工程依靠的插件都屏蔽掉，不会上传，但是有package.json就不怕），以后运转$gulp serve就能够随意玩了。
