什么是grunt?
Grunt是一个JavaScript任务运行器，用于自动执行频繁任务（如压缩，编译，单元测试）的工具。它使用命令行界面来运行在文件中定义的自定义任务（这个文件称为Gruntfile）。 Grunt由Ben Alman创建，用Node.js编写。它通过npm分发。现在，Grunt生态系统中有超过5,000个插件可用。
如何使用grunt?
基本概念
1.CLI(Command-line interface):Grunt的命令行界面（CLI）可以通过npm全局安装。执行grunt命令将加载并运行当前目录中本地安装的Grunt版本。因此，我们可以在不同的文件夹中维护不同版本的Grunt，并根据需要执行相对应的版本。安装grunt-cli只是将grunt命令放在系统路径中，允许它从任何目录运行。安装grunt-cli不会安装Grunt任务运行器！ Grunt CLI的工作很简单：运行已经安装在Gruntfile文件目录内的Grunt版本。所以允许多个版本的Grunt同时安装在同一台机器上。
2.package.json文件:包含项目的元数据，包括名称，版本，描述，作者，许可证及其依赖项（项目所需的Grunt插件）。所有依赖项都列在dependencies或devDependencies部分中。
3.Gruntfile文件:一个名为“Gruntfile.js”或“Gruntfile.coffee”的有效JavaScript或CoffeeScript文件，其中包含用于配置任务，加载现有插件以及创建自定义任务的代码。
4.任务运行:任务是执行指定作业的模块。它们在Gruntfile中定义。 开发人员可以从现有的Grunt插件加载预定义的任务以及编写自定义代码，以根据需求定义自己的任务。一旦定义，只需执行grunt <taskname>即可从命令行(CLI)运行这些任务。如果Gruntfile中定义的<taskname>是'default'，那么只需执行grunt即可。即不加参数是执行默认的任务。
安装cli
安装命令很简单，全局安装(首先需要先安装npm到全局)，直接输入:
npm install -g grunt-cli
npm是包管理的工具，-g表示全局安装，如果直接使用npm install它会找当前目录下是否有package.json,然后在当前目录安装这个文件里面配置的相关依赖。如果使用npm install <module name> 会安装指定的模块。
建立一个package.json
这边我首先先在E盘的目录下面新建一个gruntTest的测试文件夹:
输入:
npm init
接着会让你填写相关的信息，选择默认的，直接按enter下一步！
可以见到生成了相关的文件：
安装grunt和相关插件
安装相关的package的命令格式为：
npm install <module> --save-dev
--save-dev的意思是把安装的module保存到package.json文件的依赖之中。
首先需要安装grunt，安装后可以使用grunt命令来跑(因为已经安装了grunt-cli)当前目录下所安装的grunt版本。
npm install grunt --save-dev
如果你想安装JSHint任务模块，运行npm install grunt-contrib-jshint --save-dev即可，可以按需求添加对应的任务模块(也叫插件)。
编写Gruntfile
Gruntfile.js或Gruntfile.coffee文件是一个有效的JavaScript或CoffeeScript文件，它位于项目的根目录中，位于package.json文件旁边，做项目时应该与项目源码一起提交。
Gruntfile.js一般由以下四部分组成
1）wrapper“包装”函数
2）项目和任务配置
3）加载Grunt插件和任务
4）自定义任务
以下展示一份压缩的任务的Gruntfile.js的书写，
1 module.exports = function(grunt) { 2 3 // 项目配置 4 grunt.initConfig({ 5 pkg: grunt.file.readJSON('package.json'), 6 uglify: { 7 options: { 8 9 }, 10 build: { 11 src: 'js/src/vue.js', 12 dest: 'js/dest/vue.min.js' 13 } 14 } 15 }); 16 17 // 加载提供'uglify'任务的插件 18 grunt.loadNpmTasks('grunt-contrib-uglify'); 19 20 // 默认的任务 21 grunt.registerTask('default', ['uglify']); 22 23 };
先安装压缩的插件
npm install grunt-contrib-uglify --save-dev
然后运行输入grunt，即可运行相关的默认任务，
可以看出vue.js从源目录被压缩到对应的目标目录。
后面博客会继续学习grunt常用的相关插件。