grunt 笔记一

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.html
				dest:'<%= 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.html
						dest:'<%= 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))
				}*/
			}
		}
	});
}