`
hongtoushizi
  • 浏览: 376672 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

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

 

分享到:
评论

相关推荐

    mac下的nodejs环境安装的步骤

    总的来说,Node.js在Mac系统下的安装过程大致可以分为几个步骤:准备Homebrew环境、通过Homebrew安装Node.js与npm、验证安装、配置国内镜像源。通过以上步骤,用户便可以成功搭建起适合自己的Node.js开发环境,开始...

    macbook pro/air m1 nodejs 安装

    如果你不想使用Homebrew,也可以选择手动下载Node.js的源代码并进行编译安装。这种方式虽然较为复杂,但可以更好地控制安装过程,并且适用于那些希望深入了解整个流程的开发者。 1. **下载源代码**:访问Node.js的...

    NodeJS14安装保姆教程

    你可以使用npm安装、卸载和管理依赖库,例如创建一个新的项目并初始化package.json文件: ``` mkdir myproject cd myproject npm init ``` 以上就是Node.js 14的详细安装教程,无论你是前端开发者还是对服务器...

    homebrew-aws-cfn-template-flip-master.rar

    Homebrew是MacOS系统下的一个包管理器,通常用来安装和管理命令行工具。而这个项目是将其作为一个Homebrew配方,方便用户通过Homebrew来安装和维护这个CloudFormation模板转换工具。 【标签】"源码" 指出这个压缩包...

    grunt-php2html:Grunt插件可将php编译为html

    如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装和使用Grunt插件。 熟悉该过程后,可以使用以下命令安装此插件: npm install grunt-php2html --save-dev 插件安装完成后,可以使用...

    nodejs安装及环境配置-.zip

    1. 安装模块:在项目目录下,使用`npm install <module-name>`命令安装模块,例如`npm install express`安装 Express 框架。 2. 创建项目:使用`npm init`命令初始化一个新的Node.js项目,会生成一个`package.json`...

    Homebrew-4.1.4

    macos版Homebrew-4.1.4

    grunt-sample:咕噜声基础样本

    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

    macbook安装homebrew,使用国内的源,官方提供的源如果安装失败,可以尝试一下,自己整理的

    Mac安装Homebrew的那些事儿

    Homebrew是Mac Os的包管理工具,相当于Redhat Linux(Centos/RHEL/Fedora)的yum或者Debian Linux(Debian/Ubuntu)的apt-get。这篇文章主要介绍了Mac安装Homebrew的那些事儿 ,需要的朋友可以参考下

    brew-4.1.14

    Homebrew,通常被称为“Mac上的套件管理器”,是一个开源项目,用于简化在Apple macOS操作系统上安装软件的过程。它的最新版本是4.1.14,这个版本包含了几个重要的组件和可能的更新。 首先,让我们深入理解Homebrew...

    Mac下通过brew安装指定版本的nodejs教程

    在Mac操作系统中,管理软件包通常使用Homebrew(也称为brew),这是一个强大的包管理器,可以简化安装和更新各种开源软件的过程。本文将详细介绍如何使用Homebrew来安装指定版本的Node.js,因为默认安装的Node.js...

    mac 下 使用homebrew 安装的opencv4 ,文件名显示2只是因为是我后面改的

    在Mac OS 10.15.5系统中,安装OpenCV库通常会选择使用Homebrew这一包管理器,因为它是方便、快捷且流行的工具,特别适合处理开源软件的安装问题。OpenCV4是一个强大的计算机视觉库,广泛应用于图像处理、机器学习...

    对mac下nodejs 更新到最新版本的最新方法(推荐)

    在macOS操作系统下更新Node.js至最新版本的推荐方法主要涉及到使用npm(Node.js的包管理工具)来安装一个名为n的模块,该模块可以帮助我们更简便地管理Node.js的版本。下面是详细的操作步骤和知识点: ### 前提条件...

    Homebrew安装包

    1. **方便快捷**:通过命令行简单操作,省去了手动下载、解压、配置和安装的繁琐步骤。 2. **自动化依赖管理**:Homebrew自动处理软件的依赖关系,确保所有必要的组件都已就绪。 3. **社区支持**:由于其开源性质...

    Homebrew 国内安装脚本.zip

    Homebrew 国内安装脚本 Homebrew 国内安装脚本 Homebrew 国内安装脚本 Homebrew 国内安装脚本 Homebrew 国内安装脚本 Homebrew 国内安装脚本 Homebrew 国内安装脚本 Homebrew 国内安装脚本 Homebrew 国内...

    nodejs完整安装教程(带软件)

    Node.js是一款基于Chrome V8...正确安装并理解其工作原理对于开发者来说至关重要,无论是初学者还是经验丰富的程序员,都能从中受益。这个“nodejs完整安装教程(带软件)”压缩包是学习和部署Node.js应用的良好起点。

    Homebrew 国内安装脚本快速部署 brew 国内镜像

    为了解决这个问题,可以通过使用国内镜像来加速Homebrew的安装和软件包的下载。为了快速部署Homebrew并使用国内镜像,可以编写一个安装脚本。这个脚本首先会安装Homebrew,然后将Homebrew的默认源替换为国内镜像源,...

    homebrew-aws-cfn-template-flip:使用Homebrew安装AWS CloudFormation模板脚蹼

    这将从 `jasongilman/homebrew-tools` tap 中获取并安装 `aws-cfn-template-flip`。现在,你可以使用 `cfn-flip` 命令来转换模板: ```bash cfn-flip <input_file> ``` 例如,要将一个名为 `template.json` 的 ...

    homebrew-vue-cli:使用Homebrew安装Vue CLI

    Homebrew,又被称为“Mac上的apt-get”,是 macOS 系统下的一个包管理器,用于方便地安装和管理各种开源软件。通过Homebrew,用户可以在命令行中像安装本地应用一样安装各种开发者工具,包括Node.js、Git等,当然也...

Global site tag (gtag.js) - Google Analytics