Yeoman，bower，grunt

http://blog.sina.com.cn/s/blog_12ce411a90102w7ie.html

前段时间找到的实习公司中在使用grunt，听说是前端自动化工具，不过具体是什么意思我真的完全不懂，就像当初不知道css是什么，一模一样。接下来这段时间要逐渐了解一下grunt以及所谓的自动化工具。不可能在短时间内非常熟悉，知道使用它们的大致流程就可以了。
1.什么是前端集成解决方案？
前端集成解决方案是一套稳健强壮的工作流，包含框架和工具，便于开发者快速构建美丽实用的Web应用程序。
2.目前主流的前端集成解决方案
Yeoman，bower，grunt
3.Yeoman
在web项目的立项阶段，用它来生成项目的文件结构和代码结构。Yeoman自动将最佳实践和工具整合进来，大大方便了我们后续的开发。WebApp的脚手架。
安装Yeoman，一个标准的npm包。如果安装的时候没有-g参数，则会在当前目录中生成一个node_modules的目录，并且将相关的node程序安装在这个目录中。如果只输入npm install，没有包名，那么npm会在当前目录中寻找package.json文件，找到了，就按照这个文件中的声明去进行安装，主要看的就是dependencies，没找到就报错。
下图是安装Yeoman的命令，安装完成之后执行yo -v是不能出来版本号的，只是提供了一些操作选项让我们进行选择。
Yeoman，bower，grunt
4.Bower，web站点的包管理器。一个web站点由很多部分组成，比如框架，库，公共部分等，Bower就是用来跟踪管理这些东西的。安装和检验是否安装成功，使用
npm install -g bower和bower -v，跟前面的Yeoman是完全一样的。
5.grunt，构建工具。完成压缩，编译，代码校验，单元测试等重复且无业务关联的工作。实际上，用下面这条命令安装的并不是 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。但是要注意，Grunt-cli 只是一个命令行工具，用来执行，而不是 Grunt 这个工具本身。安装完成之后执行命令grunt，看到这个错误提示就证明安装成功了。
Yeoman，bower，grunt
Yeoman，bower，grunt
cli是如何工作的？
每次运行grunt 时，cli利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制，我们可以在项目的任意子目录中运行grunt 。如果找到一份本地安装的 Grunt，cli就将其加载，并传递Gruntfile中的配置信息，然后执行其中指定的任务。
6.使用Yeoman之前，还需要按项目的需要安装生成器generator。使用的方式如下面第二张图所示，在合适的文件路径下执行第二张图所示的命令，然后有一些互动的选项让我们选择，完全选择好之后就可以生成项目目录了。这里要说一句，生成整个项目还是需要耗费一些时间的，下载下来的文件也很多，教程中忽略了这个过程，我还以为是我的电脑出了问题……
Yeoman，bower，grunt
Yeoman，bower，grunt
7.使用Yeoman生成的项目是基于node构建的，所以必不可少的会有package.json配置文件。下图中左侧是生成项目的目录结构。
打开package.json文件，dependencies用来声明项目在生产环境中需要的依赖，而devDependencies用于声明项目在开发过程中要依赖的node包。key是包名，value是版本号。尖括号表示只限制主版本号。在我们执行npm install的时候，如果有新的可用版本，则会自动更新新版本。可以看到，图中要求rimraf的版本号是2.4.0，那么直到rimraf的主版本号升级到3之前，一直会自动更新。如果把^换成~，则表示比较严格的版本显示，也就是版本号的最后一位，这是如果rimraf发布了2.4.1版本，就不会自动更新了。
Yeoman，bower，gruntYeoman，bower，grunt
8.engines指定当前项目所需的node版本。scripts，可以直接使用npm运行的脚本命令，test的意思是，如果我们在项目目录下运行npm test，实际上执行的是
grunt test。gruntfile.js是grunt的配置文件，bower.json，bower的配置文件，指定要去网上拉取哪些相应的前端框架和组件。jshintrc是jshint的配置文件，也就是检查代码写的是否合格的标准。enditconfig是有关编辑器的配置。bowerrc是bower的本身的配置文件，比如说规定拉取到的内容存放到哪里。test目录中的文件用来执行项目的自动化测试。bower_components就是用来存放bower从线上拉取下来的前端框架。
app目录是最重要的，存放整个项目的源文件，相当于wamp中的www目录。
Yeoman，bower，gruntYeoman，bower，grunt
9.下面是bower的使用，进入到一个合适路径的文件夹中，执行下面的命令
Yeoman，bower，grunt
安装成功之后，项目目录下会有一个bower_components的目录，进入到这个目录之后，就能看到刚才下载好的jquery了。如果我们需要的文件比较小众，没有在bower注册，还可以通过其他方式安装。
<1>github的短写，也就是github项目主页左上角的用户名/仓库名。
<2>项目完整的github地址，相当于克隆的那种形式。
<3>如果需要使用的框架或者组件没有在github上，还可以直接通过url进行安装。
Yeoman，bower，gruntYeoman，bower，grunt
10.通过bower init命令，我们可以自己生成bower.json文件，这个过程中会有一些选项让我们进行选择，全部按照对应的需要选择即可。在我的windows系统中，需要用原生的cmd来进行这个操作，使用git bash不支持交互的输入，会报错。
11.使用vim自己生成一个bowerrc文件，并进行必要的配置。这些东西我目前不需要，就截取了视频教程中的演示代码。bower下载下来的组件，我们在项目中还是需要手动引入到页面中的，所以bower还需要与grunt结合起来，在使用的时候也变得方便和快捷。
Yeoman，bower，grunt
12.使用Yeoman生成一个项目，打开其中的gruntfile.js，进行分析。
use strict表示文件中的代码全部遵守es5的严格模式，严格模式体现了JS更合理，更安全，更严谨的发展方向。
Yeoman，bower，grunt
每一个gruntfile和grunt的插件都有下面这样一个最外层的基本结构，所有的grunt配置以及逻辑代码都要放在这个函数中才能生效。
Yeoman，bower，grunt
grunt把代码压缩，目录清除，创建目录等操作称为task，在initconfig中，我们配置的是一个又一个的单元task，每一个task都可以单独存在和执行。
Yeoman，bower，grunt
如下图所示的config和watch，它们的区别在于，我们有一个真实存在的task叫做grunt-contrib-watch，这个task在运行的时候，会尝试读取initConfig中的同名属性，也就是watch这个配置项，然后按照这个配置项的设定来运行。但是并没有哪一个task叫做config，也就意味着并没有哪个task会读取这里config这个配置项。
对于像config这种不针对任何task的属性，grunt会把它的值作为一个常量储备起来，以便我们通过尖括号百分号，百分号尖括号的方式，对常量加以引用。
Yeoman，bower，grunt
有一种常用的写法是这样的，意思是把package.json文件中的信息读取进来，用作配置项常量存储起来。
Yeoman，bower，grunt
如何指定grunt去加载指定的task？
Yeoman，bower，grunt
如果我们想加载多个task，有一个npm组件，只需要引用它，就可以将所有package.json文件中声明的grunt-开头的依赖项全部加载进来。
Yeoman，bower，grunt
grunt的task是任务，在task下面，我们认为除了options之外的任意命名的属性都是target，而options属性对应的，是我们为这个task，或者说这个task下的某一个target设定的配置项。
task的运行方式，就是grunt task名字。默认情况下，grunt会运行task下面所有的target，如果只想运行其中的一个，则使用task:target这种方式。
如何组合多个task同时运行？如下图，指定一个组合后的task的名字叫serve，后面可以跟一个函数或者数组。如果是函数，则通过grunt.task.run指定一个又一个task，如果是数组的形式，则在后边直接跟要运行的task。而组合后的task可以被再次组合。
Yeoman，bower，grunt Yeoman，bower，grunt
组合task和单个task的运行方式相同，都是grunt task名字。如果直接执行grunt，后面什么都不跟，则会执行default这个task。
Yeoman，bower，grunt
13.从无到有构建grunt项目。
<1>在文件夹根目录下执行npm init命令，生成一个基本的package.json文件，根据系统提出的交互问题一一设置即可。
<2>引入grunt，在根目录下执行下面的命令，后面的选项是为了在安装的同时添加到package.json文件中的devdependencies。如果安装的时候，后面跟的只是save，则会把依赖项添加到dependencies中。
Yeoman，bower，grunt
<3>再安装两个插件
Yeoman，bower，grunt
Yeoman，bower，grunt
<4>新建一个Gruntfile.js文件并编写它。还要安装两个官方提供的task，文件拷贝和文件删除。
Yeoman，bower，grunt
Yeoman，bower，grunt
<5>配置Gruntfile.js成这个样子，然后运行grunt copy命令即可复制文件，把app目录下的index.html复制到dist目录下的index.html。
Yeoman，bower，grunt
<6>配置task下面的target可以有多种格式，最终的效果都是一样的。注意第三种方式，它的key是目标目录文件，value是原文件，value还可以是数组形式，但是这种形式不支持额外参数。
Yeoman，bower，grunt

