早前听说Nodejs和Grunt很强大，特别是用来构建自动化的前端开发，更是强大无比。但一直碍于自己掌握的技术有限，不敢深入，也未曾深入下去。最近在开始学习SASS，也慢慢的接触这方面的东西。为了能更好的让SASS项目实现自动化编译，打算使用Nodejs和Grunt来试试。

SASS的编译的话题，在《SASS编译》有进行过介绍，文中介绍的方法是在Ruby环境下，使用sass命令配合其各种不同的参数来实现SASS的编译。那么今天我们换过一种方式，使用Nodejs和Grunt来实现SASS的自动编译。

简述

作为一个开发者（有很多人不认为前端人员不是开发者，此处暂且不论），都希望在实际开发中偷懒。避免一些重复性，没有意义的工作，当然也很想借助一些工具，提高自己的开发效率，腾出更多的时间去做自己喜欢的事。

其实，有很多新的工具可以帮助我们加速开发和简化我们的工作流。但作为一位前端人员来说，往往这些工具又令人生畏。这回我也是为了能更好的整会SASS，所以也硬着头皮开始接触这些新东东。那么今天我们就一起来尝试在Nodejs、Grunt和SASS配合，实现SASS项目的自动化编译。

Nodejs是一个服务器端 JavaScript 解释器，它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序，编写能够处理数万条同时连接到一个（只有一个）物理机的连接代码。

Grunt 是一个应用程序构建、任务管理工具。它可以实现生产自动化，避免大理繁琐单调重复的工作。目的就是为了自动化，减少你重复做的工作。当你配置好了一个Grunt任务管理之后，它可以帮你减少很多重复性工作，按照配置使用并减少出错可能。

SASS是对CSS（层叠样式表）的语法的一种扩充，也是最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能，可以更有效有弹性的写出CSS。

其中Grunt是一个JavaScript命令行选手，而SASS是一个CSS预处理器程序，两者结合起来，就是一个很强大的自动化工具。可以快速将SASS编译成CSS。

环境需求

在开始之前，我们需要改变以前一些观念。对于一位前端人员来说，以前在大家心中的概念就是如何将PSD图转换成HTML和CSS，再加上Javasctrip处理一些交互效果，完成浏览器兼容就OK。如此一来，大家拿到设计，有个编辑器（强大一点的就会配个IDE）开始工作了。然而，我们应该超着强大的未来向前走一步，适合一些自动化功能，帮助我们解决一些重复性的工作。

如果您有了解过SASS的话，你肯定会知道，SASS需要Ruby环境；而Grunt又离不开Nodejs的npm。所以您在使用Grunt和SASS之前，您需要先安装一些东西，也就是环境需求吧：

• Ruby环境
• SASS安装
• Nodejs环境
• Grunt安装

安装Ruby和SASS

首先我们需要在电脑上安装Ruby和SASS。如果您使用的是Mac，您就没必要安装Ruby。如果您使用的是Window系统，你需要安装Ruby。

当你确认你的电脑装好了Ruby，你可以在你的命令终端运行：

$ gem install sass 

或者

$ sudo gem install sass 

你也可以使用：

$ gem install sass --pre 

安装SASS的pre-release版本。这样在你的电脑中就可以全局使用sass命令。

有关于SASS的安装以及一些基本操作，可以参阅：《SASS编译》和《SASS调试》相关介绍。

安装Nodejs

由于使用Grunt需要Nodejs的支持，所以我们要确认自己的电脑已安装了nodejs。安装好以后看看在命令行下能不能执行node命令了，如果可以那么就表示安装成功了。

简单点的安装就是直接进入Nodejs官网中下载各系统所需的安装包进行安装。

如果你想挑战一些更有意思的安装方法，你可以使用命令安装。有兴趣的同学可以看看下面的教程：

• How to Install Node.js
• Installing and running node.js on Mac OS X
• Setting up Node.js and npm on Mac OSX
• Installing node.js, npm, and redis on Mac OS X

安装GRUNT

开始使用Grunt很简单。如果你是第一次使用这个东东，首先需要安装他。详细的安装过程可以参阅：Mac OS X下安装Grunt和Window下安装。在本文中，主要以Mac OS X环境做一个简单的介绍。

在安装Grunt之前，首先要确定你的电脑安装好了Nodejs。在写这篇教程之时，我的电脑安装是：

$ node -v v0.10.13 

npm版本是：

$ npm -v 1.3.2 

接下来要安装Grunt是v0.4.1版本。注：如果你的电脑之前安装了Grunt其他版本，你需要先卸载之前版本，才能安装Grunt的最新版本。

安装grunt命令行界面（CLI）

在安装grunt.js之前，需要先安装Grunt的命令行界面。安装方法也很简单，打开