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我大家交流。最后各位大大晚安

Tagged: , , , , ,

Comments are closed.