转载自: 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 时设定的名称,就等同于调出终端来操作。
相关推荐
如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-php2html --save-dev 插件安装完成后,可以使用...
Homebrew是Mac Os的包管理工具,相当于Redhat Linux(Centos/RHEL/Fedora)的yum或者Debian Linux(Debian/Ubuntu)的apt-get。这篇文章主要介绍了Mac安装Homebrew的那些事儿 ,需要的朋友可以参考下
grunt-cli 安装 $ npm install -g grunt-cli 初始化项目 $ cd [path_to_projekt_dir] $ npm init package.json 示例 { "name" : "grunt-sample" , "version" : "1.0.0" , "description" : "grunt base sample....
macbook安装homebrew,使用国内的源,官方提供的源如果安装失败,可以尝试一下,自己整理的
二、安装nodejs 运行brew install node 即可,但是这样安装的node是最新node,本人安装后是node6.X,node6.X对一些就模块已经不支持了,比如graceful-fs,导致安装一些包的时候,无法运行,就会出现类似 (node:7844)...
homebrew-aws-cfn-template-flip-master.rar
Homebrew 国内安装脚本 Homebrew 国内安装脚本 Homebrew 国内安装脚本 Homebrew 国内安装脚本 Homebrew 国内安装脚本 Homebrew 国内安装脚本 Homebrew 国内安装脚本 Homebrew 国内安装脚本 Homebrew 国内...
最近在安装homebrew的时候,遇到各种坑,网上很多资源也和我遇到的 不一样,这次正好搞了一下,下载文件,直接 /bin/bash brew_install.sh 即可,文件内镜像已经更换成国内的。
资源分类:Python库 所属语言:Python 使用前提:需要解压 资源全名:homebrew_pypi_poet-0.5.0-py2.py3-none-any.whl 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
homebrew-aws-session-manager-plugin:使用Homebrew安装AWS Session Manager插件
NodeJS-API-样板永远在进行中:construction_worker:开始使用建立这个样板使用webpack 3来编译代码。... 安装Mongodb 使用Homebrew,您可以只运行brew install mongodb然后在brew services start mongodb 。乌鸦日
####Solution 使用 Mac OSX安装并将 BMP 图像转换为 EPS 格式。 ####脚步第 1 步:在 Mac OSX 上安装 Homebrew ruby -e " $( curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install )...
Homebrew 安装与常用命令 文章目录Homebrew 安装与常用命令1.安装Homebrew2.更换Homebrew本身的源3.更换brew Formula 的源4.Homebrew常用命令5.Homebrew-Cask(桶–图形界面软件) 安装与常用命令6.Homebrew-Cask 常用...
通过自制软件安装 。 安装 brew tap aoki/redis-cli brew update && brew doctor brew install redis-cli 凹凸公式 ./bump ${VERSION} > redis-cli.rb make link brew info redis-cli brew uninstall redis-cli ...
mac os 10.15.5下 使用homebrew 安装的opencv4 ,文件名显示2只是因为是我后面改的。我在QT5.14.2下使用正常
用法这些文件提供了一种在Mac计算机上安装应用程序的方法: 新安装的操作系统没有互联网连接新购买的在网络上节省了重复下载文件的麻烦应用名称:crelist.sh-创建列表描述:创建一个已安装的自制和自制文件列表,并...
公式版本Formula将安装AWS Okta Keyman v0.8.4如何安装此公式? brew tap nathan-v/aws-okta-keyman ,然后brew install aws_okta_keyman 。 或通过URL安装(不会接收更新): brew install ...
WRF-Cake自酿brew tap wrf-cmake/wrfbrew install wrf-cmake -v ... 要减少内存使用量,请设置HOMEBREW_MAKE_JOBS=1环境变量。 安装后,您可以在Homebrew的地窖中找到WRF-CMake: ls -al $( brew --cellar ) /wrf-cmake
该存储库包含使用TypeScript的nodeJS项目的模板。 它还具有Express和dotEnv的某些依赖项。 NodeJS模板项目此存储库包含使用TypeScript的nodeJS项目的模板。 它还具有Express和dotEnv的某些依赖项。 :rocket:入门:...