mcake公司官网活动维护

*************************
mcake公司官网活动维护
*************************

项目地址：https://github.com/nodejs-team/

PC端：https://github.com/nodejs-team/evtGulp

Wap端：https://github.com/nodejs-team/mcake-activity

软件：webstrom gulp压缩工具 nodejs

项目资源的下载：

->git clone git@....(项目所在地址)
例如： git clone git@github.com:nodejs-team/mcake-activity.git (要使用ssh路径)

->npm install (安装所依赖的资源)

项目目录：
src:活动目录
dist：压缩后的活动目录
config.json:配置活动地址及目录

打包方法：gulp->build
==============================================================================================

模板的使用方法：

模板中的注释，不能删除。这是用来指示压缩后合并生成的文件。

css样式的引用

头部：<div id="evt_header"> ... </div>

loading图片加载：<div id="evt_loading"> ... </div>

主体部分：<div id="evt_container"> ..【需要自己修改的部分】.. </div>

尾部：<div id="evt_footer"> ... </div>

js加载：前两个js不需要修改，最后一个js是自己需要简单修改的，有时也可以不用修改。

动画的使用方法：（动画已经对浏览器进行了判断，低版本的浏览器将直接使用jquery动画）

动画的添加：data-anim="fade-in"
动画延时：data-dalay="4"
滚动到一定位置开始动画：data-ajust

 

js修改：
1.图片资源的配置，可以通过ResDeport工具进行自动生成。
2.方法：loadRsorse:执行动画，其中先计算图片的加载，然后进入页面。
3.correctPNG，对无法识别png图片的低版本浏览器进行了兼容。

 

==============================================================================================

 

【mcake 官网】https://github.com/nodejs-team
************************************************

一、pc端活动：https://github.com/nodejs-team/evtGulp

首先从github上下载新项目数据：（克隆）
-> git clone git@github.com:nodejs-team/mcake-activity.git (要使用ssh路径)

如果第一次使用项目时（刚从GitHub上下载下来的包文件，没有加载node_modules），

方法一、在webstorm里面的termnal里面执行以下npm install 或者cnpm install 下载所依赖的包（cnpm install淘宝npm速度快
点）
方法二、可以在项目所在目录的路径栏里直接输入cmd,调取cmd命令行。此时，会自动定位到相对应的文件夹，然后输入npm
install 或者cnpm install 来下载所依赖的包

src:项目目录

dist:打包压缩后的目录

（1）.在src目录下手动复制一个项目出来，设置一个空框架
"tinypngapi": "UlHtl4xh4OPWCVBj67bQWE78Gi9mis3P", //图片压缩tinypng接口密匙（tinypng.com绑定邮箱，获取密
匙）
"projectName": "newYear", 项目名称
"revPrefix": "http://edm.mcake.com/shuxy/2016/" 服务器地址

（2）.开启开发实时预览gulp->default (双击) 自动启动watch监听事件
如果开启watch监听，sass文件会被自动编译成css文件，可以直接修改sass文件，然后直接引用生成好的css文件

（3）.打包数据gulp->build （此处将会全部压缩）

（4）.上传到GitHub服务器（使用git命令，注意已经设置好git与GitHub服务器的链接，用户名密码）
-> git add .
-> git commit -m "add test-wap"
-> git push origin master 上传并同步分支

（5）.git删除操作三部曲：
-> rm -r app/test-wap/ 删除文件夹
-> git add . 添加所有（.表示所有）
-> git commit -m "delete test-wap" 添加注释
-> git push origin master push同步上传分支

===============================================================================================

二、wap端活动：

https://github.com/nodejs-team/mcake-activity

首先从github上下载新项目数据：（克隆）
-> git clone git@github.com:nodejs-team/mcake-activity.git (要使用ssh路径)

第一次使用项目时，要现在webstorm里面的termnal里面执行以下npm install 下载所依赖的包（cnpm install淘宝npm速度快点）

app:项目目录
build:打包压缩后的目录

1.新建项目：

（1）.【复制文件】执行gulp init任务 自动完成生成目录（活动框架）
（方法：右键点击gulpfile.js->点击show gulp tasks->init）

（2）.配置padkage.json **********
"projectName": "test-wap", 项目名称
"basePath": "http://edm.mcake.com/weifengwang/", 网站地址及项目目录
"tinypngKey": "UlHtl4xh4OPWCVBj67bQWE78Gi9mis3P", tinypngKey密匙在tinypng.com绑定邮箱，获取密匙

（3）.自己编辑模板里面的内容

（4）.实时预览项目：gulp->develop (双击) 自动启动watch监听事件

（如果自动刷新启动不了，可以在gulpfile.js里面设置）
gulp.task('server', function() {
gulp.src(buildConfig.server.path)
.pipe(webserver({
host: getIP(),
directoryListing: {enable:true, path: buildConfig.server.path},
livereload: true, ******【此处设置为true】
open: '/'+ projectName +'/index.html',
port: buildConfig.server.port || 8001
}));
});
（5）.压缩图片：gulp->tinypng（这里调用的是tinypng的接口） (这里要设置自己的pngkey密匙。可以在tinypng.com上发送邮
件，获取密匙)

（6）.开发完成后，可通过gulp->build进行打包(双击)
这里压缩的只有js 和css

（7）.上传到GitHub服务器（使用git命令，注意已经设置好git与GitHub服务器的链接，用户名密码）
-> git add .
-> git commit -m "add test-wap"
-> git push origin master

（8）.git删除操作三部曲：
-> rm -r app/test-wap/ 删除文件夹
-> git add . 添加所有（.表示所有）
-> git commit -m "delete test-wap" 添加注释
-> git push origin master push同步上传分支