标签：
其实网上有一大把入门指南了，官网上也讲得很清楚。怎么安装，有哪些方法，我在网上已经看到很多很多很多了。
可是我还是很懵逼。不能理解为什么要使用这些工具，不知道学习了这些方法该怎么用，在哪里用。光看文档是学不会的，得有实战！实战啊！我感受不到这些新技术的好处。所以最初学习的时候，我迫切地渴望能有一个人，一篇文章，能通过一个具体的项目来指引一下我。然鹅并没有。（在小公司的坏处，没有指导，突破不了，还懒）
现在我对gulp也还是懵懵哒。只能慢慢写咯。
几乎每一个前端工具都对应了它自己的配置文件，nodejs 有 package.json，webpack 有 webpack.config.js，gulp 则是 gulpfile.js。
你要用它，你就得新建配置文件，因为你要在里面写配置啊。所以必须在根目录下先新建一个 gulpfile.js 文件。
一、几个方法
1. gulp.task() // gulp的配置文件gulpfile.js里可以定义多个任务，该方法就是用来定义任务的
var gulp = require("gulp"); gulp.task("default", function () { //这里是具体要执行的任务代码 ，我写的很简单的，就在控制台打印 console.log("hello"); })
默认任务名是 default，执行该任务：
在终端里进入你的项目根目录，确保你已经 npm install gulp --save-dev 将gulp安装在本地了（全局和本地分得清吧？），然后在终端里输入 gulp default，（default可以省略）会发现终端打印了 hello.
你也可以执行别的任务。再定义一个任务叫作 mytask：
gulp.task("mytask", function () {
//将根目录下所有的css文件全部挪到build文件夹下
gulp.src(["./*.css"]).pipe(gulp.dest("./build"));
})
这个任务是为了整理项目结构。
有时候因为多人合作问题，或者新手不懂乱放文件，或者偷懒，我们的项目结构可能会很乱，比如有的css文件放在根目录下，有的放在a文件夹里，有的放在b文件夹里。这不利于我们更好地管理项目，但是人工一个个去挪文件实在不人性化，于是乎，我们就借 gulp 来帮我们处理这些机械又费时的工作。
终端执行 gulp mytask，就会发现你的项目底下多了一个build 文件夹，里面就是之前项目根目录下所有css文件（此时根目录下的css文件还没被删掉哦，所以这只能相当于复制，而不是剪切）
除了这个任务，gulp还可以帮我们干很多事情，最常用的应该就是压缩和合并代码了吧。我就不细说了。
2. gulp.pipe() //管道，传输文件流
现在看不懂没关系，反正大概就是一个桥梁的作用，帮助文件流从一个地方传到另一个地方。
3. gulp.dest() //写入文件
4. gulp.src() //读取文件流
该 API 在上一段代码里已经出现过了，作用就是用来读文件的。通过这个方法，我们可以获取该文件路径、文件名、内容等信息，即文件流。但是 gulp.src()获取的并不是原始文件流，而是虚拟文件流，只是它里面存储了原始文件流的信息而已。
这个文件流就好比一捧水。你可以对水进行很多操作，加盐、加糖、烧开什么的。然后通过一个管道 gulp.pipe() 倒到别的地方去。
还是不懂拿来干嘛？？
比如：还是以上一个例子为例，我读取了根目录下所有的css文件，然后全部扔进了build文件夹下。可是css文件太多，而且每个文件的内容又很少，看起来就不舒服啊！那不如合并这些css文件，只生成一个css文件扔进build文件夹下，岂不是更好？
所以，我们用 gulp.src() 读取根目录下所有的css，得到了一个虚拟文件流，我们姑且认为反正就是一捧水，然后通过什么什么代码，将这些css进行合并到一起，并定义一个新的文件名。写到这里大家不要忘啦，前面提到过，这里还是虚拟文件流。我们用 gulp.pipe() 管道将它传输到现实世界里去。但是世界之大，还差一个容身的地方，我们就把传过来的东西用 gulp.dest() 写入到特定的文件夹里。
Done. 不知道我讲清楚了没？
未完，明天写。
标签：
原文地址：http://www.cnblogs.com/sarahshine/p/5934665.html
