Yeoman

官方站点：http://yeoman.io    ---   http://materliu.yo.org/

安装指令：npm install -g yo

验证方法：yo -v

定义：现代webapp的脚手架工具

作用：在web的立项阶段，使用yeoman来生成项目文件，代码结构。yeoman自动将最佳实践和工具整合进来，大大加速和方便了我们后续开发。

Bower

官方站点：http://bower.io -- materliu.bower.org

安装指令：npm install -g bower

验证方法：bower -v

定义：web的包管理器

组成：框架、库、公共部分等，bower主要用来跟踪管理它们

Grunt

官方站点：http://gruntjs.com

安装指令：npm install -g grung-cli

验证方法：grunt

定义：build tool

作用：减少像压缩，编译，单元测试，代码校验这种重复且无业务关联的代码

Yeoman实战

站点：materliu.yo.org/generators

安装angular:npm install -g generator-angular

（1）如何使用？

创建测试目录：mkdir yo-in-action 

进入测试目录：cd yo-in-action 

创建项目目录：mkdir angular-in-action 

进入项目目录：cd angular-in-action 

生成angular项目：yo angular learnangular

（2）相关命令：

pwd：查看当前目录

ls -al：所有详细文件列表

rm(删除目录) -rf(修饰参数递归删除且不需要二次确认) 文件名

（3）package.json解析

dependencies:项目在生成环境中所需要的依赖

devDependencies:开发过程中所依赖的包

^（尖括号）是指一个比较宽松的对版本的限制，它只限制主板本号(0.4.2 0.4.9 0.5.0)

~比较严格(0.4.2 0.4.9)

（4）其他文件解析

Gruntfile.js

grunt配置文件

bower.json

bower配置文件，前端框架和组件

.travis.yml

为开源打造持续集成环境

.jshintrc

jshint的配置文件

.gitignore

忽略当前不上传到git文件

.gitattrubutes

git配置项

.editorconfig

第三方配置文件

.bowererrc

bower自身配置项

app

文件项目文件

views

angular views

Bower实战

（1）如何使用？

创建测试目录：mkdir bower-in-action 

进入测试目录：cd bower-in-action 

创建项目目录：mkdir jquery-bootstrap-in-action 

进入项目目录：cd jquery-bootstrap-in-action 

下载安装：

bower jquery

bower bower

进入bower_components：cd bower_components

查看详细目录文件：ls -al

Grunt实战

（1）如何使用？

创建测试目录：mkdir grunt-in-action 

进入测试目录：cd grunt-in-action 

创建项目目录：mkdir grunt-by-yo

进入项目目录：cd grunt-by-yo

生成webapp项目：yo webapp grunt-by-yo

Grunt老项目

（1）如何使用？

创建测试目录：mkdir grunt-in-action 

进入测试目录：cd grunt-in-action 

创建项目目录：mkdir grunt-empty

进入项目目录：cd grunt-empty

创建app/index.html和app/js/index.js

创建package.json：npm init

安装：

npm install grunt --save-dev

npm install load-grunt-tasks --save-dev

npm install time-grunt --save-dev

npm install grunt-contrib-copy --save-dev

npm install grunt-contrib-clean --save-dev

创建notepad Gruntfile.js

配置Gruntfile.js

命令：grunt copy

(多出一个dist文件夹，含有index.html)

命令：grunt clean

(dist文件夹下index.html消失)

'use strict';module.exports = function(grunt){// 引入require('load-grunt-tasks')(grunt);require('time-grunt')(grunt);// 配置项目路径var config = {app:'app',dist:'dist'}// 任务配置grunt.initConfig({config:config,copy:{/*dist_html:{// 源文件,数组或字符串src:'<%= config.app %>/index.html',// 目标文件，你会发现多出一个dist文件夹，且下面有个index.htmldest:'<%= config.dist %>/index.html'},dist_js:{src:'<%= config.app %>/js/index.js',dest:'<%= config.dist %>/js/index.js'}*//*dist:{files:[{// 源文件,数组或字符串src:'<%= config.app %>/index.html',// 目标文件，你会发现多出一个dist文件夹，且下面有个index.htmldest:'<%= config.dist %>/index.html'},{src:'<%= config.app %>/js/index.js',dest:'<%= config.dist %>/js/index.js'}]}*//*dist:{files:{'<%= config.dist %>/index.html': '<%= config.app %>/index.html','<%= config.dist %>/js/index.js': ['<%= config.app %>/js/index.js']}}*/dist_html:{files:[{expand:true,cwd:'<%= config.app %>/',src:'**/*.js',dest:'<%= config.dist %>/',ext:'.min.html',extDot:'last',flatten:true,    // true将中间各层目录去掉rename: function(dest, src){   // 找回去掉的中间各层目录return dest + 'js/' + src;}}]}},clean:{dist:{/* 你会发现dist下的index.html消失了src:['<%= config.dist %>/index.html','<%= config.dist %>/index.js']*/// 就连js文件夹也会删除，要是不想删除js文件夹就需要引入额外参数src:['<%= config.dist %>/**/*'],/**方法一filter:'isFile'*方法二filter:function(filepath){return (!grunt.file.isDir(filepath))}*/}}});
}