###为了方便大家工作搭建了这套环境,不足之处共同修改,共同进步 ###安装流程
- 下载node.js 地址https://nodejs.org/ , 安装完成后验证 node -v
- 下载grunt 安装命令 npm install grunt-cli -g ,详细安装教程http://jingyan.baidu.com/article/93f9803fe354ede0e46f5585.html
- 在项目目录下执行 npm install 下载环境所需要的grunt插件
- sass编译需要配置ruby和sass环境,ruby下载地址:百度一下就有哈,ruby安装详细教程:http://jingyan.baidu.com/article/48b558e33558ac7f38c09aee.html
- sass安装查看sass官网详细教程http://www.w3cplus.com/sassguide/install.html
绑定事件注意
- 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目录下的所有文件放到开发服务器上,让运维同步更新目录文件,将代码放到线上环境