今天是元宵节，公司也很有人情味的让大家提前下班了，很happy。这个月的学习安排已经计划好了，每天过的很充实，博客的话今天记录下自己学习 gulp的心得，月底再写一篇 require.js 或者 sea.js 的博客。废话不多说，go！

一，为啥要用构建工具

项目中的js和css属于静态文件，客户端第一次访问的时候会缓存这些文件，那就意味着当我们需要改js跟css的时候，即使我们将文件中的代码改了重新发布，那么客户端也是看不到，客户端发现缓存中有同样路径的文件，直接读取。

之前做的项目中，项目上线后客户打开一看：“那谁，这里那里需要改动一下”。我就操起键盘改css样式，改js业务逻辑，然后一发布，屁颠屁颠的跟客户讲：“大佬，已经改好了，您老再看！”

可当客户再次打开页面的时候，问题还是那个问题。奇了怪了，我本地是好的啊。思前想后才想起浏览器缓存这么一说，让客户清除浏览器缓存就好了，但不是很多客户都喜欢去清除浏览器缓存，他们只会觉得这样好麻烦。

那么怎么办？我想很多程序员都知道加一个版本号就可以了，这样浏览器就会认为这是一款全新的游戏。。。。额，错了，是一个全新的文件，比如原来是 http://www.xxxx.com/index.js 你现在只需要把地址改为 http://www.xxxx.com/index.js?v=1.0 即可

但是如果这个动作是手动的，那么很大可能我们将会忘掉去手动敲这个版本号 。那么这就是为什么我们需要前端构建工具。前端构建工具有很多，grunt、gulp、webpack等。今天我们只聊gulp。

二、gulp的引入

打开命令行工具，进入项目所在的根目录下，输入 npm init -y 命令，创建package.json文件。

生成的package.json文件，项目名称，版本号，描述信息均为空，我们用ide打开后将其填上。

package.json文件管理我们项目中的包依赖关系，想了解更多package.json信息，请自行百度。

通过 npm 安装 gulp 包：

安装完gulp以及其他要用到的插件后，packjson.json文件变更如下：

开始使用gulp：

gulp构建工具的配置信息默认是写在gulpfile.js 文件中，在项目的根目录下创建 gulpfile.js，通过require引入gulp以及其他插件

二、gulp的4个核心API

gulp 自身能做的事情不多，主要是通过各种插件来满足我们的需求，gulp本身提供了4个非常简洁的API（很重要，划重点）, 掌握这4个API你就基本掌握了gulp的全部。

1.gulp.task

定义：gulp.task(name [, deps, fn])

我们给gulp注册一个任务task，参数name是该任务的名称，deps是可选项，就是这个任务可能会依赖其他的任务tasks, fn是任务要执行的函数，也就是该任务要干啥。                                                                                                                                                 

例子中先执行完 task2，task3 ，最后再执行task1任务。task2与task3是并行执行的，不是顺序执行。   

2.gulp.src

定义：gulp.src(globs[, options])

与globs 匹配的文件，可以是string或者一个数组。其参数就是一个我们要处理的文件是啥！

我们这里要处理的文件是 ./src/scripts/ 这个路径下的js文件。

3.gulp.dest

定义：gulp.dest( path [, options])

参数path表示文件处理完后要存放的路径，option参数一般不用，无需了解。

4.gulp.watch

定义：gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

gulp.watch就是监视某路径下文件的变化，然后运行指定的任务Tasks或者函数。

这里gulp监视 ./src/scripts/ 路径下的所有js文件是否发生变化，若有则运行 scripts 这一task任务。

三、gulp具体使用

上面讲过，我们想用gulp做些什么都是通过声明一个task任务来实现。现在我们就通过gulp来做件事情吧：将src/scripts/路径下的a.js与b.js 合并压缩后 生成 ab.js 并存放在 build/scripts/ 路径下。

a.js：

b.js：

 第一步，在我们的gulpfile.js文件中引入 合并、压缩js所需要的插件（插件这块请自行百度）

第二步，创建一个任务task来帮助我们完成合并压缩js这件事

创建完任务后在命令行输入 gulp scripts 指令运行该任务。

运行结果如下：

所以gulp的工作流程就是： 找到文件( gulp.src ) -> 对文件进行操作( 使用各类插件 ) -> 输出文件 ( gulp.dest );

按着这个套路，合并压缩css就简单啦，代码如下：

最后在命令行输入指令gulp styles即可。

我们在实际开发中不需要通过命令行去手动运行一个个的task任务，gulp为我们提供了默认的default任务task，我们可以在该任务中执行我们项目构建中的每一个task，且只需要在命令行中输入gulp 指令即可.

我们还可以利用前文讲到的watch api对我们的css，js文件进行监听，若发生修改则自动运行相关的task任务去进行合并压缩等相应操作，如下：

前端构建工具gulp入门到此结束，拜~