文章目录

1. 1. Grunt的介绍
2. 2. 完整实例

Grunt的介绍

Grunt是一个自动化的项目构建工具，配置好Grunt可以完成压缩，代码检查，单元测试等任务。C/C++有makefile，Java有Maven，Nodejs有grunt~

Grunt常用的插件有：
1).grunt-contrib-uglify：压缩js代码
2).grunt-contrib-concat：合并js文件
3).grunt-contrib-qunit：单元测试
4).grunt-contrib-jshint：js代码检查
5).grunt-contrib-watch：文件监控

关于这些插件的使用 grunt让Nodejs规范起来 这篇文章已经做了详细的介绍，此就不多说了。

完整实例

此实例完成的工作为：保存代码后网页自动刷新，即时查看代码效果

安装 grunt-cli(先保证nodejs安装完成)

grunt-cli 安装完成

全局安装grunt

grunt安装完成

安装grunt到本项目中

安装完毕

—save-dev自动将依赖写入了package.json

执行grunt 发现报错了

原来是缺少gruntfile.js

创建gruntfile.js
(此处是livereload功能的示例，需下载这个chrome扩展程序，配合使用，功能：可以保存代码后网页自动刷新，即时查看代码效果）

gruntfile.js 内容：

module.exports = function(grunt) {
 // 项目配置(任务配置)
 grunt.initConfig({
                   pkg: grunt.file.readJSON('package.json'),
                   watch: {
                    client: {
                     files: ['public/**/**/*', 'public/*','public/**/*','views/*'],
                     options: {
                      livereload: true
                     }
                    }
                   }
                  });
 // 加载插件
 grunt.loadNpmTasks('grunt-contrib-watch');
 // 自定义任务 即需执行： grunt live
 grunt.registerTask('live', ['watch']);
};

再次执行 又报错了

是没找到grunt-contrib-watch 这个包

下载这个包

下载完成

再次执行grunt

我们回来看下代码，发现 default 任务没有注册 ，
而我们自定义了live任务：

grunt.registerTask('live', ['watch']);

你现在可以执行 grunt live 来执行这个任务

你也可以创建一个default任务
如果创建default 这样创建 添加到gruntfile里

// Default task(s).
grunt.registerTask('default', ['watch']);

此时你可以 输入命令 grunt 或 grunt watch 来执行这个任务

至此 启动你下载好的chrome livereload那个插件即可。
此时你就可以实时看代码效果，代码保存网页那边就刷新了，妈妈再也不用担心我玩命的按F5啦 ╮(╯▽╰)╭