摘要：自定义前端构建工具生成器近期公司前端一直在做效率提升，流程优化，很荣幸这个担子落在了我身上，除了一些培训，分享之外，自己弄了个基于的前端构建环境生成器，在此分享给大家，觉得有用的请试用。，不出意料的话，构建环境已经生成完毕了。
自定义前端构建工具生成器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就可以随便玩了。
demo的github地址
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85766.html
摘要：非常的庞大，而且它是完全为设计而生的动效库。它运行于纯粹的之上，是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具，它支持大量的浏览器，只要它们支持和特性。可以通过安装吊炸天了，接近现实生活中的物理运动碰撞惯性动画库。 收集日期为2019-02-28，★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库，是许多基础动...
摘要：简介检查我们写的代码是否满足指定规则的静态代码检查工具。作用作为代码检查工具，其作用主要有以下几点统一代码风格规则，如缩进用几个空格是否用驼峰命名法来命名变量和函数名等。 1、简介： eslint检查我们写的 JavaScript 代码是否满足指定规则的静态代码检查工具。 ESHint 和 JSLint 也是静态代码检查工具，但伴随着发展，他们已经无法满足需求，于是ESlint 诞...
摘要：如何构建一个自己的框架为什么我们要去构建一个自己的框架可能绝大多数的人都会说市面上已经那么多的框架了，还造什么轮子。 showImg(https://segmentfault.com/img/bVNg9F?w=500&h=500); 如何构建一个自己的PHP框架 为什么我们要去构建一个自己的PHP框架？可能绝大多数的人都会说市面上已经那么多的框架了，还造什么轮子？。我的观点造轮子不是目...
摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。背后的故事本文是对于年之间世界发生的大事件的详细介绍，阐述了从提出到角力到流产的前世今生。 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎...
阅读 2741·2021-11-24 10:23
阅读 1152·2021-11-17 09:33
阅读 2502·2021-09-28 09:41
阅读 1408·2021-09-22 15:55
阅读 3640·2019-08-29 16:32
阅读 1902·2019-08-29 16:25
阅读 1055·2019-08-29 11:06
阅读 3420·2019-08-29 10:55
