Grunt搭建前端开发环境

欢迎访问我的博客查看原文：http://www.kapeter.com/archives/273

前几天，无意间看到了Grunt的介绍，被它强大的功能所吸引，于是今天试着配置了一下。

不得不说，Grunt的配置相当复杂，很少有文章能够完整地讲完，我也是参考了几篇文章才完成了配置。因此，把自己的配置过程记录下来，防止遗忘。

先放出参考资料：
Grunt官方文档：http://www.gruntjs.net/
用grunt搭建web前端开发环境：http://www.cnblogs.com/wangfupeng1988/p/4561993.html
Grunt插件之LiveReload 实现页面自动刷新：http://www.bluesdream.com/blog/grunt-plugin-livereload-wysiwyg-editor.html

我的操作系统环境：windows 8.1。

下面进入配置过程。
1、安装Node.JS。
根据Grunt官方文档：Grunt和Grunt插件是通过npm安装并管理的，npm是 Node.js 的包管理器。
Node.js的下载地址：https://nodejs.org/

安装完后，在cmd环境下，测试“node -v”，如果出现版本号，说明Node.js安装成功。

2、安装CLI
在cmd环境下，输入以下代码（如果报错，请用管理员权限运行。）

npm install -g grunt-cli

回车之后，你会看到一个不停转动的横线，说明它正在联网下载。
安装完后，我们输入grunt命令。如果出现以下界面，则说明安装成功。

3、创建网站项目
我在D盘下创建了一个名为“Kapeter”的文件夹，作为我的网站项目目录，并在里面创建Gruntfile.js和package.json这两个文件。要注意的是Gruntfile.js的首字母大写！
来自官方文档：
package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。
我们在文件中加入以下代码：

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
  }
}

package.json遵循严格的Json格式，其中，name、version等属性是对项目的描述，可以根据项目的实际情况进行配置。
详见：https://docs.npmjs.com/files/package.json
如果不习惯英文版，可以看这篇文章:https://docs.npmjs.com/files/package.json
这份文件最关键的部分是在于devDependencies配置段，它保存着项目依赖的grunt和Grunt插件，你可以通过这一段清楚地了解该项目用了哪些插件，还能用于快速搭建，这一部分待会再说。
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。

4、安装Grunt
我们已经创建了网站项目，在cmd环境下，进入刚刚创建的文件夹（使用cd命令）,并输入以下代码。

npm install grunt --save-dev

其中，“–save-dev”的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项。
安装完成后，我们去package.json看一下，发现在 “devDependencies”项中多了一项：”grunt”: “^0.4.5″,说明Grunt已经安装成功。

5、grunt插件安装及配置（以uglify为例）
uglify是一个文件压缩插件，我们经常使用的jQuery常常用“jquery+版本号.min.js”命名，打开文件发现内部没有换行符，这便是使用了uglify插件，对文件进行了压缩，减少了文件的大小。
首先，你需要安装uglify，和安装grunt类似。

npm install grunt-contrib-uglify --save-dev

安装完成后，打开package.json，发现在 “devDependencies”项中多了一项：”grunt-contrib-uglify”:”~0.2.1″,说明jshint已经安装成功。
接着，要对它进行配置，正如上面所说，grunt插件的配置都在Gruntfile.js内完成。
官方的默认配置文件：

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

在上面的代码中，
grunt.file.readJSON(‘package.json’) 将存储在package.json文件中的JSON元数据引入到grunt config中。 由于<% %>模板字符串可以引用任意的配置属性，因此可以通过这种方式来指定诸如文件路径和文件列表类型的配置数据，从而减少一些重复的工作。
uglify:{};是对uglify插件进行一些配置，比如“banner”，即在文件头部加入项目信息和生成时间，jQuery就是这么干的。
grunt.loadNpmTasks(‘grunt-contrib-uglify’); 加载包含 “uglify” 任务的插件。
grunt.registerTask(‘default’, ['uglify']);默认被执行的任务列表。即当你在命令行中输入grunt，自动执行uglify，当然你可以自己命名，比如 grunt.registerTask(‘live’, ['uglify']);这个时候你需要输入grunt live，命令才会执行。

6、实现前端开发自动化
写前端的都会遇到一个问题，每当自己修改css文件或者js文件，都需要刷新一下浏览器来查看效果，非常繁琐。现在有了grunt，就可以实现自动刷新了。
具体的实现思路为：LiveReload+watch，方法已在文章的顶部列出，这里不做详细描述。

7、grunt快速配置
有人可能会想，每次新建一个项目都要配置一遍grunt不是很麻烦吗？
这个时候，我们就要用到刚才说的package.json的”devDependencies”配置段了。我们把package.json和Gruntfile.js拷到新的项目中，然后在cmd环境下，跳转到项目目录，在里面输入：

npm install

可以发现你所需要的插件已经全部安装完毕了。因此，你只需要配置一遍，便可以在所有机器上快速安装你所需要的插件。

以下是我个人的配置文件：package.zip