github文件克隆，拉去，上传 mcake活动维护，前端自动化，mcake活动维护
项目地址：https://github.com/nodejs-team/ 是公开的team账号，没有密码。 工作的时候需要设置自己的账号的ssh公钥，方便后续的数据同步
PC端：https://github.com/nodejs-team/evtGulp
Wap端：https://github.com/nodejs-team/mcake-activity
【安装开发环境】：
nodejs 4.4.4版本 ， nvm（node版本管理工具），webstorm编辑器， npm包管理工具，TextureMerger（动画制作），ResDepot（资源管理），git bash命令行工具，
一、
1.项目资源的下载：
-> git clone git@....(项目所在地址)
例如： git clone git@github.com:nodejs-team/mcake-activity.git (要使用ssh路径)
第一次配置的时候，会提示这个，也就是说需要先设置公钥
git 上传命令【舒鲜阳】里有配置ssh公钥 的方法：https://www.cnblogs.com/shimily/articles/6594748.html
【配置步骤】：ssh公式配置：https://www.cnblogs.com/shimily/articles/6594748.html
-> npm install (安装所依赖的资源)
2.项目目录：
src:活动目录
dist：压缩后的活动目录
config.json:配置活动地址及目录
3.配置config.json
"tinypngapi": "UlHtl4xh4OPWCVBj67bQWE78Gi9mis3P", //图片压缩tinypng接口密匙（tinypng.com绑定邮箱，获取密匙）
"projectName": "newYear", 项目名称
"revPrefix": "http://edm.mcake.com/fangli/2017/" 服务器地址
4.任务启动
开启开发实时预览:（右击gulpfile.js->show gulp tasks）gulp->default (双击) 自动启动watch监听事件
如果开启watch监听，sass文件会被自动编译成css文件，可以直接修改sass文件，然后直接引用生成好的css文件
4.打包方法：gulp->build （只需要讲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-delay-adjust="1.2" 滚动到一定位置开始动画
data-offset="120"
js修改：
1.图片资源的配置，可以通过ResDeport工具进行自动生成。
2.方法：loadRsorse:执行动画，其中先计算图片的加载，然后进入页面。
3.correctPNG，对无法识别png图片的低版本浏览器进行了兼容。
=======================模板介绍end=======================================
*****************活动维护方法步骤：*******************************
【mcake 官网】https://github.com/nodejs-team
一、【============pc端活动==================】：
项目github地址：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）.配置config.json
"tinypngapi": "UlHtl4xh4OPWCVBj67bQWE78Gi9mis3P", //图片压缩tinypng接口密匙（tinypng.com绑定邮箱，获取密匙）
"projectName": "newYear", 项目名称
"revPrefix": "http://edm.mcake.com/fangli/2017/" 服务器地址
（2）.gulp-> create 创建项目 （方法：右键点击gulpfile.js->点击show gulp tasks->create ）
（3）.开启开发实时预览:（右击gulpfile.js->show gulp tasks）gulp->default (双击) 自动启动watch监听事件
如果开启watch监听，sass文件会被自动编译成css文件，可以直接修改sass文件，然后直接引用生成好的css文件
（4）.打包数据gulp->build （此处将会全部压缩）
（5）.上传到GitHub服务器（使用git命令，注意已经设置好git与GitHub服务器的链接，用户名密码）
-> git add .
-> git commit -m "add test-wap"
-> git push origin master 上传并同步分支
（6）.git删除操作三部曲：
-> rm -r app/test-wap/ 删除文件夹
-> git add . 添加所有（.表示所有）
-> git commit -m "delete test-wap" 添加注释
-> git push origin master push同步上传分支
【如果多人合作需要先拉取，再上传： git pull origin master 从远程库拉取更新到本地】
二、【===============wap端活动===============】：
项目github地址：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）.配置padkage.json **********
"projectName": "test-wap", 项目名称
"basePath": "http://edm.mcake.com/weifengwang/", 网站地址及项目目录
"tinypngKey": "UlHtl4xh4OPWCVBj67bQWE78Gi9mis3P", tinypngKey密匙在tinypng.com绑定邮箱，获取密匙
（2）.【复制文件】执行gulp init任务 创建项目
（方法：右键点击gulpfile.js->点击show gulp tasks->init）
（3）.自己编辑模板里面的内容
（4）.实时预览项目：（右击gulpfile.js->show gulp tasks） 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同步上传分支
【如果多人合作需要先拉取，再上传： git pull origin master 从远程库拉取更新到本地】
===============================================================================================
二、【git命令】
初次向GitHub上传项目：
git init
git add README.md
git commit -m "first commit"
git remote add origin git@github.com:shimilygood/Home-wanglei2016.git
git push -u origin master
三、【git上传方法】 使用git上传到github服务器的方法
第一步：
git remote add origin url //https://github.com/nodejs-team/evtGulp.git
第二步：
git add . //"."表示所有目录，也可跟目录名或文件名
第三步：
git commit -m "add src" //将目录提交到本地并加版本说明
第四步：
git push origin master //将目录提交到远程仓库
git clone git@github.com:nodejs-team/mcake-activity.git (要使用ssh路径)
git pull origin master 从远程库拉取更新到本地
五、【动画制作】：
1.通过textureMerger【导出】序列帧合成的图片和对应的json
2.引入MovieClip库文件
<script type="text/javascript" src="MovieClip/ec_main.js"></script>
3.设置动画节点<div id="anim_float"></div>
4.把json里的数据写成js对象格式 {"duration":2 两张图片的间隔时间。如果是从psd里面看到的是0.2，此处应该写0.2*20=4，写为4
径替换的方法
*/
</script>
5.new一个对象
new MovieClip("图片路径", 图片配置, 'mc', '节点').gotoAndPlay(1,-1); //-1循环播放 1，2，3播放次数
----------------------------------------------------------------------------------------------------------
工具：ResDepot资源管理工具 TextureMerger序列帧动画
,"duration":10
<script>
$(function(){
//图片配置
var config = {
"bd4":{"x":131,"y":0,"w":129,"h":264,"offX":0,"offY":0,"sourceW":129,"sourceH":264,duration:3},
"bd1":{"x":0,"y":532,"w":129,"h":264,"offX":0,"offY":0,"sourceW":129,"sourceH":264,duration:3},
"bd2":{"x":0,"y":266,"w":129,"h":264,"offX":0,"offY":0,"sourceW":129,"sourceH":264,duration:3},
"bd3":{"x":0,"y":0,"w":129,"h":264,"offX":0,"offY":0,"sourceW":129,"sourceH":264,duration:3}
};
// MovieClip 可以通过duration控制两张图片轮播的速度。
new MovieClip("images/float.png", config, 'mc', 'anim_float').gotoAndPlay(1,-1);
})
/*逐帧动画制作方法
1.通过textureMerger导出合成的图片和对应的json
2.引入MovieClip库文件
3.设置动画节点<div id="anim_float"></div>
4.把json里的数据携程js对象格式 {duration:3两张图片的间隔时间。如果是从psd里面看到的是0.2，此处应该写0.2*20=4，写为4
5.new一个对象
new MovieClip("图片路径", 图片配置, 'mc', '节点').gotoAndPlay(1,-1); //-1循环播放 1，2，3播放次数
*/
/**
data-delay="1.2" 适用于第一屏，动画延迟，第一屏之外的，会默认为0
data-delay-adjust="0.8"元素从底部出现在屏幕后0.8秒后开始动画
data-offset="100" 元素在从底部出来100px之后开始动画。适用于透明元素上方有大部分空白的元素
*/
</script>
浙公网安备 33010602011771号