`
xpenxpen
  • 浏览: 725451 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

通过modernizer一瞥grunt的功能

阅读更多
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模块

    Grunt CLI通常通过npm(Node.js的包管理器)进行全局安装。在命令行中输入以下命令: ```bash npm install -g grunt-cli ``` 这将把grunt-cli安装到你的全局Node.js模块路径下,通常位于`C:\Users\Administrator\...

    grunt-cli压缩包-0.1.13版本

    `grunt-cli`的主要功能是解析并执行Gruntfile.js,这是Grunt的工作配置文件,其中定义了项目的构建任务。通过解析这个文件,`grunt-cli`可以调用Grunt核心库来执行指定的任务,如编译、测试、压缩、优化资源等。这些...

    Grunt 离线安装包

    6. **运行 Grunt**:现在你可以通过运行 `grunt` 命令来执行你的 Grunt 任务了,前提是你的项目目录已经被设置为 Node.js 项目(即有 `package.json` 文件)。 Grunt 的强大之处在于其丰富的插件生态系统。例如,`...

    grunt项目构建样例

    在配置完成后,可以通过命令行执行`grunt`或特定任务(如`grunt concat`,`grunt uglify`),Grunt会按照配置自动执行相关任务。 6. **最佳实践** - 使用`Grunt.watch`监听文件变化,自动执行任务,提高开发效率...

    grunt-contact 模块

    在这个场景中,`grunt-contact`可能是用于处理特定的文件合并或处理任务,但描述中并未详细说明其具体功能。不过,我们可以根据其他提到的模块来推测其可能的应用。 首先,让我们了解一些关于Grunt的基础知识。...

    Grunt入门练习Demo

    通过学习和实践这个Demo,你可以更好地理解Grunt的工作原理,并为自己的项目定制自动化流程。Grunt的强大之处在于它的灵活性和可扩展性,你可以根据需要添加更多任务和插件,打造属于自己的高效前端开发环境。

    grunt.js cookbook

    - **自定义插件开发**:对于特定需求,可以开发自定义插件来扩展Grunt的功能。 - **异步任务处理**:Grunt支持异步任务处理,这对于耗时较长的操作非常有用。 #### 七、Grunt.js最佳实践 - **模块化设计**:将大型...

    Grunt前端开发工具部署

    接下来,在项目根目录下通过npm安装Grunt CLI(命令行界面): ```bash npm install -g grunt-cli ``` ### 2. 初始化Grunt项目 在项目根目录中运行以下命令,Gruntfile.js文件将会被生成: ```bash npm init ```...

    grunt 打包工具 混淆工具

    Grunt允许开发者通过配置文件定义一系列的任务,包括编译、测试、压缩、混淆等,从而实现项目构建过程的自动化。这个“grunt 打包工具 混淆工具”的主题,主要涵盖了Grunt如何用于JavaScript文件的优化和保护。 **1...

    Grunt安装与使用

    Grunt是JavaScript世界中的一款任务自动化工具,它允许开发者通过配置文件定义一系列的任务,实现代码的编译、压缩、测试、部署等自动化工作流程。Grunt依赖于Node.js环境,因此在使用Grunt之前,我们需要先安装Node...

    Grunt+Less+jQuery配置源码

    Grunt的主要功能是通过预设的任务来自动化常见的Web开发工作,如编译、压缩、测试、部署等。它通过编写JSON格式的配置文件(Gruntfile.js)来定义一系列的任务,使得开发者能够定制自己的工作流程,极大地提高了开发...

    Grunt的实例代码(快速理解Grunt的用法)(内含代码注释)

    Grunt是JavaScript的一个任务运行器,它通过自动化工作流程来提升开发效率,尤其在前端开发领域,如构建、测试、优化等。这个压缩包“GruntStones”可能包含了一系列的示例代码,旨在帮助初学者快速理解Grunt的用法...

    grunt前端构建工具

    通过`npm install grunt-plugin-name --save-dev`命令,你可以安装各种插件以扩展Grunt的功能,如处理CSS、处理图像、处理模板语言、测试代码质量等。例如,`grunt-contrib-sass`用于编译Sass文件,`grunt-contrib-...

    grunt demo

    Grunt 是一个基于 Node.js 的自动化构建工具,它极大地提高了开发者的工作效率,通过预设的任务列表,可以实现一系列常见的前端开发流程,如代码编译、合并、压缩、测试等。Grunt 依赖于 JSON 格式的配置文件 `...

    Grunt自动化加密js环境

    除了`grunt-uglify`,还有其他加密JavaScript的插件,如`grunt-jsobfuscator`或`grunt-crypto`,这些插件提供了更高级的加密和混淆功能,可以根据实际需求选择。 为了更好地理解这个自动化流程,可以查看提供的`...

    grunt学习资料

    - **插件(Plugin)**:Grunt 使用插件来扩展其功能。大多数任务都是通过安装和配置相应的插件来实现的,如`grunt-contrib-concat`用于文件合并,`grunt-contrib-uglify`用于JavaScript压缩。 - **配置文件...

    grunt-1.4.1.tar.gz

    Grunt,全称为“Grunt.js”,是一个基于Node.js的任务运行器,它允许开发者通过编写配置文件(Gruntfile.js)来定义一系列自动化任务,从而实现项目的构建流程自动化。Grunt的核心理念是“配置优于代码”,这意味着...

    前端开源库-grunt-travis-lint

    这个库的核心功能是集成到自动化构建工具Grunt中,通过Travis CI(持续集成服务)进行配置文件的静态分析和校验。 **什么是Grunt?** Grunt是JavaScript世界中的一个任务运行器,基于Node.js构建。它允许开发者定义...

    Grunt中文文档.doc

    3. **任务加载**:通过`grunt.loadNpmTasks('plugin-name')`加载Grunt插件。 4. **自定义任务**:使用`grunt.registerTask()`注册自定义任务,如设置默认任务。 以下是一个简单的Gruntfile示例: ```javascript //...

    grunt-cli是grunt的客户端,现提供的是基于redhat7.0_x64的客户端

    它通过配置文件(Gruntfile.js)来定义一系列的任务,使得开发者能够高效地管理项目构建过程。 Grunt-CLI(Command Line Interface)是Grunt的命令行接口,它是Grunt的核心组成部分之一,允许用户在命令行中执行...

Global site tag (gtag.js) - Google Analytics