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

 

  转载自： 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 时设定的名称，就等同于调出终端来操作。

 

 

brew  front-end  grunt  install  mac  node.js  npm  webstrom  workflow