AngularJS + CoffeeScript 前端开发环境配置详解

AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传。由其从jQuery中完全转入AngularJS后就有无法离开他的感觉了。虽然AngularJS的学习曲线很陡峭,入门的门槛相比较高,但这些付出都是值得的相信用过的朋友都会与我有同感吧。为何我如此
地偏爱AngularJS? 或者这样说吧,用AngularJS开发的话其实是给我了一种工业化开发的概念,我对软件工业化的浅显理解简单归结为几点就是:

自动化

智能化

注重质量

注重工艺

前端开发比后端开发要求开发人员做更多繁杂的事,例如:js和css 的压缩、依赖引入、更新,图片压缩、“糖果语言(coffeescript/less/sass)”的语法检查与编译、静态图片/静态网页压缩,单元测试、E2E测试、等等。这些锁事往往很耗时间。

再者,当引入AngularJS作为主前端框架的话,大量的js源文件管理对文件结构与模块结构合理规划就显得更为之重要。所幸的是,google 是AngularJS工业化的主力推手,为了增加前端开发人员的生产力他们也不遗余力地做了很多工作,,他能快速地为我们建立各种类型项目的脚手架(项目模板),以他们的“最佳实践”为基础快速地为我们完成这一系列繁琐的工作。

我在实际项目开发觉得官方提供的 angular 生成器并不是十分合用,在经历了好几个项目的磨合后我在 google 官方的 yeoman angular 脚手架项目上进行了一些定制与修改,也在此作一些分享,由于时间关系还没有去将其成一个generator 所以只能在此以博文方式共享了。

如果对Yeoman不了解也不用要,本文将会独立于yeoman 一步一步详细地解释如何部署一个可以用于生产AngularJS前端开发环境。

工具

以下这些可谓是前端开发必备了,如果不清楚具体用法那么就先请去他们的官网先脑补吧:

npm
Node的依赖包管理工具,可以到 [nodejs 官方下载|]页面获取安装包。

** bower **

bower 是由twitter开发的客户端依赖包管理工具

npm install -g bower

** grunt **

自动化任务管理工具,是整个自动化工程的核心。

npm install -g grunt-cli

安装此三大工具后我们就可以着手开始了。

实现的目标功能

基于 CoffeeScript并支持自动编译

能支持 livereload(一但任何代码、资源发生更改浏览器会自动刷新)

自动编译 less

支持 ngdocs 从 CoffeeScript 自动提取注释生成 API文档网站

自动 连接、最小化靜态资源,包括:脚本、图片、网页

自动将bower引入的依赖包注入页面

配备 Karma 的单元测试

配备基于 protractor 的e2e测试

基本目录结构

以下是基本项目目录的构成以及每个目录的功能说明

项目目录/
├── app // 应用程序目录
│ ├── bower_components // bower 组件目录 (由 bower 生成)
│ ├── fonts // 字体
│ ├── images // 图片资源
│ ├── styles // 样式目录 可存放 .css 和 .less
│ └── scripts // 应用程序脚本
│ └── app.coffee // angularJS 应用程序文件
│ └── index.html // HTML HOME 文件
├── dist // 发布后的程序目录
├── test // 测试程序目录
│ ├── mocks // 存放mocks组件文件目录
│ ├── e2e // e2e测试文件目录
│ └── spec // 单元测试文件目录
├── node_modules // NodeJS 的组件目录 (由 npm 生成)
├── docs // 存放生成文档
├── .tmp // 临时文件目录 (由 grunt 任务自动生成)
├── .bowerrc // bower 路径规则指定文件
├── conffeelint.json // CoffeeScript 语法检查规则
├── Gruntfile.js // grunt 配置文件
├── karma.conf.js // karma 配置文件
├── protractor.conf.js // protractor 配置文件
├── package.json // nodes 依赖包描述文件
└── bower.json // bower 依赖包描述文件

流程及原理

此项目环境主要提供三种主要的运行方式,分别适用于项目生命周期中的不同的时期,更准备地说应该是适用于不同的场景。

生成模式 - build

将所有的文件生成至产品交付目录 dist 内,执行包括:

coffeescript/less

编译

连结

压缩

引用修正,包括 angular 动态注入修正

拷贝

输出必要的静态文件

网页

图片

字库

输出注释文档并生成文档网站

指令:
grunt build

测试模式 - test

多用于开发期,进行自动化单元测试或是e2e测试,考虑到e2e测试的使用频率相对于单元测试要低,故此 test指令只默认执行所有单元测试,
而要执行e2e测试则需加入 e2e 参数作明确指定。

指令:
grunt test
- e2e -
grunt test:e2e

如果加入 keepalive 参数的话,test 指令将直接运行于后台,且会检测所有的文件变化,一但文件发生更改测试将会自动被重新执行。

这种情况多适用于测试程序的编写与调试。

grunt test:keepalive 调试模式 - debug

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/01027a6efbaa1e077b75be97a6fd0b1d.html