注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

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

2012-12-18 15:02:18|  分类: 持续集成 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
转自:BINBINLIAO'S BLOG

1.简介

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

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

2.安装

  1. 首先需要安装node(http://nodejs.org/#download),安装好后在控制台输入node -v测试一下:
    node 安装

    node 安装

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

    grunt 安装

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

    phantomjs 安装

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

    windows 注意


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

    windows 注意

3.grunt配置文

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

1
2
3
4
5
6
7
module.exports = function(grunt) {
  grunt.initConfig({
  lint: {
    all: ['lib/*.js', 'test/*.js', 'grunt.js']
  }
  });
};

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

1
2
3
4
5
6
7
module.exports = function(grunt) {
  grunt.initConfig({
  qunit: {
    files: ['runner.html']
  }
  });
};

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

4.参考资料

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

  评论这张
 
阅读(472)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017