基于任务的JavaScript项目命令行构建工具grunt介绍

2012-08-18

简介

grunt是一个基于任务的JavaScript项目命令行构建工具,grunt是基于node.js的。grunt目前支持以下预定义任务:

  • concat – Concatenate files.
  • init – Generate project scaffolding from a predefined template.
  • lint – Validate files with JSHint.
  • min – Minify files with UglifyJS.
  • qunit – Run QUnit unit tests in a headless PhantomJS instance.
  • server – Start a static web server.
  • test – Run unit tests with nodeunit.
  • watch – Run predefined tasks whenever watched files change.

安装

首先需要安装node,安装好后在控制台输入node -v测试一下:

node 安装

安装好node.js后使用npm(Node Package Manager)安装grunt模块,在控制台输入” npm install -g grunt”即可,安装好后运行grunt -h测试:

grunt 安装

而grunt的qunit test还依赖phantomjs,phantomjs是基于Javascript驱动的命令行webkit引擎,轻量级,安装简单,开发快速,渲染速度较快,无界面的webkit浏览器。由于phantomjs无法通过npm自动安装,所以需要自己下载phantomjs.exe(下载地址),安装好后还需要设置一下path环境变量,设置好后在控制台输入phantomjs –v查看效果,截图如下(Linux环境下配置):

phantomjs 安装

windows用户注意了,由于在windows命令行下,如果当前目录下有一个js文件名跟命令名相同的话,windows并不会执行这个命令,而是会打开这个js文件,如:

windows 注意

这是由于windows的pathext环境变量导致的,所以还需要修改一个pathext环境变量,将其中的“.js”删除。

windows 注意

grunt配置文件

grunt配置文件为grunt.js,是node.js文件:

module.exports = function(grunt) {
    grunt.initConfig({
        lint: {
            all: ['lib/*.js', 'test/*.js', 'grunt.js']
        }
    });
};

上面定义了一个lint任务,可以在该目录下执行grunt lint来执行这个任务,当然也可以我们要用的是qunit的单元测试,所以可以写成:

module.exports = function(grunt) {
    grunt.initConfig({
        qunit: {
            files: ['runner.html']
        }
    });
};

最后可以加上grunt.registerTask(‘default’, ‘qunit’);以方便测试,这样只需要在当前目录下运行grunt命令,即会执行默认任务(qunit),还可以添加watch任务等等。

参考资料

grunt on github
Introducing Grunt
Grunt, a JS Command Line Tool