gulp learning note

为啥写这一片文章呢？

主要是为了温故而知新和分享，也是为了更加促进自己的学习！

前端自动化工具很多  有grunt  gulp  webpack 等

这次主要分享下gulp的学习经验，让自己更好的总结和学习，好了下面开始啦哈哈。

首先说一个问题是我们为啥要使用自动化工具也叫构建工具，看名字应该就猜的差不多了吧，之所以叫做工具肯定是要用它了，用它可以简化流程操作，帮助我们更好的完成项目。

在没有自动化工具甚至是编辑器的时候我们是怎样工作的呢，相信大家可能都是一样的，比如你要  新建一个css images 和一个js文件夹，然后开始你的html结构的编写

写结构从头部写到底部   然后开始写样式   一个个类名的写  一个类名套另一个类名 层层的套 以防止 类名的重复 造成样式的错误  还可能有很长很长的 兼容的css样式  比如一下-webkit -ms -o 等

前缀

可能你在工作中 还有 时长更改的时候   比如某某某跟你说  这个一系列的字大了全部 减小2像素 或者某颜色加深 或者某一个地方宽度减少 或者你需要一个服务器，想减少手动刷新次数等等   可能  这时候 就会比较麻烦,牵一发而动全身，可能你需要将 类名全部提出来  然后覆盖以前的样式  来达到效果

　　而且 写代码的时候 难免会错误啊  比如 掉了一个div或者div嵌套错了  又或者 css样式里面有些错误等  这时候  你的救星就来了   前端自动化工具来了!

扩展阅读  http://www.cnblogs.com/ihardcoder/p/5378290.html（浅谈前端工程化）

他可能会跟你说  你安心做你 的技术活   我来处理这些流程啊  检测代码校验 打包压缩等工作.ok  说干就干,let's do it!!!

gulpjs使用的是nodejs中stream来读取和操作数据

1.安装好Node  (tip: 你需要去简单去学习一下node 包管理工具和  一下node 的命令行)

$ npm install --global gulp

(ps： $ 符号并不是  要输入到cmd 控制台里的符号。。。我刚开始的时候 装的时候把 $号打进去 怎么都报错。。。。好蠢。。。 )

2.安装项目目录下的Gulp

$ npm install --save-dev gulp

3.文件结构 首先你需要package.json ,gulpfile.js（前2个文件都在根目录） 和src文件

package.json   里面是一个json对象， 文件件中所列出的每个依赖来自动安装适当版本的依赖；   如果package.json 里面 有依赖信息可以直接通过  npm install 安装相应的包  如果没有  package.json 文件可以通过使用  npm init 来创建 package.json 文件

gulpfile.js    gulp里定义的任务都在这里

src文件        这里就是开放环境的文件目录了   主要就是你的 sass，js,images，css,html 等文件

dist          生产环境的文件目录  主要就是打包压缩后 最后准备上线的文件都放这里面

　　4.gulp的API介绍

你只需要知道四个  方法你就应该 会了哈哈  是不是很容易  gulp.task(),gulp.src(),gulp.dest(),gulp.watch()

Gulp中，使用的是Nodejs中的stream(流)，首先获取到需要的stream，然后可以通过stream的pipe()方法把流导入到你想要的地方来做一些操作;

gulp.src()方法正是用来获取流的

gulp.dest()方法是用来写文件的

gulp.task方法用来定义任务

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { //定义一个有依赖的任务

// Do something

});

gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务

好了 打个简单的比分 gulp是这么工作的  首先你需要新建一个任务 gulp.task('任务名',function(){做任务怎么做任务})，建立了任务后要告诉他怎么做任务

首先gulp是stream流嘛,可以这么理解首先你要有水源(原材料) 这个时候你继续用获取他用 gulp.src()  然后你需要处理好多好多的操作加工你的水源(原材料),使用一个个管子

pipe()方法 利用插件进行一些加工一个管子就做一件事，事情做完了你需要 把加工好的东西放到另一个储藏罐子里  用gulp.dest()来导出到罐子里（写文件）;这就是一个任务具体是怎么写的抽象思考了

知道了这些，我们还差一些  加工解决 的方法  这时候就需要插件了

分享一个有常用插件的清单列表  http://www.cnblogs.com/-ding/p/5972162.html

有了插件我们就可以  简化我们的工作流程了  比如

搭建本地web服务器

编译Sass

代码校验

css加前缀

tinypng

代码美化

每当保存更改，自动刷新浏览器

优化&压缩资源

生成雪碧图

等等一系列的功能 来解放我们的生产力了

简直太棒了！！！（插件的介绍就不在这里分享了，可以去插件的github或者 npm上看看虽然大多数是英文但是 还是可以看的差不多的）

好了这次的分享及到这里,欢迎大家多多指导交流,谢谢大家。