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

时间 2019-12-04

原文原文链接

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

近期公司前端一直在作效率提高，流程优化，很荣幸这个担子落在了我身上，除了一些培训，分享以外，本身弄了个基于yeoman的前端构建环境生成器，在此分享给你们，以为有用的请试用。css

好了，言归正传，这个生成器的名字如标题所示，叫作generator-pg-cloud,后面的表明我在公司所属的部门，你们就不要care了。最新版本的应该是1.4.3版本了，之间经历过不少次各类大改小改，如今还算基本满意吧。html

准备工做：请准备好nodejs环境，安装yeoman,这是最基本的，若是想使用单元测试，请安装mocha,不知道如何安装的自行百度，再也不赘述。前端

YES!,如今该本文的正角儿出场了，$npm install -g generator-pg-cloud,若是没有报错，相信生成器已经安装在你电脑上的nodejs根目录了。node

如今让咱们新建一个工程目录，$mkdir demo && cd demo，进入demo文件夹以后，运行$yo,若是在选项中没有出现PG CLOUD，那么运行$npm link generator-pg-cloud将生成器连接进工程环境。也能够直接运行$yo pg-cloud直接安装，安装过程当中会出如今一些选项提示，按照本身的需求来就行了。jquery

OK，不出意料的话，构建环境已经生成完毕了。如今让咱们看看目录里面有些啥东西：git

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 提供以下功能：github

$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目录，就是你的部署目录了。npm

另外讲一讲如何html文件中的一些规范：json

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

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

demo的github地址