Yeoman，bower，grunt

Yeoman，bower，grunt
<7>额外的参数，flatten为true的情况下会直接把中间的各层目录去掉。
Yeoman，bower，grunt
14.开源许可证。MIT > BSD>ISC >Apache > GPL。
Yeoman，bower，grunt
15.组合任务serve。使用webapp生成器来生成一个测试项目，运行grunt serve，会直接打开默认浏览器，并且定位到localhost:9000端口，页面内容是Yeoman自动生成的项目站点。这个组合任务可以让我们实时预览本地项目在浏览器中的渲染情况，当我们修改项目文件的时候，浏览器会自动刷新，还是比较神奇的！
这时还不能通过本机的IP地址访问到项目站点，需要执行下面这条命令才可以。并且只要能连通本机的设备，都能访问站点。
Yeoman，bower，grunt
16.组合任务serve会运行一系列的task
<1>clean:server，清空.tmp目录。
<2>wiredep，通过bower.json这个文件中的配置找到components依赖，并引入到指定的html或者css文件中。通过src指定我们要处理的文件，ignorePath指定我们在插入引用文件的时候，排除掉filePath中的哪一部分。exclude指定在插入的过程中要排除的待插入文件。
<3>concurrent:server，默认情况下grunt的task都是串行的，一个执行完了另一个才继续执行，这对于那些没有先后依赖关系的task来说，完全没有必要，这个target可以让它们并行执行。
<4>autoprefixer，自动添加css浏览器前缀。
<5>watch。files用于指定监听的文件，tasks用来指定当被监听的文件发生改变的时候要执行的task。
17.组合任务test的使用
<1>判断target是否为watch，如果不是watch，则执行三个前置task。
Yeoman，bower，grunt
<2>接下来是connect:test。
<3>运行mocha这个task。mocha是一个js的测试框架，可以跑在nodejs或者浏览器中。urls指定访问哪个web server页面内容来执行测试用例。nodejs的寻路规则是，先声明，先寻路，一旦命中，不再继续寻找。
Yeoman，bower，grunt
18.组合任务build的使用。逐个执行以下task，全部了解这些东西对于我现在的水平来说是很困难的，因为其中每个任务对应的知识点并不仅仅是知识点本身，还涉及到许多相关知识。
Yeoman，bower，grunt
19.
20.

转载于:https://blog.51cto.com/maplebb/2158166