I code it

Code and Life

Grunt的几个常用插件

Grunt的几个常用插件

grunt-karma 简介

grunt-karma是一个karma的Grunt插件,上一篇文章中已经介绍了karma的基本用法。这里简单介绍如何在Grunt中使用karma。

首先需要安装grunt-karma插件:

1
$ npm install grunt-karma --save-dev

然后在Gruntfile.js中加载该插件:

1
grunt.loadNpmTasks('grunt-karma');

在使用karma之前,需要生成一个karma的配置文件karma.conf.js:

1
$ karma init karma.conf.js

然后在Gruntfile.js中,加入初始化karma的参数,并指定,karma需要使用karma.conf.js文件作为配置来运行:

1
2
3
4
5
6
7
grunt.initConfig({
  karma: {
    unit: {
      configFile: 'karma.conf.js'
    }
  }
});

大多数情况下,如果要把karma作为CI的一部分,应该启动单次运行模式:

1
singleRun: true

这样karma会启动浏览器,运行所有的测试用例,然后退出。

1
2
3
4
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-karma');

grunt.registerTask('default', ['jshint', 'karma']);

image

注意此处的default后边带了一个任务数组,其中每个任务会按照声明的顺序依次被执行。事实上此处的’default’是后边整个列表的一个别名(alias)。

grunt-jshint / grunt-uglify / grunt-concat

grunt-contrib-jshint是一个用于JavaScript静态语法检查的工具,它会帮助开发者在进行较为严格的语法检查。

和其他的Grunt插件一样,它是以一个npm的包的形式发布的,因此安装非常容易:

1
$ npm install grunt-contrib-jshint --save-dev

然后在Gruntfile.js中加载该插件:

1
grunt.loadNpmTasks('grunt-contrib-jshint');

即可,类似的还有:用以连接所有JavaScript源代码为一个独立文件的grunt-contrib-concat,以及用以最小化JavaScript源码的grunt-contrib-uglify

自定义插件

grunt-init是一个帮助开发人员快速搭建基于Grunt项目的工具,比如开发jQuery插件,Gruntfile,或者Grunt插件本身。安装方式很简单,我们需要在其他项目也用到grunt-init,因此安装在全局路径下-g:

1
$ npm install -g grunt-init

开发Grunt插件,我们需要一个基本的模板,将这个模板clone到home下的.grunt-init目录下:

1
$ git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin

然后新建一个目录,并在该目录下运行:

1
2
3
$ mkdir beautify
$ cd beautify
$ grunt-init gruntplugin

grunt-init会让你回答一些问题,比如插件名称,版本号,github链接等。之后,grunt-init会生成一个基本的模板,开发者只需要完成自己插件的逻辑代码即可。逻辑实现在tasks/<plugin-name>.js中即可。

完成后可以通过npm publish来发布,发布之后,你的插件就可以向上边提到的常用插件那样被其他的开发者使用了。

Comments