1
Watch
1
Star
0
Fork
0
Issue
leilihuang
leilihuang
pushedAt 5 years ago

leilihuang/gruntUser

###为了方便大家工作搭建了这套环境,不足之处共同修改,共同进步 ###安装流程

绑定事件注意

  • PC端 js 点击事件绑定用on去绑定click,尽可能用id元素
  • H5移动端 js点击事件用on去绑定tap,尽可能用id元素

使用自动化框架的调整

  • PC端,原有的_v1.2css文件不动,修改样式还是在上面修改,修改之后执行合并样式合并命令 grunt concat:all (合并的配置文件参考page/concat.json配置), 新页面统一引用seo下面的css文件,样式编译命令参考下面,配置文件参考下面。
  • 当所有页面使用seo下面的样式的时候,页面上只需要引用合并最终得到的样式,所有的图片都放在seo下的img里面
  • 所有的页面js都写在gruntWork/app下面,action文件下面写入口,service文件下面写逻辑,参考已有的文件进行编写,最后得到的js在seo下

###配置文件信息

  • 样式合并的文件在pge/concat.json,要合并的样式参考,上面的配置
  • 样式编译的文件默认用less,在page/less.json,配置信息参考已有的
  • 可选sass样式编译的文件用sass,在page/sass.json,配置信息参考已有的(要修改配置文件)
  • 环境默认配置文件在app/config/jsmin.json文件

###常用命令

  • grunt clear .tmp文件夹下所有内容
  • grunt css:sass 编译sass样式 //需要在sass.json里面配置,参考例子
  • grunt css:less 编译less样式 //需要在marge.json里面配置,参考例子
  • grunt concat:all 合并_v1.2css下面的css文件,配置文件在page下面concat.jsond
  • grunt cssmin:main seo下的css压缩样式
  • grunt cssmin:test webapp/_v1.2css压缩到 css文件下
  • replace:testcss 替换图片路径,改为服务器路径
  • grunt release:sass 编译压缩样式,拷贝图片到.tmp文件目录下(不建议使用)
  • grunt release:less 编译压缩样式,拷贝图片到.tmp文件目录下
  • grunt js 自动合并js //action为合并js入口 , service下写逻辑,同一个页面逻辑放到同一个文件夹下
  • grunt jsmin:main seo下的压缩js
  • grunt jsmin:test webapp/_v1.2js压缩到 js文件下
  • grunt watch 实时监控所有代码,当代码改变时,自动重新编译
  • grunt img:min 压缩图片
  • grunt html:min 压缩html
  • grunt pro 一键编译,合并,压缩
  • grunt css:pro 一键编译,合并,压缩
  • grunt commit:pro 上传到ftp服务器

###操作流程

  • 先编译less============================================================(grunt css:less)
  • 合并js================================================================(grunt js)
  • 开启实时监控命令,关闭实时监控按ctrl+c======================================================(grunt watch)
  • 页面开发完毕,执行压缩命令============================================(grunt pro)
  • 上传到ftp服务器=======================================================(grunt commit:pro )
  • 图片手动上传到ftp服务器

上传资源 1:开发环境带上分支号,默认为s2 路径配置在app/config/jsmin.json文件中 "slotTest":"", "slotDev":"s2/", "slotPro":"", 2:线上环境默认是根目录

###环境部署 1:开发环境执行 grunt dev 编译js css 拷贝图片到.tmp目录下,替换样式背景图片url路径 //路径配置在app/config/jsmin.json文件中 分别对应static下的devUrl grunt commit:dev 将.tmp目录下的所有文件放到开发服务器上

2:测试环境执行 grunt test 编译js css 拷贝图片到.tmp目录下,替换样式背景图片url路径 //路径配置在app/config/jsmin.json文件中 分别对应static下的testUrl grunt commit:test 将.tmp目录下的所有文件放到测试服务器上

3:线上环境执行 grunt pro 编译js css 拷贝图片到.tmp目录下,替换样式背景图片url路径 //路径配置在app/config/jsmin.json文件中 分别对应static下的provUrl grunt commit:pro 将.tmp目录下的所有文件放到开发服务器上,让运维同步更新目录文件,将代码放到线上环境

ucloud ads