Nodejs的Gruntjs使用一则

Gruntjs是前端项目构建工具，基于nodejs命令。有些js项目是基于Gruntjs构建的，如Jquery。

Gruntjs主要功能有：

1.合并文件。

2.压缩html,js,css,图片文件。

3.语法检测。

4.单元测试。

5.watch功能。

本文主要介绍watch配合chrome浏览器插件LiveReload实现网页自动刷新功能。

Nodejs安装

下载nodejs，官网地址 http://nodejs.org/ 下载最新版本按照提示下一步安装即可。

Gruntjs的安装

Gruntjs是基于Nodejs的，安装前要保证Nodejs环境成功安装，每个Gruntjs都包括两个文件：

1.package.json:依赖模块和用到的变量说明等，如：version,name。

2.Gruntfile.js:node module写法的任务管理文件。

package.json

例如我的package.json内容如下：

{
"name": "mitunes",
"version": "1.0.0",
"description": "mitunes",
"devDependencies": {
  "grunt-shell": "~0.2.2",
  "grunt-contrib-watch": "~0.4.4"
  }
}

如果安装了新的插件，那么这个package.json会自动更新的，或者修改它然后执行npm install，也可以安装对应的插件。

Gruntfile.js

Gruntfile.js是node module格式的任务管理文件，如下：

module.exports = function(grunt) {
grunt.initConfig({
watch: {
  files: ['../*.html','../js/*.js','../css/*.css'],
  options: {
    livereload: true
  }
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
};

运行Grunt

1.任意新建一个文件夹，例如：

D:\work\nodejs，新建的nodejs文件夹然后添加package.json和Gruntfile.js文件

2.打开cmd进入到nodejs文件夹，运行 npm install命令，例如：

此时文件夹下多出一个文件夹node_modules。

3.输入命令grunt wacth，例如：

安装chrome浏览器插件LiveReload

例如：

完成

chrome打开你的网站使你的网站引用的静态文件指向Gruntfile.js中watch的文件或目录，开启liveReload插件，此时修改你的网站静态文件看到chrome自动刷新。

如何修改网站静态文件指向本地，参考：Fiddler的简单使用