1.引言
如今开发一个javascript工程,不再是那种把javascript写好,在浏览器里测试测试就完事的流程了。有很多工具可以帮助提高javascript的质量。
比如jslint可以检查代码质量,找出有问题的代码,uglify可以将javascript代码压缩,等等。
而
grunt是一个类似于java里面的ant,maven,gradle这种构建工具。有了它,从而使得javascript工程的编译、打包、测试也能做到像java一样自动化,从而达到持续集成的目的。
本文我们通过modernizer项目来一瞥grunt的功能。
2.环境
Windows7 64bit
nodejs 0.10.29
npm 2.7.1
grunt 0.4.5
grunt-cli 0.1.13
modernizer 3.0.0-alpha.3
3. 安装grunt
3.1 前提是先要安装好nodejs和npm
省略。没装过的同学请参考
http://xpenxpen.iteye.com/blog/2092294
3.2 将nodejs和npm所在的目录加入到PATH
3.3 升级npm到最新版
D:\>npm update -g npm
3.4 安装grunt-cli
D:\>npm install -g grunt-cli
查看grunt版本
D:\>grunt -V
grunt-cli v0.1.13
4. modernizer项目初探
4.1 是什么
modernizer是一个javascript类库,用来检测浏览器支持HTML5和CSS3的哪些特性。
4.2 下载
去github克隆下来,地址
https://github.com/Modernizr/Modernizr
接下来的步骤其实都在他的readme.md上写着。
4.3 安装依赖
npm install
注意期间需要下载phantomjs,但是下面这个网址不番羽土啬又是访问不了的,
Downloading https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.8-windows.zip
所以请将你的IE的代理设置好,然后重开一个cmd窗口执行此命令直到成功为止。
4.4 编译测试
grunt test
下面是在我本机(Windows)上执行的结果
D:\git\opensource\Modernizr>grunt test
Running "clean:dist" (clean) task
Running "jshint:files" (jshint) task
>> 303 files lint free.
Running "jshint:tests" (jshint) task
>> 66 files lint free.
Running "jade:compile" (jade) task
>> 3 files created.
Running "instrument" task
Instrumented 57 files
Running "env:coverage" (env) task
Running "mochaTest:test" (mochaTest) task
............................................................
............................................................
............................................................
............................................................
..............................................
286 passing (1s)
Running "generate:dest" (generate) task
Running "storeCoverage" task
Running "connect:server" (connect) task
Started connect web server on 127.0.0.1:9999.
Running "mocha:test" (mocha) task
Testing: http://localhost:9999/test/unit.html
............................................................
............................................................
...................................................
171 passing (3s)
Testing: http://localhost:9999/test/index.html
............................................................
............................................................
............................................................
............................................................
............................................................
............................................................
............................................................
............................................................
............................................................
.............
553 passing (3s)
>> 724 passed! (5.81s)
Running "makeReport" task
...此处省略...
Done, without errors.
5. 功能赏析
5.0 高层鸟瞰
首先说一下grunt的两个主要配置文件package.json和Gruntfile.js。
他们位于modernizr工程的根目录下。
package.json定义有哪些依赖,概念类似maven里的dependency
Gruntfile.js定义有哪些task,概念类似ant里的task
可通过以下命令查看当前工程支持哪些task
D:\git\opensource\Modernizr>grunt --help
Options marked with * have methods exposed via the grunt API and should instead
be specified inside the Gruntfile wherever possible.
Available tasks
clean Clean files and folders. *
connect Start a connect web server. *
copy Copy files. *
jade Compile jade templates. *
jshint Validate files with JSHint. *
env Specify an ENV configuration for future tasks in the chain
*
instrument instruments a file or a directory tree
reloadTasks override instrumented tasks
storeCoverage store coverage from global
makeReport make coverage report
mocha Run Mocha unit tests in a headless PhantomJS instance. *
mochaTest Run node unit tests with Mocha *
saucelabs-jasmine Run Jasmine test cases using Sauce Labs browsers *
saucelabs-qunit Run Qunit test cases using Sauce Labs browsers *
saucelabs-yui Run YUI test cases using Sauce Labs browsers *
saucelabs-mocha Run Mocha test cases using Sauce Labs browsers *
saucelabs-custom Run custom test cases using Sauce Labs browsers *
generate Create a version of Modernizr from Grunt *
browserTests Alias for "connect", "mocha" tasks.
nodeTests Alias for "mochaTest" task.
test Alias for "clean", "jshint", "jade", "instrument",
"env:coverage", "nodeTests", "generate", "storeCoverage",
"browserTests", "makeReport" tasks.
travis Alias for "test" task.
build Alias for "clean", "generate" tasks.
default Alias for "jshint", "build" tasks.
以下就是具体的task了。
5.1
clean
顾名思义,用来清除文件和文件夹的
5.2 jshint
http://jshint.com/
https://www.npmjs.com/package/grunt-contrib-jshint
JavaScript代码质量检查工具,可以用来找出一些潜在的代码缺陷。
5.3 jade
https://github.com/jadejs/jade
https://www.npmjs.com/package/grunt-contrib-jade
模板引擎,可以减轻你写html的工作量。它会将自定义的语言转换为html
应用
编译完后可在Modernizr\test目录下发现3个文件,iframe.html,index.html,unit.html,而他们是由Modernizr\test\browser目录下的扩展名为jade的文件生成的。
5.4 istanbul
https://github.com/gotwarlost/istanbul
https://www.npmjs.com/package/grunt-istanbul
名字叫伊斯坦布尔(土耳其城市),是一个代码覆盖率工具。javascript也能像java一样做覆盖率测试,牛!
分以下几个步骤:
1) instrument
2) 运行测试,mochaTest
3) storeCoverage
4) makeReport
编译完后可打开Modernizr\test\coverage\reports\lcov-report\index.html欣赏我们的成果,里面会告诉你哪些代码没被覆盖到。
测试时用到mocha,而mocha又用到前面提到的phantomjs
https://www.npmjs.com/package/grunt-mocha
https://www.npmjs.com/package/grunt-mocha-test
phantomjs是一个服务器端的 JavaScript API 的 WebKit。(用C++写的)
使用场景:
无需浏览器的 Web 测试
页面访问自动化
屏幕捕获
网络监控
6.尾声
通过站在巨人的肩膀上,我们欣赏到了那些一流的javascript项目是怎么做的。有了grunt,javascript工程也能自动化地构建了。笔者不得不感叹技术的日新月异啊!同样的,我们也可以感受到语言之间是相通的,重要的是idea。面向对象,自动构建,自动化测试,代码覆盖率,持续集成,这些idea不是java的专利,javascript也能拥有。
7.参考资料
Testing and Code Coverage With Node.js Apps 介绍了javascript的覆盖率测试,包括istanbul以及如何和sonar集成
分享到:
相关推荐
Grunt CLI通常通过npm(Node.js的包管理器)进行全局安装。在命令行中输入以下命令: ```bash npm install -g grunt-cli ``` 这将把grunt-cli安装到你的全局Node.js模块路径下,通常位于`C:\Users\Administrator\...
`grunt-cli`的主要功能是解析并执行Gruntfile.js,这是Grunt的工作配置文件,其中定义了项目的构建任务。通过解析这个文件,`grunt-cli`可以调用Grunt核心库来执行指定的任务,如编译、测试、压缩、优化资源等。这些...
6. **运行 Grunt**:现在你可以通过运行 `grunt` 命令来执行你的 Grunt 任务了,前提是你的项目目录已经被设置为 Node.js 项目(即有 `package.json` 文件)。 Grunt 的强大之处在于其丰富的插件生态系统。例如,`...
在配置完成后,可以通过命令行执行`grunt`或特定任务(如`grunt concat`,`grunt uglify`),Grunt会按照配置自动执行相关任务。 6. **最佳实践** - 使用`Grunt.watch`监听文件变化,自动执行任务,提高开发效率...
在这个场景中,`grunt-contact`可能是用于处理特定的文件合并或处理任务,但描述中并未详细说明其具体功能。不过,我们可以根据其他提到的模块来推测其可能的应用。 首先,让我们了解一些关于Grunt的基础知识。...
通过学习和实践这个Demo,你可以更好地理解Grunt的工作原理,并为自己的项目定制自动化流程。Grunt的强大之处在于它的灵活性和可扩展性,你可以根据需要添加更多任务和插件,打造属于自己的高效前端开发环境。
- **自定义插件开发**:对于特定需求,可以开发自定义插件来扩展Grunt的功能。 - **异步任务处理**:Grunt支持异步任务处理,这对于耗时较长的操作非常有用。 #### 七、Grunt.js最佳实践 - **模块化设计**:将大型...
接下来,在项目根目录下通过npm安装Grunt CLI(命令行界面): ```bash npm install -g grunt-cli ``` ### 2. 初始化Grunt项目 在项目根目录中运行以下命令,Gruntfile.js文件将会被生成: ```bash npm init ```...
Grunt允许开发者通过配置文件定义一系列的任务,包括编译、测试、压缩、混淆等,从而实现项目构建过程的自动化。这个“grunt 打包工具 混淆工具”的主题,主要涵盖了Grunt如何用于JavaScript文件的优化和保护。 **1...
Grunt是JavaScript世界中的一款任务自动化工具,它允许开发者通过配置文件定义一系列的任务,实现代码的编译、压缩、测试、部署等自动化工作流程。Grunt依赖于Node.js环境,因此在使用Grunt之前,我们需要先安装Node...
Grunt的主要功能是通过预设的任务来自动化常见的Web开发工作,如编译、压缩、测试、部署等。它通过编写JSON格式的配置文件(Gruntfile.js)来定义一系列的任务,使得开发者能够定制自己的工作流程,极大地提高了开发...
Grunt是JavaScript的一个任务运行器,它通过自动化工作流程来提升开发效率,尤其在前端开发领域,如构建、测试、优化等。这个压缩包“GruntStones”可能包含了一系列的示例代码,旨在帮助初学者快速理解Grunt的用法...
通过`npm install grunt-plugin-name --save-dev`命令,你可以安装各种插件以扩展Grunt的功能,如处理CSS、处理图像、处理模板语言、测试代码质量等。例如,`grunt-contrib-sass`用于编译Sass文件,`grunt-contrib-...
Grunt 是一个基于 Node.js 的自动化构建工具,它极大地提高了开发者的工作效率,通过预设的任务列表,可以实现一系列常见的前端开发流程,如代码编译、合并、压缩、测试等。Grunt 依赖于 JSON 格式的配置文件 `...
除了`grunt-uglify`,还有其他加密JavaScript的插件,如`grunt-jsobfuscator`或`grunt-crypto`,这些插件提供了更高级的加密和混淆功能,可以根据实际需求选择。 为了更好地理解这个自动化流程,可以查看提供的`...
- **插件(Plugin)**:Grunt 使用插件来扩展其功能。大多数任务都是通过安装和配置相应的插件来实现的,如`grunt-contrib-concat`用于文件合并,`grunt-contrib-uglify`用于JavaScript压缩。 - **配置文件...
Grunt,全称为“Grunt.js”,是一个基于Node.js的任务运行器,它允许开发者通过编写配置文件(Gruntfile.js)来定义一系列自动化任务,从而实现项目的构建流程自动化。Grunt的核心理念是“配置优于代码”,这意味着...
这个库的核心功能是集成到自动化构建工具Grunt中,通过Travis CI(持续集成服务)进行配置文件的静态分析和校验。 **什么是Grunt?** Grunt是JavaScript世界中的一个任务运行器,基于Node.js构建。它允许开发者定义...
3. **任务加载**:通过`grunt.loadNpmTasks('plugin-name')`加载Grunt插件。 4. **自定义任务**:使用`grunt.registerTask()`注册自定义任务,如设置默认任务。 以下是一个简单的Gruntfile示例: ```javascript //...
它通过配置文件(Gruntfile.js)来定义一系列的任务,使得开发者能够高效地管理项目构建过程。 Grunt-CLI(Command Line Interface)是Grunt的命令行接口,它是Grunt的核心组成部分之一,允许用户在命令行中执行...