前端构建工具-gulp ！（解决浏览器缓存问题）

一，为啥要用构建工具

项目中的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任务。