自定义前端构建工具生成器 generator-pg-cloud

自定义前端构建工具生成器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，不出意料的话，构建环境已经生成完毕了。现在让我们看看目录里面有些啥东西：

1. app文件夹：我们就在这里面写代码
2. bower_components文件夹：前端包管理器的文件夹，不知道bower的自己百度吧
3. node_modules文件夹：不用多说，环境所依赖的node插件
4. test文件夹：单元测试框架mocha的文件夹
5. tmp文件夹：browserify编译JS文件的存储文件夹
6. gitignore：git提交忽略列表，像node_modules这类巨大的文件夹是不会提交的
7. bower.json：bower的配置文件
8. package.json：npm包管理配置文件
9. 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文件中的一些规范：

1. build:注释标签，放在build标签中的内容，既表示告诉构建工具，这些JS，或者CSS文件是需要压缩的。
2. bower:注释标签,bower管理器安装的前端插件都将会自动注入到这个标签中。
3. 如果你希望使用nodejs的require,或者想要使用JSX React,或者是想要使用上加入属性browserify=‘需要编译的JS入口文件’，那么构建工具会自动在你写代码的时候帮你编译成可执行文件，并会自动修改script标签的src属性，这个可执行文件将会放在.tmp隐藏文件夹中。

大概就是这样了，最后附上DEMO地址，下载之后可进入文件夹运行$npm install（因为gitignore的原因，会把工程依赖的插件都屏蔽掉，不会上传，但是有package.json就不怕），之后运行$gulp serve就可以随便玩了。

demo的github地址