Grunt-beginner前端自动化工具

本文内容源于慕课网 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