grunt-workflow 多玩前端工作流 项目简介
grunt-workflow 是一个帮助前端开发工程师简化工作的工具，它的主要功能是：webserver livereload，能保存文件的时，自动刷新浏览器. 自动编译sass 压缩图片 合并图片 添加文件注释 自动补全css3浏览器前缀 初始化项目目录结构及文件 支持ejs模板安装相关软件安装 nodejs window 安装地址 ， mac 推荐通过brew安装brew install node 安装 grunt-cli npm install -g grunt-cli 安装 grunt-init npm install -g grunt-init 将当前git克隆到本地%USERPROFILE%\.grunt-init\（Mac平台 ~/.grunt-init/），如果没有.grunt-init目录可用mkdir .grunt-init命令创建 安装 Graphics Magick(gm)，下载地址 (Mac平台 brew install GraphicsMagick) 安装 PhantomJS，下载地址 (Mac平台 brew install phantomjs) 安装 sass gem install sass初始化新项目在项目目录下执行 grunt-init lego (注意：项目目录要为空文件夹，不然会报错) 根据提示填写相关的内容 执行 npm install 命令下载安装相关依赖快速在当前文件夹打开命令行win7:首先按住Shift键，然后选择某文件夹后或在某文件夹中的空白处右键单击，快捷菜单中会多出“在此处打开命令窗口”，选择这个选项即可 Mac:安装 gotoshell建立软链接使用下面命令能避免每次在新项目开始前都要使用 npm install 下载相关的grunt插件window: - mklink /d .\node_modules C:\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编译grunt port:端口号指定端口打开一个webserver，查看的文件是在开发目录下，支持livereload，sass自动编译，ejs编译grunt release生成发布文件，执行gunt release生成一个dest的目录，检测样式文件里的本地资源引用，如果有无效引用则中断任务，否则执行后续任务：编译html，压缩css、js文件，自动生成sprit图片，替换css样式里的链接。dest里的文件是发布使用的。grunt dest打开一个webserver，显示dest目录grunt assets:提交注释提交dest里面的静态文件（css、js、img）到静态文件服务器，提交路径为%SVN_REMOTE_DIR%/<description>/<name>/<version>，详见注意事项。grunt zip打包src和dest文件给技术。其中dest文件夹作如下处理：将 dest/*.html 的 相对路径的静态资源 引用替换为线上路径；若不需替换，资源路径换成 绝对路径 。该命令在grunt release后执行，线上路径由 包描述文件（见注意事项） 指定。dest里的静态资源可通过grunt assets或手动上传到assets服务器。可选配置配置文件： ~/.grunt-init/config.jsonIS_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>，对应线上路径为 http://assets.dwstatic.com/<description>/<name>/<version>description，项目类型，取值：project、game、special name，项目名，不要出现中文字符 version，项目版本，默认值：1.0.0 修改模板文件~/.grunt-init/lego/root/Gruntfile.js里面push_svn任务的用户信息 在grunt-init lego时注意以下字段的填写，或者在初始化后的 package.json 中修改对应字段
├── _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编译grunt port:端口号指定端口打开一个webserver，查看的文件是在开发目录下，支持livereload，sass自动编译，ejs编译grunt release生成发布文件，执行gunt release生成一个dest的目录，检测样式文件里的本地资源引用，如果有无效引用则中断任务，否则执行后续任务：编译html，压缩css、js文件，自动生成sprit图片，替换css样式里的链接。dest里的文件是发布使用的。grunt dest打开一个webserver，显示dest目录grunt assets:提交注释提交dest里面的静态文件（css、js、img）到静态文件服务器，提交路径为%SVN_REMOTE_DIR%/<description>/<name>/<version>，详见注意事项。grunt zip打包src和dest文件给技术。其中dest文件夹作如下处理：将 dest/*.html 的 相对路径的静态资源 引用替换为线上路径；若不需替换，资源路径换成 绝对路径 。该命令在grunt release后执行，线上路径由 包描述文件（见注意事项） 指定。dest里的静态资源可通过grunt assets或手动上传到assets服务器。可选配置配置文件： ~/.grunt-init/config.jsonIS_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>，对应线上路径为 http://assets.dwstatic.com/<description>/<name>/<version>description，项目类型，取值：project、game、special name，项目名，不要出现中文字符 version，项目版本，默认值：1.0.0 修改模板文件~/.grunt-init/lego/root/Gruntfile.js里面push_svn任务的用户信息 在grunt-init lego时注意以下字段的填写，或者在初始化后的 package.json 中修改对应字段