Grunt初体验

Grunt初体验

1.安装（windows平台）

首先安装nodejs，http://nodejs.org/,点击大大的install按钮下载安装包，下载后双击一路下一步，nodejs就算安装好了，测试一下是否安装成功，打开cmd命令行，之后输入命令node -v和npm -v出现nodejs和npm包管理器的版本号就算是成功了。

之后输入命令npm install -g grunt-cli，注意这个不是grunt的运行库，其最大的作用可以使你使用grunt命令实现在本机上安装不同版本的grunt，并且grunt命令为全局命令。

一切顺利的话前期工作就大功告成了，接下来还是使用。

2.grunt使用

新建一个文件任何位置（我可不推荐有中文的路径），我在d盘根目录下创建了一个空文件夹名字就叫做gruntTest，之后我们双击进入文件夹，shift加鼠标右键选择在此处打开命令窗口。

下一步，输入命令行npm init，此命令会在文件夹下自动生成一个package.json文件，简单填写一下就好，不想填写的就一路回车，此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内（官方的解释），对我来说呢，我理解为这是一个配置文件，就像玩游戏一样，什么字幕显示啊，血条位置之类的，有了这个文件就给了程序执行一个标准，命令行会根据这个标准来执行代码，示例嘛我在这个json文件里面只写了这么点东西

{
  "name": "myProject",
  "version": "0.0.1",
  "description": "this is a test",
  "author": "blue"
}

很好懂，就这么多，之后我们就开始安装grunt了。

使用命令npm install grunt --save-dev，--save-dev的作用不仅能够使你安装grunt而且该命令还会自动在你的配置文件package.json中写入依赖，特别要说的插件的安装方法是大同小异的，通过npm install 插件名称 --save-dev就可以了，成功~之后我们开始使用grunt。

进入实战我用js的grunt压缩插件来练练手，该插件全名（好长。。） grunt-contrib-uglify，依葫芦画瓢，我们继续npm install  grunt-contrib-uglify --save-dev安装这个插件，打开package.json瞧瞧成功~~

{
  "name": "myProject",
  "version": "0.0.1",
  "description": "this is a test",
  "author": "blue",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-uglify": "^0.7.0"
  }
}

3.grunt任务

在上一环节中我成功安装了grunt和它的一个压缩的插件，现在我们利用grunt的任务机制来使用它实现一个js文件的压缩。

新建一个js文件名字叫做Gruntfile.js，新建两个文件夹src和build在gruntTest下，之后在src文件夹中新建一个js文件名字叫做gruntTest.js，之后在里面随便写点js，比如

var a=0;
var b=1;
var c=2;
console.log(a+b+c);

之后把下面代码贴到我们新建的Gruntfile.js文件中去，下面我已经写了注释，其实这是一个典型的grunt文件的写法，其中包括了一个uglify任务的实现，grunt的其他插件也是遵循这种格式来执行的，所以我们会了这个就能够举一反三了

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig(//grunt的默认设置
{
pkg: grunt.file.readJSON('package.json'),//配置文件
uglify: {//uglify插件配置
options: {//参数
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {//构建路径
src: 'src/<%= pkg.name %>.js',//需要构建的js路径
dest: 'build/<%= pkg.name %>.min.js'//构建后js路径
}
}
});
// 加载包含 "uglify" 任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认被执行的任务列表。
grunt.registerTask('default', ['uglify']);
};

<% %>模板字符串可以引用任意的pageage.json配置属性，所以在build任务中相当于执行了从src声明的路径中及src文件夹下的gruntTest.js压缩后放入dest声明的路径build文件夹下面，生成的文件名称为gruntTest.min.js中去。

最后在命令行敲击grunt命令，看看你的build文件夹下是不是已经有了一个新的js文件，大功告成！！！！