慕课笔记--[课程]Grunt-beginner 前端自动化工具

视频地址：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()