grunt-workflow是一个帮助前端开发工程师简化工作的工具,它的主要功能是:
webserver
livereload,能保存文件的时,自动刷新浏览器.
自动编译sass
压缩图片
合并图片
添加文件注释
自动补全css3浏览器前缀
初始化项目目录结构及文件
支持ejs模板
安装相关软件安装nodejswindow安装地址,mac推荐通过brew安装brewinstallnode
安装grunt-clinpminstall-ggrunt-cli
安装grunt-initnpminstall-ggrunt-init
将当前git克隆到本地%USERPROFILE%\.grunt-init\(Mac平台~/.grunt-init/),如果没有.grunt-init目录可用mkdir.grunt-init命令创建
安装GraphicsMagick(gm),下载地址(Mac平台brewinstallGraphicsMagick)
安装PhantomJS,下载地址(Mac平台brewinstallphantomjs)
安装sassgeminstallsass
初始化新项目在项目目录下执行grunt-initlego(注意:项目目录要为空文件夹,不然会报错)
根据提示填写相关的内容
执行npminstall命令下载安装相关依赖
快速在当前文件夹打开命令行win7:首先按住Shift键,然后选择某文件夹后或在某文件夹中的空白处右键单击,快捷菜单中会多出“在此处打开命令窗口”,选择这个选项即可
Mac:安装gotoshell
建立软链接使用下面命令能避免每次在新项目开始前都要使用npminstall下载相关的grunt插件
window:-mklink/d.\node_modulesC:\Users\Administrator\Desktop\grunt_plugins\node_modules
mac:ln-s~/Documents/grunt_plugins/node_modules./node_modules(~/Documents/grunt_plugins/node_modules)目录是存放grunt插件的文件夹
项目目录结构└── src ├── _index.html ├── css │ └── lib ├── img ├── js │ └── lib ├── sass ├── partial ├── data └── slicehtml页面存放在src文件夹,支持ejs模板(见5)。
css存放在src/css文件夹,第三方的样式库放在src/css/lib
js存放在src/js文件夹,第三方的样式库放在src/js/lib
src/slice文件夹放需要合并的图片;若需要多张雪碧图,则自建子文件夹,一个子文件夹对应一张雪碧图,子文件名为雪碧图名(注意,需要替换雪碧图的css文件,切片使用background-image属性来引入,不使用background属性引入。)
ejs模板片段放在src/partial文件夹,模板数据放在src/data文件夹。配置数据统一在src/data/config.json指定(注意:没有配置的html页面不参与ejs渲染)。
注意:src/css/lib和src/js/lib里的文件是不会被压缩的。
任务项目安装好了相关的配置就可以在命令行下使用grunt任务
grunt默认打开一个webserver,查看的文件是在开发目录下,支持livereload,sass自动编译,ejs编译
gruntport:端口号指定端口打开一个webserver,查看的文件是在开发目录下,支持livereload,sass自动编译,ejs编译
gruntrelease生成发布文件,执行guntrelease生成一个dest的目录,检测样式文件里的本地资源引用,如果有无效引用则中断任务,否则执行后续任务:编译html,压缩css、js文件,自动生成sprit图片,替换css样式里的链接。dest里的文件是发布使用的。
gruntdest打开一个webserver,显示dest目录
gruntassets:提交注释提交dest里面的静态文件(css、js、img)到静态文件服务器,提交路径为%SVN_REMOTE_DIR%/<description>/<name>/<version>,详见注意事项。
gruntzip打包src和dest文件给技术。其中dest文件夹作如下处理:将dest/*.html的相对路径的静态资源引用替换为线上路径;若不需替换,资源路径换成绝对路径。
该命令在gruntrelease后执行,线上路径由包描述文件(见注意事项)指定。dest里的静态资源可通过gruntassets或手动上传到assets服务器。
可选配置配置文件:~/.grunt-init/config.json
IS_EXEC_CUSTOM_CMD是否启用初始化时执行默认命令,默认不启动。
LINK_SRC_NODE_MODULES建立node_modules软链接的源路径。(建议mac用户指定到~/.node_modules,win用户指定到%USERPROFILE%\.node_modules)
OPEN_APP初始化目录后启动APP打开当前项目。
注意事项提交到svn-work时(需手动提交),只上传配置文件Gruntfile.js、package.json和源码文件夹src/即可
提交到svn-assets时,需
说明:svn-assets提交路径为%SVN_REMOTE_DIR%/<description>/<name>/<version>,对应线上路径为https://assets.dwstatic.com/<description>/<name>/<version>
description,项目类型,取值:project、game、special
name,项目名,不要出现中文字符
version,项目版本,默认值:1.0.0
修改模板文件~/.grunt-init/lego/root/Gruntfile.js里面push_svn任务的用户信息
在grunt-initlego时注意以下字段的填写,或者在初始化后的package.json中修改对应字段
评论