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我大家交流。最后各位大大晚安
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
