web开发利器之grunt

伴随着项目的多样化和复杂化，前端的代码维护和管理（打包、压缩等等）也越来越难以维护，人为的疏忽往往会导致不可预期的错误，对于这样的错误给我们带来了很多的麻烦和多余的工作量；对于前端的项目携同开发来说，我们每个人均会负责不同板块，将JS、CSS拆解成各自个的模块单独开发，为了方便管理这些模块均为独立的文件，而为了页面加载速度（增加了文件个数这时也产生过多的Http请求，影响页面加载速度）我们又不得不将这些文件进行合并、压缩等等，早期我们会用YUI做这些事但如今我们需要的却更多（如项目的源代码做单元测试和回归测试，以及JS语法自动化检测等等）YUI开始无法满足我们需求，这时grunt横空出世，它众多插件和灵活性满足了我们的需求，对于需要反复重复的任务，例如压缩、编译、单元测试、代码检查等，轻而易举的完成，今天主要说下grun的用法。

grunt不难，它主要依赖的是nodeJS的npm包管理器，和一个JSON及一个JS文件，先说说npm包管理器，玩过nodeJS的对它应该都很熟悉，在这里我们只需要安装nodeJS即可（新版的nodeJS基本都集成了npm），至于nodeJS的安装可以 点这里，这这篇文章就不做详细介绍，安装完后打开命令管理器（nodeJS安装完后的终端）输入：

npm install -g grunt-cli

在grunt中安装全局命令接口；

然后说说JSON，确切的说应该是package.json，它主要用于安装grunt依赖的插件，和nodeJS的pakeage.json一样，在执行npm install时，它就会作为主入口，npm通过这JSON中的devDependencies去安装这些插件，具体的关于package大家可以 点击这里看看。

最后也就是最重要和最难的gruntfile.js了，它是用于配置和定义任务的一个主文件，grunt运行任务接口主要就时依赖它了，它是由包含函数、任务配置、任务加载、自定义任务四部分组成，如下：

    // 包装函数
module.exports = function(grunt) {

  // 任务配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // 任务加载
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // 自定义任务
  grunt.registerTask('default', ['uglify']);

};

其中包装函数没什么好说的，它和backbone这样的写法差不多，主要用于定义一个输出模块，在这个模块中处理grunt的相关事务；而任务配置大家可以看看 这里；任务加载则是加载你需要的插件如concat、jshint、uglify（合并、检测、压缩）；自定义任务则是自定义grunt的执行命令；

具体的大家可以 点击这里，把代码clone到本地自己执行跑到看下，毕竟手动理解会比文字描述容易明白到多。好了今天写到这里吧，其实这篇文章描述多不是很多，给的更多是外链和自己git上的一个测试代码，多动动手再去结合理解比光看不练的好，大家想深入看看可以看下grunt的官网，另外如果碰到什么可以mail我大家交流。最后各位大大晚安