前段集成解决方案grunt+yeoman初步认识

1.什么是前段集成解决方案？

将前端研发领域中各种分散的技术元素集中在一起，并对常见的前端开发问题、不足、缺陷和需求，所提出的一种解决问题的方案

2.yeoman

应用的架构，模型！  相当于一个生成器，，通过模具生成框架

安装Yeomen

npm install -g yo

安装anluarjs应用模型(安装模具)

npm isntall -g generator-angular

生成angular项目

yo angular appName

在自动生成过程中有多个选择，按自己的项目需求进行选择获取项目框架。

3.bower

版本管理控制工具

安装bower

npm isntall -g bower

4.grunt

安装grunt

npm  install -g grunt-cli

yeomen是基于node生成的，所以首先访问的是package.json文件；

这个文件是一个对象形式表现的(基本介绍)：

name---项目名(并不是文件名)

version---版本号

dependencies---项目在生成环境中依赖的包

devDependcies---开发时候的依赖的包

engines----当前需要的版本

scripts----可以直接使用NPM的脚本命令

生成项目中的其他文件基本介绍：

Gruntfile.js文件---grunt配置文件

bower.json文件-----bower配置文件

.travic.yml文件-----为开源打造的集成环境

.jshintrc文件-----jshin的配置文件

.gitignore--------指定当前要忽略的文件，不上传到git

.gitattrbutes-----git配置文件

.editorconfig-----定义编辑时候的风格

.bowerrc----------bower的配置项

test-------提供自动化测试

.babelrc -------- ec6 向 ec5进行转码

5.grunt配置文件

grunt作为函数的参数传递；

每一个Gruntfile文件 grunt- 都有一个这样最外层结构，require funcation

task 任务

代码压缩、目录清除、创建目录、都称之为任务

initConfig(opt)中配置的单元task，每一task都可以单独存在和执行

sass:将sass文件转换成css文件并生成到对应的文件{
dist:{
　　files:[{
　　　　expand:true,
　　　　cwd:'<%= config.app %>/style',
　　　　src:['*.{scss,sass}'],
　　　　dest:'.tmp/style',
　　　　ext:'.css'
　　}]
}

registTask(name,funcation(){
　　grunt.task.run([
　　　　task,
　　　　task
　　])
})

6.从无到有构建Grunt项目

进入更目录 运行                                   npm init

安装grunt                                          npm install grunt --save-dev

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

安装文件copy                                     npm install grunt-contrib-copy --save-dev

安装文件删除                                      npm install grunt-contrib-clean --save-dev

创建Gruntfile文件

module.exports=funcation(grunt){

　　require('load-grunt-tasks')(grunt);

　　var config={

　　　　app:'app',

　　　　dist:'dist'

　　}

　　grunt.initConfig({

　　　　config:config,

　　　　//配置copy命令

　　　　copy:{

　　　　　　//方法一

　　　　　　files:{

　　　　　　　　//将src的文件复制到dist中

　　　　　　　　dest:src,

　　　　　　}

　　　　　　//方法二

　　　　　　files:{

　　　　　　　　expand:true,                                               //将cwd目录下的所有 .html文件 复制到dest中 后缀名改为 .min.html

　　　　　　　　cwd:'<%= config.app %>/',                         //源文件目录

　　　　　　　　src:'.html',　　　　　　　　　　　　                //源文件格式

　　　　　　　　dest:'<%= config.dist %>/',                         //目的目录

　　　　　　　　ext:'.min.html',　　　　　　　　　　　　　　    //目的文件的后缀名

extDot:'first/last'                                          //选中第一个点开始  改后缀名,

　　　　　　　　flatten:false/true                                          //true创建对应的文件目录

　　　　　　　　rename:funcation(dest,src){　　　　　　　　　 //自定义名称

　　　　　　　　　　retrun dest+"js/"+src;

　　　　　　　　　　}

　　　　　　　　}

　　　　　　},

　　　　clean:{

　　　　　　dist:{

　　　　　　　　src:<%= config.dist %>/**/*,                       //清除所有目录，或者目录下的文件

　　　　　　　　filter:'fnName'||funcation(filePath){ retrun true/false },

　　　　　　　　dot:true/false　　　　　　　　　　　　　　　　  //.的配置文件

　　　　　　}

　　　　　}

　　　　})

}

7.grunt和grunt任务

npm uninstall -g grunt                             删除grunt

npm install -g grunt-cli                            安装grunt

配置任务

任务都是定义在initConfig中

配置任务和目标 (可以在任务配置多个目标，执行多个任务------concat任务中配置两个目录(执行两个任务),uglify中配置一个目标(执行一个任务))

grunt.initConfig({

　　 concat: {

　　　　foo: {   concat task "foo" target options and files go here.  },

　　　　bar: {   concat task "bar" target options and files go here.  },　　

　　},

　　uglify: {

　　　　bar: {   uglify task "bar" target options and files go here.  },

　　}

})

grunt.loadNpmTasks('grunt-contrib-uglify');        //加载任务的对应grunt插件(先npm install)
grunt.registerTask('default', ['uglify']);               //注册任务,这样才能用grunt命令执行该任务

concat,uglify都可以单独执行它下面的某一个任务

执行单个目标任务        指令：grunt contat:foo (执行目标任务--foo)

*基本的属性介绍

uglify 压缩js文件
concat 合并文件
cssmin 压缩css
jshint 检测JS文件
nodeunit node测试
htmlhint 检测html
watch 监控文件变化
qunit 单元测试
connect 连接服务器

dist 任务
files 配置多个源文件到目标文件的映射
cwd 源文件目录
src 源文件
dest 目标文件
options 默认设置
ext 后缀名
filter 过滤器(函数或者函数名)
nonull 非空
dot 。替换的位置
expand 执行一个动态的 源文件到目标文件的映射

匹配模式

**----任意字符，包括反斜杠
*-----任意字符，不包括反斜杠
?*----任意一个字符
{a,b}-a,b中的任意字符
！----取反

动态创建文件

expand：设为 true 来启用下面这些属性。
cwd：所有的 src 都相对于此路径（但是不包含）。
src：需要匹配的模式，相对于cwd。
dest：目标文件。
ext：在dest中的所有文件后缀都替换掉。
flatten：在dest中的所有路径的片段都替换掉。
rename：每当匹配到一个src时，都会调用此方法（在ext和flatten执行之后）。dest和src属性会被当参数传入，这个函数必须返回一个新的dest值。如果相同的dest被返回超过一次，每一个用它的src都会被添加到一个源数组。

注册多任务

grunt.initConfig({

　　log: {

　　　　foo: [1, 2, 3],

　　　　bar: 'hello world',

　　　　baz: false

　　}

})

grunt.registerMultiTask('log', 'Log stuff.', function() {
　　grunt.log.writeln(this.target + ': ' + this.data);
});

运行             grunt log:foo             打印[1,2,3]

运行             grunt log:bar             打印'hello world'

注册基本任务

grunt.registerTask('foo', 'A sample task that logs stuff.', function(arg1, arg2) {
　　if (arguments.length === 0) {
　　　　grunt.log.writeln(this.name + ", no args");
　　} else {
　　　　grunt.log.writeln(this.name + ", " + arg1 + " " + arg2);
　　}
});

运行           grunt foo:testing:123            打印"foo, testing 123"

自定义任务

grunt.registerTask('foo', 'My "foo" task.', function() {
　　可以运行其他任务
　　grunt.task.run('bar', 'baz');        //执行bar.baz
});

前段集成解决方案grunt+yeoman初步认识