模块化的Grunt配置

19 3月

Grunt是Javascript任务运行工具,它可以让一切自动化。

简而言之,它可以帮你完成代码压缩,代码编译,单元测试,代码规范验证等必须但高度重复的工作。

极大程度简化你的工作,同时又保证你的代码质量。

Grunt的同类工具很多,但是Grunt的一大特点就是生态庞大,有各种插件可以选择,而且都是可以通过npm安装的。

GruntFile

Gruntfile.js文件都是位于项目根目录中的一个JavaScript文件,并且它也应该与你的项目源文件一起提交。

一个Gruntfile由下面几部分组成:

  • wrapper函数
  • 项目和任务配置
  • 加载的Grunt插件和任务
  • 自定义任务
  • 一个Gruntfile示例

比如下面的例子,它从package.json中读取配置,再调用grunt-contrib-uglify插件来压缩源文件,同时根据读取的配置生成一个标语注释。同时注册默认任务为uglify任务。


这个配置还不足以让你困扰,但是当你的任务让比较复杂时,配置文件本身就是一种负担了。

插件加载

Grunt的插件机制需要你在配置文件中加载你所需的插件。

比如:


其实这个问题比较好解决,因为Grunt的插件一般是已grunt开头的,所以我们只需要遍历node_module,需要可能的包,然后加载它们就可以了。

当然遍历目录是可行,不过最简单的还是直接读取package.json文件,然后判断它们的名字是否符合要求


这样就可以自动加载Grunt插件了。

当然我们完全没有必要自己写这个加载器,直接使用load-grunt-tasks就可以了。

使用方法:


将任务配置模块化

从上面的操作可以看出grunt.loadNpmTasks的效果,Grunt还提供了grunt.loadTasks(name)函数来加载项目文件夹中的配置。

比如上面的例子可以改为:


这样使用grunt.loadTasks('min')来加载配置。

而uglify.js的内容应该是


在package.json中配置参数

还有一个需要注意的是Gruntfile不应该有过多依赖的参数,比如项目版本等等。

这些信息应该写入package.json中,而不是写入Gruntfile.js中。

比如angular项目就将cdn版本信息写入package.json,并在Grunt执行时读取。

这样可以保证参数更新,也增加Gruntfile的美感。

参考链接

发表评论

电子邮件地址不会被公开。