generator-4399cli-hd v1.2.7
###1、目标 提高运行性能:资源压缩 + 合并 + 依赖管理
提高开发效率:开发模式 + 测试模式 + 上线模式
提高代码维护:模块化 + 代码检测(待补全)
###2、环境准备
(1)测试空间相关域名,加到host即可 (见内部wiki)
(2)安装node环境,版本6.0以上。http://nodejs.cn/ (https://npm.taobao.org/mirrors/node/v6.9.5/ 建议v6.9.5,过高版本部分api废弃)
(3)安装cnpm :在命令行执行:npm install -g cnpm --registry=https://registry.npm.taobao.org
(4)全局安装gulp 以及yeoman,分别执行 cnpm install -g gulp,cnpm install -g yo
(5)全局安装脚手架4399cli-hd ,执行 cnpm install -g generator-4399cli-hd
(6)全局安装脚手架依赖包,在d盘新建 generator/4399cli-hd 文件夹(不能建于其他目录,若需要建于其他自定义目录请联系作者)。
此目录下执行 yo 4399cli-hd --access=generator,再执行cnpm install 。
(7)由于WebStorm或PhpStorm每次启动都会基于当前目录创立文件索引,而node_modules文件较多,会引起系统卡顿,所以需要设置忽略node_modules文件夹(File -> Settings -> Editor -> File Types)
###3、开发前准备 (1)将重构包拷贝至开发目录下,并执行 yo 4399cli-hd 下载脚手架,得到如下目录。 (gulpfile.js ,package.json , gulp等都利用软链接指向 D:\generator\4399cli-hd ,若修改则全局生效。可在 D:\generator\4399cli-hd 重复执行 【环境准备(6)】以刷新依赖包)
(2)工具识别gulp命令
(3)配置 build / config.json (可手动配置,亦可直接执行 gulp init 自动初始化)
{
"cid": 208650, // 对应活动后台的id(需手动录入,上线前进行录入即可)
"name": "“测测你的4399战斗属性”联合活动", // 对应cms后台的栏目名(需手动录入)
"game": "web", // 对应打点的obj_json.game(可自动获取)
"cmsChannel": "2017fighting", // 对应cms后台的栏目名(可自动获取)
"cmsTemplate": "2017fighting.html", // 对应cms后台的模板名(可自动获取)
"entry": "entry", // js入口(无需改)
"tsIgnore": [ // js合并时,忽略的文件(无需改,可按需增加)
"config*",
"jq*"
]
}
(ps:若栏目重复,将读取已存在栏目信息)
(4)命令行执行【gulp init】或 点击【init选项】
(5)初始化 entry.js 入口文件(仅用于引入其他模块)
define(function(require, exports, module){
require('main'); // 重构的模块。 (以main.js命名则main ,以index.js命名则index)
console.log('初始化成功');
// 下面是自己的逻辑代码 // require('login'); 登录模块 // require('data'); 数据模块 // require('action'); 事件行为模块 // require('utils'); 工具模块
});
(6)命令行执行【gulp brower:local】或 点击【brower:local】选项,即可进入开发模式(浏览器自动刷新 + 文件识别自动编译)
###4、测试模式
(1)推送html模板:命令行执行 【gulp cms:make】 或 点击 【cms:make 选项】
(2)推送资源文件:命令行执行 【gulp release:cover】 或 点击 【release:cover 选项】
(3)预览测试地址:命令行执行 【gulp brower:dev】 或 点击 【brower:dev 选项】
5、上线模式
(1)推送html模板:命令行执行 【gulp cms:push】 或 点击 【cms:push 选项】
(2)推送cdn:crs系统进行推送(后续将接入自动化命令)
(3)预览测试地址:命令行执行 【gulp brower:pro】 或 点击 【brower:pro 选项】
###5、技术元素 自动化基于 gulp + node + yo
###6、more 更多细节见内部wiki
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago