前端开发环境与最佳实践

目标

=========================

标准化、自动化、最优化----以WEB设计取代传统桌面程序界面设计

开发语言：javascript

============================

WEB时代的主流语言，最灵活的语言，社区最旺盛的语言。使用基于标准EMCAscript5的部分。部分领域可使用可编译为JS的变种语言，如coffeeScript等。

版本管理系统

===============================

开源平台使用Github，私有平台推荐使用CSDN CODE。

IDE： WebStorm

========================

集成了众多工具，十分强大，号称“前端神器”。开发其他语言或快速写代码可用SublimeText。

网上有各平台的安装包／破解补丁，照着说明安装就是了。

NodeJS和NPM

===============

NodeJs严格说是后端，但我经常把它放在客户端和浏览器共同工作，组成了广义的“前端”。这是运行基础。NPM是node的包管理器，以后作为我安装和发布软件的基地。

由于一些特殊的网络环境，直接通过npm install命令安装第三方库的时候，经常会出现卡死的状态。幸运的是国内CNode社区的@fire9同学利用空余时间搭建了一个镜像的NPM资源库，服务器架设在日本，可以绕过某些不必要的网络问题。你可以通过以下这条命令来安装第三方库：

npm --registry "http://npm.hacknodejs.com/" install underscore

如果你想将它设为默认的资源库，运行下面这条命令即可：

npm config set registry "http://npm.hacknodejs.com/"

设置之后每次安装时就可以不用带上—registry参数。值得一提的是还有另一个镜像可用，该镜像地址是http://registry.npmjs.vitecho.com，如需使用，替换上面两行命令的地址即可。

Nodejs领域: qunit做单元测试，Karma自动化完成单元测试，Grunt启动Karma统一项目管理，Yeoman最后封装成一个项目原型模板，npm做nodejs的包依赖管理，bower做javascript的包依赖管理。

Grunt

==================

任务运行器。要想项目自动化地执行各种任务和测试，拥有一个符合开源规范的文件结构，请用Grunt。

注：英文官网（http://gruntjs.com/）说得比grunt中文网详细些。

安装grunt,均通过nodeJS的npm。

在全局环境中安装 Grunt 的命令行接口。

npm install -g grunt-cli

下载一个grunt范例项目，如https://github.com/cowboy/jquery-tiny-pubsub

在它的根目录下，运行 sudo npm install 安装项目依赖库；

*qunit这个依赖库（连同其WEB框架phantomJS)可能安装不上，可运行 npm install 单独安装；

npm install grunt-contrib-qunit --save-dev

（事实上所有依赖库都可以在https://github.com/gruntjs里找到）。

安装必要的grunt插件

npm install grunt --save-dev

好了，安装完毕，可以测试了。

在项目根目录下运行 grunt，测试结果就会显示出来。

项目构建工具Yeoman

=============================

Yeoman是Google的团队和外部贡献者团队合作开发的，他的目标是自动搭建一个项目的主要结构，建立合理的工作流，管理各种依赖关系／包，自动化运行各种检查和测试等， 优化代码和图片等。

Yeoman其实是集成了一大堆开源工具（这些工具均有各自社区维护），主要有三部分组成：yo（脚手架工具）、grunt（一个用于开发任务自动化的命令行工具）、bower（包管理器）（当然也可以使用npm)。这三个工具是分别独立开发的，但是需要配合使用，来实现我们高效的工作流模式。

YOMAN的特性

闪电般的初始化：项目开始阶段，可以基于现有的模板框架（例如：HTML5 Bolierplate、Twitter Bootstrap）进行项目初始化的快速构建。

了不起的构建流程：不仅仅包括JS、CSS代码的压缩、合并，还可以对图片和HTML文件进行优化，同时对CoffeScript和Compass的文件进行编译。

自动编译CoffeScript和Compass：通过LiveReload进程可以对源文件发生的改动自动编译，完成后刷新浏览器。

自动Lint代码：对于JS代码会自动进行JSLint测试，确保代码符合最佳编程实践。

内置的预览服务器：不再需要自己配置服务器了，使用内置的就可以快速预览。

惊人的图片优化：通过使用OptiPNG和JPEGTran来优化图片，减少下载损耗。

杀手级包管理：通过bower search，可以快速安装和更新相关的文件，不再需要打开浏览器自己搜索了。

PhantomJS单元测试：可以非常方便的使用PhantomJS进行单元测试，一切在项目初始的时候都准备好了。

官网http://yeoman.io

