学习自动化工具gulp
<什么是gulp>官网地址：http://gulpjs.com/
gulp是可以自动化执行任务的工具，在开发流程里，一定有一些动作需要手工的重复的去执行，例如：
·把一个文件拷贝到另外一个位置
·把多个js或者css文件合并成一个文件，以减少网络请求数，同时可以进行压缩，去掉空格回车等浏览器不需要的部分
·把sass或者less文件编译为css
·压缩图像文件，以减少网络流量
·创建一个可以实时刷新页面内容的本地服务器等等
一般需要重复执行的动作，都可以创建成一个gulp任务，然后在指定的条件下，比如文件发生变化后，自动去执行这些任务
<gulp的特点>
·易于使用 通过代码优于配置的策略，gulp让简单的任务简单，复杂的任务可管理
·快速构建 利用nodejs流的威力，可以快速的构建项目并减少频繁的IO操作，前一级的输出，直接变成后一级的输入，使得在操作上非常简单
·高质量的插件 gulp严格的插件指南确保插件可以简洁的工作
·易于学习 API很少（核心方法也就4个）
对比grunt与gulp，用一辆载有货物的火车说明：grunt就好比每次在中转站，都要将车上的货物卸下来，再换量新的火车（有较多的临时文件等）；而gulp就好比在中转站的时候，只需要更换新的车头就可以，不需要重新的卸货装货的步骤。
<gulp中的流>
·gulp是通过流和代码优于配置的策略（grunt只基于配置的，不好管理）来尽量简化任务编写的工作
·类似jQuery里的链式操作，把各个方法串联起来构建完整的任务
·用gulp编写任务也可看作是用nodejs编写任务
·当使用流时，gulp不需要生成大量的中间文件，只将最后的结果写入磁盘，整个过程因此变得非常快
<gulp的安装>
要想在项目中使用gulp，需要两点：
·在全局范围内去安装一下gulp的命令行工具
·然后在项目里面再本地安装gulp
<gulp命令行工具>
·使用npm install -g在全局范围内安装
·一般用npm安装的时候用-g的参数，就表示这个安装的东西会作为命令去执行
·若是在mac或者linux下遇到了权限问题，需要在命令前面加上sudo，即sudo npm install gulp -g
安装完成后输入 gulp --help，如果输出一些帮助的信息就表示gulp命令行安装成功了。如果安装不成功，可以试试换成国内的源：
淘宝源：npm install -g gulp --registry=http://registry.npm.taobao.org
中国源：npm install -g gulp --registry=http://registry.cnpmjs.org
官方源：npm instal -g gulp --registry=http://www.npmjs.org/
<项目下安装gulp>
npm install gulp --save-dev
将gulp作为项目的开发依赖（只在开发时用，不会发布到线上）。在node_modules下安装本地的gulp库并添加配置到package.json文件的devDependencies中。
<gulp运行>
·创建配置文件
gulp的任务要放到一个叫gulpfile.js的文件里面。先在项目的根目录下面创建一个这样的文件。然后在这个文件的顶部添加如下代码：
var gulp = require("gulp")
通过require把gulp模块引入当前项目并赋值给gulp变量，这样，gulp变量里面就有了gulp的所有方法
·创建gulp的任务
使用gulp的task方法，第一个参数是任务的名称，第二个参数是任务的定义（一个匿名函数）
gulp.task("hello",function(){
console.log("你好，世界");
})
//执行gulp的任务，打开命令行工具，进入到项目所在的目录，然后执行gulp hello
//gulp可以连续执行多个任务 gulp task1 task2....
<gulp命令行>
·-v或-version 显示版本号
·--gulpfile 手动指定一个gulpfile的路径
·--cwd dirpath 指定当前目录，即从哪个工作目录开始查找
·-T或--tasks 显示task依赖树。gulp任务之间可以相互依赖
·--color
·--no-color
·--silent 禁止所有的gulp日志
<gulp工作方式>
gulp.js的使用流程一般是：先通过gulp.src()方法获取到想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中。最后把经过插件处理后的流再通过pipe方法导入到gulp。dest()中，gulp.dest()方法则把流中的内容写入到文件中,dest方法的参数是个路径，如果路径不存在，则会创建。
·gulp.src() 在gulp中，使用的是nodejs中的stream，首先获取需要的stream，然后通过stream的pipe()方法把流导入到你想要的地方，比如gulp的插件中，经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中，所以gulp是以stream为媒介的。它不需要频繁的生成临时文件，这也是gulp的速度比grunt快的一个原因。gulp.src()是用来获取流的，但这个流里的内容不是原始的文件流，而是一个虚拟文件对象流，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。
//src方法读出的对象流（流不再是buffer格式，而是一个个的对象）的格式 var File = require("vinyl");//虚拟文件对象流模块 var coffeeFile = new File({ cwd:"/",//当前工作路径 base:"/test/",//基准路径 path:"/test/file.coffee",//文件的完整绝对路径 contents:new Buffer("test=123") //文件的内容
... })
·gulp.dest() 用来写文件的。给gulp.dest()传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，及时我们给dest传入一个带有文件名的路径参数，它也会把这个文件名当做是目录名。若是想要改变文件流的文件名，可以参考使用gulp-rename。dest的目标路径是原始路径去掉base路径。
·gulp.task() 执行多个任务时怎么控制任务执行的顺序。gulp中执行多个任务，可以通过任务依赖来实现，例如有one、two、three三个任务，那就可以定义一个空的任务，然后把三个任务当做这个空任务的依赖就可以了。
//只要执行default任务，就相当于one,two,three三个任务执行了 gulp.task('default',['one','two','three'])
如果任务之间没有依赖，则任务会按照书写顺序来执行，如果有依赖的话则会先执行依赖的任务，但是如果某个任务所依赖的任务是异步的，gulp并不会等待那个依赖的异步任务执行完成，而是会直接执行后续的任务。
tips:如果想等异步任务中的异步操作执行完成后再执行后续的任务，有三种方法可以实现：
1，在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成，这个回调函数就是人物函数的第一个参数
gulp.task('one',function(cb){//cb为人物函数提供的回调，用来通知任务已完成
setTimeout(function(){
cb()//异步操作完成，执行回调
})
})
2，返回一个promise对象
//一个著名的异步处理的库，https://github.com/kriskowal/q var Q = require("q"); gulp.task('one',function(){ var deferred = Q,defer();//创建一个defer事件延迟对象 setTime(function(){ deferred.resolve('成功');//异步事件完成 },5000) return deferred.promise; }) gulp.task("two",["one"],function(){ console.log("two done"); })
·gulp.watch() 用来监听文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。
gulp.task('default',function(){
gulp.watch("app/**/*.js",['one','two','three'])
})
//监控的任务都不会停止
//
//gulp.watch还有另外一种使用方式 gulp.task("js/*.js",function(event){ //每当文件发生变化时，就会调用这个函数，并且传入一个event对象，该对象包含了文件变化的一些信息，type属性是变化的类型（有added,changed,deleted）,path属性为发生变化的文件的路径 console.log(event.type) console.log(event.path) })
