模块化的Grunt配置

作者

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载自夜明的孤行灯

本文链接地址: https://www.huangyunkun.com/2014/03/19/maintainable_grunt_file/

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

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

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

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

GruntFile

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

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

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

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

module.exports =function(grunt){

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'
}
}
});

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
}

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

插件加载

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

比如：

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('grunt-sizediff');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-contrib-concat');

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

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

var multimatch=require('mulimatch'),
config = options.config;
var pattern ='grunt-*';
multimatch(config['dependencies'],patterns).forEach(grunt.loadNpmTasks);

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

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

使用方法:

require('load-grunt-tasks')(grunt);

将任务配置模块化

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

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

min
└── uglify.js

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

而uglify.js的内容应该是

module.exports = {
options: {
banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
},
build: {
src:'src/<%=pkg.name %>.js',
dest:'build/<%= pkg.name %>.min.js'
}
}

在package.json中配置参数

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

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

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

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

参考链接

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载自夜明的孤行灯

本文链接地址: https://www.huangyunkun.com/2014/03/19/maintainable_grunt_file/

发表评论