Yeoman的安装(Linux平台）：

只需一行sudo npm install -g yo

这将使yeoman被全局安装在usr/local/lib/node_modules/yo 下面，从任何地方均可访问。

安装项目模板

Yeoman有很多基本的模板引擎（generator），如AngularJs的，mobile的等，安装一个模板引擎就等于搭好了一个项目的脚手架。

我们可以先安装一个基本webapp模板看看。只需输入命令：

sudo npm -g install generator-webapp //这等于安装了模板引擎，奇怪的是它不在上述的/yo里面，而也在usr/local/lib/node_modules文件夹下。

然后新建一个项目文件夹，进入这个文件夹后，运行 yo webapp 就可以自动搭建一个基本的webapp了，各种文件都已经建好了，包括index.html, test, css, package.json和gruntfile.js。其实是通过npm自动下载安装和很多库，包括 HTML5 Boilerplate, jQuery, Modernizr, and Bootstrap.注意，这个模板是用Mocha做测试框架的。

这时，你可以通过运行grunt serve 来启动一个WEB服务器（运行在9000端口），浏览你的项目了。

打开浏览器，访问http://localhost:9999， 一个简单的网站就出现在你面前！更改内容后，还是自动刷新的。（但你不能终止命令行端的WEB服务器，否则页面就无法访问了）.

然后可以用grunt test命令来启动自动测试。

自动测试工具Karma

=======================

Karma是一个测试运行器（Test Runner），可以自动运行用各种测试框架（如jasmine/qunit/mocha)编制的测试集，并立即反馈结果，十分适合前端的测试驱动开发（TDD）。被认为是所有前端测试工具中的王牌。该工具可用于测试所有主流Web浏览器，也可集成到CI（Continuous integration）工具，也可和其他代码编辑器一起使用。这个测试工具的一个强大特性就是，它可以监控(Watch)文件的变化，然后自行执行，通过console.log显示测试结果。

官网：http://karma-runner.github.io/ GIT主页：https://github.com/karma-runner/karma

当然，你可以通过$ npm install karma --save-dev 将karma安装在本地文件夹中，但更简便的方式是通过yeoman安装angular模板，其中自带了karma，而且配置好了！

通过Yeoman安装十分简便。首先安装generator-angular：

$sudo npm install -g generator-angular

这将在usr/local/lib/node_modules中安装generator-angular和generator-karma两个模板引擎。

注意：安装选项中不要选sass/compass，因为这需要ruby配合。没装ruby就无法运行服务器。

安装好后，运行grunt，将在／dist中生成可发布的版本。 运行grunt -serve,启动服务器；运行grunt test，启动karma unit test。

注意：默认的generator-angular生成的模板是使用PhantomJS（一个没有界面的JS解释器）进行浏览器模拟，这样测试比较快，但不能完全测试在目标浏览器内的表现，而且测试结果是在控制台显示的。如果要在真实浏览器内测试，需要安装相应的Karma插件。比如karma-chrome-launcher，并修改karma.conf.js:

browsers: [

//'PhantomJS'

'Chrome'

],

// Which plugins to enable

plugins: [

//'karma-phantomjs-launcher',

'karma-chrome-launcher',

'karma-jasmine'

],

单元测试框架Jasmine

========================

好的单元测试框架是TDD成功的一半。Javascript优秀的测试框架很多, 包括Jasmine，Qunit，JsTestDriver，JSUnit，Mocha等，当然你也可以写自己的单元测试框架。经过对比，Jasmine是其中的佼佼者，我喜欢Jasmine的断言风格，而且它也集成在generator-angular里面，无需另行配置。这是karma.conf.js中缺省设置的：

// testing framework to use (jasmine/mocha/qunit/...)

frameworks: ['jasmine'],

......

// Which plugins to enable

plugins: [

//'karma-phantomjs-launcher',

'karma-chrome-launcher',

'karma-jasmine'

],

当然，如果你喜欢qunit或其他单元测试框架，你可以修改framework选项并安装相应的karma插件来实现。

Chrome调试插件Batarang

=======================

方便的实时调试工具，可以调试AngularJS元素。通过Chrome的plugin平台安装，然后在tools-developer tools中就有angularJS选项了。

必备的框架和库

========================

AngularJs, 前端基础MVC框架。其directive可以编写DSL（面向领域语言）。

jQuery，这个不用说了，操作DOM的神器，开发前端必备。

bootstrap, 标准化的UI，用起来很方便。相关的设计库有一大堆，都在http://www.bootcss.com/

Underscore 一个强悍的JavaScript实用库,包括80多个工具函数，涉及数组、对象、字符串、函数操作等。其中的template可以通过JSON数据源生成复杂的HTML。

Math.js 强大的数学计算库。虽然javascript本身有一些数学函数，如开平方、三角函数等，但比较简单。Math.js带来了处理数字、大数、复数、单位和矩阵的内置工具，使应用程序开发中的数学处理变得简单。

EJDB： 嵌入式NoSQL数据库。通过Node.js访问。

ECharts：种类最全的图表库，大数据时代最快速的数据可视化工具。

ZRender：一个轻量级的Canvas库，实现多种绘图和动画功能，MVC封装，事件驱动，提供类DOM事件模型。

jsPDF: 生成PDF的库

three.js：是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。

各种javascript库就像取之不尽的百宝箱，就看你想用什么了……

模块化管理-Sea.js

=================
最好用的浏览器端模块化管理工具。如果node.js运行在本地，可以只使用node.js的。

CSS预编译器--Stylus

=========================

使用CSS预编译器可以象编程一样编写CSS，极大方便了大型CSS的组织，并可以做到强大而灵活。在三大CSS预编译器SASS／LESS／STYLUS中，SASS基于Ruby，LESS功能较弱，而Stylus出自nodeJS社区，书写简洁，可编程性最强，而且有nib这样的CSS3库支持。所以选择Stylus。

关于三大预处理器的对比，请阅读http://www.cn-sass.com/css/css-preprocessor-sass-vs-less-stylus-2.html。

Stylus官网：http://learnboost.github.io/stylus/

nib库官网：http://visionmedia.github.io/nib/

中文学习网站：http://www.zhangxinxu.com/jq/stylus/