转载自: http://www.fhearts.me/2014/03/07/how-to-install-brew-and-nodejs-to-use-grunt-workflow-in-mac-the-junior-version/
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
以保证电脑上的Homebrew是最新版本。 -
运行
brew doctor
以确保系统已经能正常使用brew,如果出现任何建议,依照提示操作。 -
确认后,使用
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
是将资源打成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
来查找它的路径;Parameters 对应要填写输入的参数,grunt 本身不用写,grunt debug 命令则需要填写 debug ,依次类推;working directory 选择 $FileDir$ 即可。 - 保存后,在IDE的项目列表里对该项目右键点击选择添加 External Tool 时设定的名称,就等同于调出终端来操作。