六Todoify现代的前端开发式-Icodeit.PDF

轻量级 Web 应⽤程序开发（预览版） 六 Todoify ：现代的前端开发⽅式 在这⼀章结束的时候，你会学会下⾯这些技术： 1. 使⽤ Karma 测试运⾏器来⾃动的执⾏ JavaScript 测试 2. 使⽤ bower 作为前端 JavaScript 库的依赖管理⼯具 3. 使⽤ Gulp 作为构建脚本，使得很多构建任务⾃动化 4. 简单的测试驱动开发的⽅式 5. 如何开发⼀个 jquery 插件 Karma Karma 是⼀个 JavaScript 的测试运⾏器，使⽤ Karma 可以很⽅便的的运⾏测试（⽅便到你 感觉不到它的实际存在）。运⾏器的意思是，Karma 本⾝不会去执⾏具体的测试，测试框 架才会。Karma 的作⽤就是启动浏览器，然后启动测试框架去执⾏预先定义好的测试套件 。 1. 基于真实的浏览器，并且⽀持多个浏览器 2. ⾃动监听测试/实现⽂件的变化，并在变化之后运⾏测试 3. ⽀持多种测试框架，⽐如 Jasmine ，Mocha 等 4. 容易调试 5. 可以⽅便的与持续集成服务器集成 我们在本章会使⽤ Jasmine 作为测试框架和 Karma ⼀起来运⾏。当然，⾸先需要安装 Karma 。Karma 是⼀个 Node.js 的包，也就是说，你的本地机器上需要安装 Node.js 。 如果是 Mac OSX ，安装过程⼗分简单： $ brew install node 如果是 Linux ，可以通过安装预编译包，或者通过源代码编译的⽅式。但是⼀般来说，预 编译包的版本都会⽐较低，所以推荐使⽤源码编译的⽅式安装。安装完成之后，你会得到 ⼀个 npm 的可执⾏脚本。npm 是 Node 的包管理器（Node Package Manager ），⽤来安装 基于 Node 的程序包。 我们使⽤ npm 来安装 Karma ： $ npm install karma 安装完成之后，当前⽬录下会多出⼀个 node_modules 的⽬录，⾥边会有 Karma 的包。我 们可以再安装⼀个 karma-cli 的包，-g 参数表⽰将 Karma 安装在全局环境中，以便其他的 项⽬使⽤。 $ npm install karma-cli -g karma-cli 会在当前⽬录的 node_modules 中查找 karma 的包，并尝试启动这个 Karma 。如 果当前⽬录没有，则会向全局⽬录查找。这样做的好处是，每个项⽬都可以使⽤不同版本 的 Karma 。 安装完成之后，你应该可以通过下⾯这条命令来查看 Karma 的版本： 作者：邱俊涛 88 轻量级 Web 应⽤程序开发（预览版） $ karma --version Karma version: 0.10.10 前端依赖 管理 Bower 是⼀个基于 Node.js 的依赖管理⼯具，它也是⼀个 npm 的包，因此安装⼗分简单， 由于我们需要在所有项⽬中都可以使⽤ bower ，因此将其安装在全局环境中： $ npm install -g bower 安装完成之后，可以通过 bower search 来搜索需要的包，⽐如： $ bower search backbone.js 通常你会得到类似与这样的结果： Search results: jquery.backbone.js git:///fanlia/jquery.backbone.js.git 典型的应⽤场景可能会是这样的，⾸先新建⼀个项⽬⽬录，然后在该⽬录中运⾏ bower 的 init 命令： $ mkdir -p listing $ cd listing $ bower init Bower 会问你⼀些问题，⽐如项⽬名称，项⽬⼊⼜点，作者信息之类，然后⽣成⼀个 bower.json ⽂件： { name: listing, ver