1.2.7 • Published 7 years ago

generator-4399cli-hd v1.2.7

Weekly downloads
3
License
MIT
Repository
github
Last release
7 years ago

###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

1.2.7

7 years ago

1.2.6

7 years ago

1.2.5

7 years ago

1.2.4

7 years ago

1.2.3

8 years ago

1.2.2

8 years ago

1.2.1

8 years ago

1.2.0

8 years ago

1.1.9

8 years ago

1.1.8

8 years ago

1.1.7

8 years ago

1.1.6

8 years ago

1.1.5

8 years ago

1.1.4

8 years ago

1.1.3

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.9

8 years ago

1.0.8

8 years ago

1.0.7

8 years ago

1.0.6

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago