Mac下安装 Homebrew 和 Nodejs 并使用 Grunt-Workflow 指引

Grunt Workflow 基于 Grunt，是一个跨平台的（Mac&Win）、优雅的、高效的、可定制的前端重构工作流程。能自动实现less编译成css，css压缩，雪碧图合并且在css中添加定位，一倍图二倍图随设备切换，以及资源发布等一系列流程，极大减轻了前端页面构建的工作负担。

本文仅供如我一般刚转移到Mac被坑无数的小白用户搭建环境使用流程所用，非小白请直接看Github上的项目页面

1. 安装 Homebrew

• 打开终端（相当于windows下的CMD，建议下载iTerm代替系统自带的终端），键入以下命令：

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• 
  安装过程中需要依照指示按回车，依照本身权限不同，也会要求输入用户密码，注意，对于passoword，输入时是没有反馈的，输完回车，流程会继续。  
• 安装完成后最好执行 brew update
• 运行 brew doctor
• 确认后，使用 export PATH="/usr/local/bin:$PATH" 将brew的路径添加到环境变量（windows的说法）
  接下来可以进行第二步了。

2. 安装 Node.js 和 Grunt

• Node.js 和 npm : brew install node
• Grunt : npm install -g grunt-cli

3. 安装两个工作流中需要依赖的库

• GraphicsMagick 图像处理库 : brew install GraphicsMagick
• Phantomjs 库 : brew install phantomjs
• 使用 

gm version

•  和 

phantomjs --version

4. 获取最新的 Grunt-Workflow 资源包

这一步请通过最上的链接获取，资源包结构文档中有写。

5. 使用 Grunt-Workflow 初始化项目

• 拷贝解压后的文件夹到项目目录  
• 修改文件夹名称为自己的项目名称
• 修改 package.json 中的 name 为项目名称，author 为开发者姓名
• 有需要也可修改Gruntfile.js，修改工作流程
• 在项目目录下运行 npm install
• 成功后，运行 

grunt

•  整个自动化流程开启，常用的 

grunt debug

•  能在本地看到所有优化整合流程走完之后（亦即资源发布到线上后的效果），如果配置了服务器信息，

grunt push

•  会将完整流程后的资源上传到服务器，

grunt zip

6. 配合webstrom实现无终端命令操作

如果不想每次操作的时候都需要调出终端，可以配合webstrom（或者JetBrains家其他IDE）中的 External Tools 在IDE中运行命令，具体的做法是：

• 打开 Preference 选择 External Tools，点击加号，开始 create tool
• 其他设置（名称，分组）暂且不表，可自行随意设置，要注意的是 Tool Settings 里的几个选项，Program 对应需要填写的，windows 下是 grunt.cmd 即可，mac 下需要的是 Grunt 所在路径，默认的是 /usr/local/bin/grunt ，如果不知道，也可以在终端中输入 which grunt
• 保存后，在IDE的项目列表里对该项目右键点击选择添加 External Tool 时设定的名称，就等同于调出终端来操作。