搭建前端开发环境

采用node + grunt + bower + karma + jasmine搭建前端开发环境。(windows环境为例)

  • 安装开发包的工具:node (安装grunt,bower,karma,karma-jasmine等开发和测试工具包)

  • 构建工具:grunt (合并,代码检查、压缩等,以及可以插件式植入其他task)

  • Js库依赖管理工具:bower (管理开发用到的js、css库,例如:jquery, angular,bootstrap)

  • 测试框架:karma + jasmine

步骤一:安装node

到官网https://nodejs.org/en/download/下载并安装,配置好环境变量。

在cmd下输入命令:

node -v

输出node版本号,则表明node安装成功。

一般情况下,npm也就安装好了,输入命令验证一下:

npm -v

输出npm的版本号。如果npm未安装,请自行安装npm。

npm全称Node Package Manager,是Node JS包管理和分发工具。有了npm,下面的安装直接命令搞定。

步骤二:安装grunt

先安装grunt-cli,是grunt的命令行工具,有了它才能在cmd里执行grunt命令。

npm install -g grunt-cli

其中,“-g”的意思是全局安装。

验证安装成功与否,执行命令:

grunt --version

输出grunt-cli的版本号。

由于目前的grunt必须安装在项目目录,这里暂时不安装grunt,下一篇实战篇介绍grunt,但先记下安装命令:

npm install grunt

步骤三:安装bower

执行安装命令:

npm install -g bower

验证安装成功与否,执行命令:

bower -v

输出bower版本号。

步骤四:安装测试框架karma + jasmine

执行安装karma的命令:

npm install -g karma

验证安装成功与否,执行命令:

karma start

输出karma服务启动在http://localhost:9876,访问此网址可看到“Karma 版本号 - Connected”字样。

安装集成包karma-jasmine,执行命令:

npm install -g karma-jasmine

安装以下js库,以增强测试框架。

  1. karma-chrome-launcher:开始测试时,会自动启动chrome浏览器(需已经安装好chrome浏览器),并开始执行测试用例。

  2. karma-coverage:测试覆盖率,测试执行完成后自动生成覆盖率报告,网页方式展示,相当友好。



copyright = {
    "作者": "墨衣夜行", 
    "本文链接": "http://my.oschina.net/letao/blog/516056"
}


你可能感兴趣的:(搭建前端开发环境)