我现在在几个小项目中一直在使用Node.js。在Node系统中有一些很强大的工具。我最喜欢的一个例子就是Grunt。
Grunt是一种工具，允许您定义任务，然后通过命令运行他们，在命令行中运行：
| 代码如下 | 复制代码 |
| grunt watch | |
这将启动一个watch任务，用来监控文件，我已经指定和运行指定的任务，只要这些文件变化了，就能监控到。在我的例子中，我已经在Grunt设置了只要当.js文件改变了就能检测JavaScript语法和压缩JavaScript和当.scss文件改变就能将Sass文件编译成CSS的任务。
这里介绍了如何设置。
安装Grunt
首先你需要先安装Grunt CLI，这是Grunt命令的接口。这将可以在命令行中使用Grunt命令：
| 代码如下 | 复制代码 |
| $ npm install -g grunt-cli | |
注意：由于我们使用Grunt CLI，Grunt必须安装在每个项目的基础上。这允许您在不同的项目是运行不同版本的Grunt。如果您之前全局安装了Grunt，那么你应该先卸载它：
| 代码如下 | 复制代码 |
| $ npm uninstall -g grunt | |
安装需要的依赖关系
接下来，您需要设置运行Grunt需要的所有依赖项。在这个例子中你需要grunt，grunt-contrib-jshint(检测js文件)，grunt-contrib-uglify（压缩js文件），grunt-contrib-sass(编译你的Sass)。安装这些依赖项目，你需要在你的项目中的根目录下设置一个package.json文件：
| 代码如下 | 复制代码 |
| { "name":"Grunt-Example", "description": "Example project to demonstrate Grunt.", "version":"0.1.0", "private": true, "author": { "name": "Blake Haswell", "email": "blake.haswell@simpleweb.com.au" }, "devDependencies": { "grunt": "~0.4.0", "grunt-contrib-sass": "*", "grunt-contrib-jshint": "*", "grunt-contrib-uglify": "*", "grunt-contrib-watch": "*" } } |
|
一旦你创建好了这个文件，你可以在你的项目目录下运行npm install命令安装所需要的依赖项：
| 代码如下 | 复制代码 |
| $ npm install | |
设置Gruntfile.js
现在你需要创建一个"Gruntfile"。在这你可以定义你的任务。
首先在你的项目根目录下创建一个Gruntfile.js文件。创建Gruntfile真的很简单，我们只需要定义一个CommonJS模块。当需要改变我们的Grunt配置时，我们只需要修改这个模块。
| 代码如下 | 复制代码 |
| module.exports = function(grunt){ //Grunt配置写在这里 } |
|
接下来，设置你的第一个任务：JSHint。在Grunt中设置任务，需要运行grunt.initConfig()方法，并通过每个对象设置你的任务。例如，这里介绍了如何设置JSHint:
| 代码如下 | 复制代码 |
|
module.exports = function(grunt){ grunt.initConfig({ //JSHint (http://www.jshint.com/docs)
}); grunt.loadNpmTasks('grunt-contrib-jshint'); |
|
正如你看到的，你一个对象中包含了JSHint任务。JSHint是一个多任务，所以这意味着你可以定义多个JSHint任务。在这种情况下JSHint只有一个任务：all。JSHint的all任务指定文件被linted，以及这个选项也适用于lint。
还有，你有没有注意到在底部通过grunt.loadNpmTasks('grunt-contrib-jshint')调用任务。该方法可以从node_modules/中加载grunt-contrib-jshint任务，让它可以使用你的配置。
现在你可以很容易的lint你的JavaScript文件：
$ grunt jshint
很酷，不是吗？你甚至可以创建watch任务，监测JavaScript文件和自动lints文件——当文件失败后会提配你。
| 代码如下 | 复制代码 |
|
module.exports = function(grunt){ grunt.initConfig({ //JSHint (http://www.jshint.com/docs) //watch }); grunt.loadNpmTasks('grunt-contrib-jshint'); |
|
现在你执行grunt watch和开始修改你的JavaScript。你保存了你的文件并且lint失败后，将会通知你。在一个跨团队的开发执行编码的标准是一个伟大的方式，它节省时间捕捉觉错误。
Grunt不只是可以用于lint你的代码，你可快速设置任务压缩你的JavaScript：
| 代码如下 | 复制代码 |
|
module.exports = function(grunt){ grunt.initConfig({ //JSHint (http://www.jshint.com/docs) //Uglify //watch }); grunt.loadNpmTasks('grunt-contrib-jshint'); |
|
可以编译你的Sass:
| 代码如下 | 复制代码 |
|
module.exports = function(grunt){ grunt.initConfig({ //JSHint (http://www.jshint.com/docs) //Uglify //Sass //watch }); grunt.loadNpmTasks('grunt-contrib-jshint'); |
|
然后，你可以将任务添加到你的watch任务，将可以自动执行这些任务：
| 代码如下 | 复制代码 |
|
module.exports = function(grunt){ grunt.initConfig({ //JSHint (http://www.jshint.com/docs) //Uglify //Sass //watch }); grunt.loadNpmTasks('grunt-contrib-jshint'); |
|
现在，每次Sass文件修改保存后将会重新编译成CSS，每次JavaScript文件修保存后将会自动lint和压缩。
这样编码很爽吧，很开心吧！