|
视频地址：http://www.imooc.com/learn/30
一、什么是前端集成解决方案？
一套包含框架和工具，便于开发开发者快读构建美丽实用的web应用程序的工作流，同时这套工作流必须是稳健强壮的。
二、前端集成解决方案主要解决那些问题？
1.统一风格。2.前期组件库维护。3.模块化前端项目。4.压缩简化
三、目前主流的前端集成解决方案？
前端自动化工具yeoman , bower, grunt | gulp 整套流程整合可视化的app : Codekit（Mac）国内的流程整合可视化的app ：百度的FIS , 腾讯的Spirit 四、NodeJS环境的安装 参见：http://blog.csdn.net/aaa333qwe/article/details/75643372 五、命令行工具 window环境：git -->git bash 六、 npm安装包 执行node install ，查找目录下package.json ，
1、yeoman (现代Web App的脚手架工具) (1)、yeoman提供了代码校验、测试、压缩等基本功能，生成器自由发挥。
(2)、安装：终端输入：npm install -g yo
注：注册名与商标名不同。注册名是yo，商标名是yoman (3)、查询版本号：终端输入：yo --version (4)、yeoman 在web项目立项阶段 生成项目文件，代码结构，自动整合最佳实践工具
2、bower （web的包管理器，用来跟踪管理框架，库，公用部分）
(1)、全局安装 npm install -g bower (2)、比如我们web工程要使用jquery1.11.1版本，之前我们要亲自到jquery公网上将这个版本下载下来，然后使用，现在只需要将这个版本号告诉bower就可以了
(3)、查询版本号终端输入：bower -v
3、grunt （build tool）（外注：构建工具） (1)、自动化，减少像像压缩，编译，单元测试，代码校验这种重复且无业务关联的工作。
(2)、安装：终端输入：npm install -g grunt-cli
(3)、执行，看是否安装成功。终端输入：grunt
如果出现错误消息：fatal error: unable to find local grunt，就是安装成功了。（出现错误提示的原因：grunt cli会执行当前目录中package.json文件中指定安装的grunt版本来读取我们当前所在目录下的grunt file 的配置文件，然后按照其中的配置项来对我们的项目进行自动化。为什么这样设计？为了让多个grunt版本并存来支持新老项目） 七、为什么我们需要Build tool? 自动化，减少像像压缩，编译，单元测试，代码校验这种重复且无业务关联的工作。优选grunt | gulp。 八、yoman实践 1、yeoman 只是一堆橡皮泥，还需要各式各样的模具--Generator
2、使用yoman创建工程：
使用generators生成，generators并不是随意生成的，需要各取所需，自行生成。比如生成一个angular项目工程需要使用generators-angular
安装angular/webApp工程：npm install -g gengerators-angualr/gengerators-webapp
创建工程所在的目录：mkdir yo-in-action
进入目录：cd yo-in-action
创建工程所在目录：mkdir angular-in-action
进入目录：cd angular-in-action
创建工程（例：工程名为“learnangular”）：yo angular learnangular 3、npm install /npm update 就会更新所在项目dependecies 中的包~波浪号，是一个比较严格的版本限制，要求只能是最小的版本号的更新。0.4.6支持，但是0.5.X 就不支持了
尖括号：0.5.X支持，直到1.X.X 就不支持了。
啥都不加，末版本号锁定 4、注意sass是基于ruby构建的，因此电脑上应已经安装了ruby。ruby安装参照：http://www.runoob.com/ruby/ruby-installation-windows.html 九、package.json 文件解析
name: 项目名
version: 版本号
dependecies:项目生产环境中需要的依赖的node包----web站点是没必要加，因为只有站点发布
devDependecies:开发过程中所要依赖的node包
----"包名":"版本号"//^尖括号代表 比较宽松的对版本的限制，只限制主版本号
eg: "grunt":"^0.4.1" //如果安装的时候 grunt发布了0.4.6安装时会自动更新
1.X.X时 则只能更新到 0.X.X的版本 【比较宽松】
----------------- ~波浪号代表 比较严格的版本限制
eg:"grunt":"~0.4.1" //如果安装的时候 grunt发布了0.4.6安装时会自动更新
0.5.0时 则不会 【比较严格】
"engines":{"node":">=0.10.0"}//表指定所需的node版本
"scripts":{ //可以直接使用npm的脚本命令
"test":"grunt test" //如果在当前项目所在目录下执行npm test 其实是执行 grunt test
}十、yoman构建项目目录解析
Gruntfile.js grunt配置文件
bower.json bower配置自动下载哪些框架和工具 .bowerrc bower本身的配置文件，比如线上的框架，下载后存放的目录eg:bower_components .travis.yml 为开源打造的集成开发环境.jshintrc jshin配置文件.gitignore 忽略当前不上传到git的文件.gitattributes git配置项.editorconfig 编辑器设置test 自动化测试app 项目源文件
十一、bower实践 1、bower.json的作用跟package.json类似,也是方便新用户根据其中的配置项安装项目所用到的插件和组件
2、步骤：
bower install 项目名 --save-dev开发环境 保存配置到bower.json的devDependencies配置项里
bower install 项目名 --save生产环境 保存配置到bower.json的dependencies配置项里
bower init 开始指示进行构建bower.json 类似 npm init 创建package.json
bower install 会按照bower.json的配置依次地从线上下载相应的框架和工具 vim .bowerrc 搭建配置文件 directory目录，proxy代理 proxy:"http://proxy.tengxun.com:8080","https-proxy":"https://proxy.tengxun.com:8080"bower会先去找要安装的组件是否在他的注册库里，然后再去github找相应的安装地址 3、原来.bowerrc还有这么多设置的"directory" : "bower_components" 线上的框架，下载后存放的目录proxy代理 ： "proxy" : "http://proxy.tengxun.com:8080", "https-proxy" : "https://proxy.tengxun.com:8080" "timeout"：60000ms， 设置过时时间 4、四种方式使用bower安装库(1). 使用库在bower上的注册名
(2). 使用github短写
(3). 使用github仓库全称
(4). 使用url 十二、grunt实践中的Task，Target和Options
## take:任务 target:目标 option:操作
1、为什么我生成的webapp里边没有gruntfile.js而是gulpfile.js
方案一：你所使用的generator-webapp版本不对，在0.6.2以后就没有gruntfile.js文件了！ npm install generator-webapp@v0.6.2 方案二： 因为在新版本的webapp里面用gulp代替了grunt，gulp和grunt其实差不多，不过要跟着视频学习的话，可以用angular这个生成器,安装方法前面视频有说。
|
1
|
yo angular yourProjectName
|
之后，会询问是否用gulp代替grunt，选择否就可以了 方案三： generator-webapp grunt所需版本注意：yeoman选用了v1.3.2 ，generator-webapp 选用了v1.0.1，否则是生成gulpfile.js
相关代码：npm install yo@1.3.2 –g //安装1.3.2的版本
npm install generator-webapp@1.0.1 –g //安装1.0.1的版本总结 : 老师的yeoman是旧的版本，当时yeoman采用的是grunt，现在已经采用gulp了，所以才会出现你说的问题。gulp和grunt是类似的，都是工程化工具，很多任务（task）的配置原理都是相同的，不过gulp目前大有超过grunt的趋势，所以建议你直接采用gulp即可。出现gulpfile.babel.js之后，在命令行输入gulp server，然后回车查看网页效果2、modernizr 用来检测用户浏览器是否支持默写h5和css3新特性的一个JS库 十三、从无到有Grunt项目 1、
开源许可证
（宽严程度排序）MIT --->BSD--->ISC--->Apache--->GPL(Liunx)
MIT最宽松，作者只想保留版权无任何其他限制
2、GruntFile.js需要做一定的修改
mpn init:create packge json file
npm install grunt -sve-dev
npm install load-grunt-tasks --save--dev
npm install time-grunt --save-dev
require('time-grunt')(grunt): 执行grunt命令后，统计task执行时间。
require('load-grunt-tasks')(grunt): 加载配置文件中所有依赖的task。
3、Grunt Files 处理方式
(1)、安装grunt常见的task
说明：图中的"copy"、"clean"等是task，其中的"dist_html"、"dist"是target，而且只是target名字，可自定义；其中的"src"、"dest"是属性。
npm install grunt-contrib-copy --save-dev
eg:
copy:{
dist_html: {
files: [
{
expand: true,
cwd: '<%= config.app %>/',
src: '**/*.js',
dest: '<%= config.dist %>/',
ext: '.js',
exDot: 'first',
flatten: true,
rename: function(dest,src){
return dest + 'js/' + src
}
}
]
},
},
npm install grunt-contrib-clean --save-dev
eg:
clean:{
dist: {
src: ['<%= config.dist %>/**/*'],
filter: function(filepath){
return(!grunt.file.isDir(filepath))
}
//makeBase：如果设置为true，就只匹配文件路径的最后一部分。比如，a?b可以匹配/xyz/123/acb，而不匹配/xyz/acb/123
makeBase：true, }
},
参数说明：
ext表示是否修改目标文件的后缀名
ext:'.min.html'
extDot表示修改的位置
extDot:first 从第一个点开始
flatten是否保留目录
flatten:true 去掉中间的各层目录
rename 在ext和flatten执行后被调用
rename:function(dext,src){}（图中函数作用是找回被flatten去掉的目录） 23:12额外参数：
filter
nonull 调试
dot:true 命中以"."开头的文件
matchBase
expand:true 处理动态的src到dest的文件映射 expand:true; cwd:当前路径; src:原路径； dest目标路径； ext：压缩后的文件名; extDot:表示从文件的哪个点来修改后缀（first、last）
(2)、匹配规则
*匹配任意字符，不包括反斜杠（\）
?只匹配一个字符，不匹配反斜杠（\）
**匹配任意数量的任意字符，包括反斜杠（\）
{}括起来的形式，以逗号分隔的list. ｛a,b｝.js：匹配a.js&b.js
!与当前的命中形式取反 4、剖析Grunt Tasks - grunt serve（一）
(1)、安装指令
yo webapp grunt-web-app
grunt serve --allow-remote 允许远程IP访问，同局域网访问命令；
grunt serve只能localhost和127.0.0.1访问； 5、剖析Grunt Tasks - grunt serve（二）
(1)、grunt wiredep:自动把Bower的组件注入到HTML文件中
(2)、tasks:['newer:copy:styles'] 只拷贝新增及修改的文件到目标文件 6、剖析Grunt Tasks - grunt test
7、剖析Grunt Tasks - grunt build(一)
时间戳和版本号的不足
1.时间戳和版本号比较粗犷，如果文件内容没有修改，也会发起http请求，浪费一次资源请求。
2.对于大型网站，发布过程中存在文件下载混乱的问题（新文件配 旧文件）
3.CDN供应商为了节省成本降低带宽流量，不会及时去取新的文件，导致更新失败
md5:
因为md5重命名了文件（新文件），就可以解决2，3问题
8、剖析Grunt Tasks - grunt build(二)
9、gulp
npn install -g gulp安装
gulp -v查看版本
mkdir gulp-in-action创建目录 安装gulp-webapp生成器，并用gulp-webapp创建项目
基于国内网络问题推荐使用cnpm进行安装
cnpm install -g generator-gulp-webapp
gulp有四个基本API:
(1). gulp,task(str,arr,function)
(2). gulp.src(路径),对应grunt的src配置项
(3). gulp.dest(路径),对应grunt的dest配置项
(4). gulp.watch()
| 
转播
