本文内容源于慕课网 http://www.imooc.com/
学习本课程能解决哪些前端问题?
1.开发团队代码风格不统一,如何强制开发规范
2.前期开发的组件库如何维护和使用
3.如何模块化前端项目
4.服务器部署前必须的压缩,检查流程如何简化,流程如何完善
1-1 学习目标与内容
1.什么是前端集成解决方案
2.主流的方式有哪几种?
3.Grunt的定位?
4.目前Grunt 的竞争者
主要内容:
1.什么是前端集成解决方案?
草根派认为是解决前端工程的根本问题
学院派认为是一套包含框架和工具,便于开发者快速构建美丽实用的Web应用程序的工作流,同时这套工作流必须是稳健强壮的。
2.主流的前端集成解决方案?
Yeoman,Bower,Grunt,Gulp
整套可视化的APP:CodeKit https://incident57.com/codekit/
百度团队的FIS:http://fis.baidu.com
腾讯alloyteam团队出的Spirit:http://alloyteam.github.io/Spirit/
3.Grunt的定位是?
Grunt的定位是Build tool
4.目前Grunt的竞争者:
jasy https://github.com/zynga/jasy
Buildy https://github.com/mosen/buildy
2-1 node JS 简介
Grunt 本身是基于Node js 构建的。Node JS让JS来编写服务端程序
课程介绍:
1.Node 环境的安装
2.命令行的使用
3.Node 项目的基本结构
主要内容
1.Node JS 环境安装
Node JS 官网:http://nodejs.org/
Mac系统可以使用HomeBrew : http://brew.sh/
Linux : apt-get,yum等
2.Node JS 命令行
注意:用户名不要有空格
命令行工具:
Mac用户可以试试 iTerm ,完美替代原生控制台。
windows系统虽然提供了cmd窗口,但并不支持bash脚本。
为了保持操作上的一致性,建议安装git,因为git提供了git bash shell尽量拟补了这个缺陷。
NPM——Node Package Manager 是一个Node 包管理和分发工具。
类似于ruby 的gem,python 的pypi、setuptools,PHP的pear。
Node JS有基本模块,框架和库。NPM可以很快找到特定服务要使用的包,进行下载、安装和管理。
PHP=Personal Home Page
GNU=GNU's Not Unix
NPM=Node Package Manager
NPM不需要单独安装,在我们安装Node JS 的时候就已经自动安装NPM了。
安装Grunt 的Mac代码示例:
$ npm install -g grunt-cli
其中-g 是全局安装的意思。
如果没有-g会什么样?让我们试一试。
首先,在本地新建目录,命名为testnodejs。mkdir就是bash的创建目录的命令。
$ mkdir testnodejs
进入刚才创建的目录。cd 是进入目录命令。
$ cd testnodejs
安装grunt
$ npm install grunt-cli
如果安装grunt的时候没有带-g,则会在当前目录生成一个node_modules目录,将相关程序安装在该目录里面。grunt-cli已经安装在里面。
Node JS提供一个叫package.json的配置文件。如果执行的install 后面没有任何指令的话
$ npm install
则npm 会去当前目录下面寻找package.json,找到后就按照package.json文件里的声明进行安装。如果没找到则会报错。
2-2 Yeoman,Bower,Grunt 简介及安装
Yeoman:现代Web App的脚手架工具。
Yeoman的作用:在Web项目的立项阶段,使用Yeoman来生成项目的文件,代码结构。Yeoman自动将最佳实践和工具整合进来,大大加速和方便了我们后续的开发。
Yeoman如何保证用户用到的就是最适合当前项目的呢?
Yeoman 的开发者早就预想到了这一点,所以维护了一套生成器的生态。
如果把Yeoman 比作橡皮泥,那么生成器就是橡皮泥的模具。比如说,如果用户在将来的项目中主要使用AngularJS进行开发,我们就可以找AngularJS web APP的生成器。如果我的项目主要是在mobile上跑的,那么我们就可以找mobile web app 的生成器。
但不管怎么变,Yeoman还是为我们统一了现阶段供认的“代码校验”——“测试”——“压缩”等最基本功能的流程,其余部分则交给生成器自由发挥。
安装Yeoman
Mac 示例代码
$ npm install -g yo
npmjs.org注册的名字为yo,而不是yeoman全称。npmjs.org先去找到这个名字再进行下载安装。安装完成后输入
$ yo -v
如果安装成功,则会出现yeoman版本号,比如 1.3.3
Bower 安装
官方站点:http://bower.io/
安装指令:$ npm install -g bower
验证方法:$ bower -v
Bower 是web 的包管理器。
web站点组成:框架,库,公共部分等。
Bower则用来跟踪管理这些。
Grunt 安装
官方站点 :http://gruntjs.com/
安装指令:$ npm install -g grunt-cli
验证方法:$ grunt
Grunt 是Build tool
为什么我们需要Build tool?
自动化——减少像压缩,编译,单元测试,代码校验这种复杂且无业务关联的工作。
为什么选择Grunt?
因为Grunt 生态太强大了,只要你能想到的任务都能找到Grunt 相关的自动化插件。并且Grunt 一直在持续增长。重复安装会报错。
3-1 Yeoman实践
Yeoman还需要各式各样的模具:Generator
Yeoman 官网的第二个tab 即 "Discovering generators" 就是Generator 的收纳页。
Angular.js是MVC或者MVVM的框架。
Generator需要各取所需,自行安装。
例如安装AngularJS的生成器
$ npm install -g generator-angular
同理mobile的如下
$ npm install -g generator-mobile
同理webapp如下
$ npm install -g generator-webapp
创建测试目录
$ mkdir yo-in-action
$ cd yo-in-action
$ mkdir angular-in-action
$ cd angular-in-action
生成一个angular 项目,命名为learnangular
为了说明这里指定的项目名和我们自己生成的项目目录的不同,所以项目名为learnangular
$ yo angular learnangular
提示would you like to use Sass?Y
Sass可以看成css的一种扩展语言。类似的还有less。Sass是基于ruby构建的,所以要求机器上已经安装ruby环境,以及Sass和Compass。Compass是在Sass基础上二次开发的一套框架,拥有更丰富的功能。
提示would you like to include Bootstrap?Y
bootstrap 是一个简洁,美观,强悍的前端开发框架,其主要的发力点在于整站风格和一些通用组件的使用上。bootstrap最早的版本是使用less进行css编写和管理的。随着Sass越来越火,bootstrap 官方也维护了一个Sass版本。
提示would you like to use the sass version of bootstrap?Y
which modules would you like to include?可选用的Angular 基本组件的扩展插件。全选。
空格是选择与取消选择。上下切换,选中后,回车确定。
$ pwd 查看当前工作目录
$ ls -al 列出当前目录下文件的bash命令,-al是列出详细文件
对项目进行进一步阅读,yeoman生成的项目本身是基于node构建的项目,对于一个node 项目首先是阅读package.json文件,里面包含了这个项目最直观的描述,比如:"name":"learnangular"
这个名称是项目名称,而不是项目目录名称。
“version”:“0.0.0”
这个版本号是随着项目更迭而增加的。
“devDependencies”:{
“grunt”:“^0.4.1”,
......
} 开发过程中所要依赖的包,其中的value 是以object 栈值对的形式存在。key 是包名,value 是版本号。尖括号是一个比较宽松的对版本的限制,它只限制主版本号。npm会自动更新版本。但不会更新到1.X.X,只会更新到0.X.X版本。
"dependencies":{} 项目在生产环境中需要的依赖,为什么为空呢?因为虽然我们的开发项目是一个node项目,但最终发布的是一个站点,并不是一个node项目,声明也是没有意义的。
喜欢就会放肆,但爱就是克制。——《后会无期》
删除当前目录中的node_modules
$ rm -rf node_modules
其中 rm 是删除目录命令,修饰参数 -rf 表示递归删除且不需要二次确认
删除之后执行
$ npm install
node_modules 就是用来存放我们开发过程中所依赖的node包的。
在angular-in-action中
Gruntfile.js 是 grunt 的配置文件。
bower.json 是bower 的配置文件。
travis.yml 为开源打造的集成环境。如果我们有一个开源项目放在github上面,travis 是一个完美的选择。
jshintrc 是jshin配置文件。
gitgnore 忽略当前不上传到git的文件。
。。。
test 目录中的文件是用来执行项目中的自动化测试。
node_modules 上文已经提过了。
bower_components 用来存放bower从线上拉下来的前端框架。
app 是最重要的,存放我们整个项目的源文件。包括html文件,images 图片,scripts 脚本,styles 样式,views 存放的是angular 的 views .
如何在前端自动化测试中模拟用户的操作? http://www.zhihu.com/question/19829928
如何进行前端自动化测试?http://www.zhihu.com/question/29922082