###为了方便大家工作搭建了这套环境,不足之处共同修改,共同进步 ###安装流程 下载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目录下的所有文件放到开发服务器上,让运维同步更新目录文件,将代码放到线上环境
leilihuang/gruntUser
###为了方便大家工作搭建了这套环境,不足之处共同修改,共同进步 ###安装流程
使用自动化框架的调整
###配置文件信息
###常用命令
###操作流程
###环境部署 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目录下的所有文件放到开发服务器上,让运维同步更新目录文件,将代码放到线上环境