使用 gulp 创建自动化的任务，一般就是对项目的文件进行加工和处理，比如去优化项目里的图片，让它们的尺寸变得更小。使用 Babel，去处理一下我们写的 JavaScript， 这样可以让我们使用 JavaScript 的一些新的特性。还可以把使用 Sass 形式写的样式转换成普通的 CSS 。

这个项目的 gulp 任务是在 gulpfile.babel.js 里面定义的 ..

文件的一开始就是导入了一些 package，也就是 node.js 的包。这些包提供了不同的功能。在 gulp 任务里会用到这些包里面提供的功能。

不过这里并没直接导入所有需要的包，你会发现这里用了一个 gulpLoadPlugins，这个东西可以让我们在需要的时候加载指定的包。

这里给它起了一个名字，叫 $ .. 我们再去看一下具体的任务 ..

定义任务用的是 gulp 的 task 方法 .. 比如这个任务，名字是 images ，task 方法的第一个参数就是任务的名字。后面有一个函数，这个函数用的是 es2015 的箭头函数。

函数里面就是这个任务要做的一些事情，一般会用 gulp 的 src 方法导入一些要处理的文件 ... 这里就是 app 目录下的 images 目录里的所有的文件 ..

导入进来的文件会放在不同的 pipe 里面去处理 .. pipe 是管道的意思，每个管道里你都可以使用导入进来的包提供的功能去处理文件。

比如在这个管道里，用了 imagemin，它的功能是去优化图片的尺寸。 imagemin 就是一个包，这里用了 gulpLoadPlugins 加载了这个包 ..

这些加载的包我们已经在项目里安装好了 .. 打开 package.json .. 在 devDependencies 里面，你可以看到，这里有一个 gulp-imagemin ..

再回到任务。处理完之后，最后一般会用一下 gulp 的 dest 方法，把处理好的文件放到指定的目录的下面。

下面还有一个 pipe，在这个管道里用了 size ，这个包可以显示处理的文件的尺寸 ..

测试

我们可以测试一下这个任务 ... 回到命令行 ... 进入到项目所在的目录 .. 你可以找一张图片，然后把它放在 app 目录下的 images 这个目录的下面 ...

或者你可以用 git 切换到一个 tag ...

git checkout v1.2.3

这样你会在 app 下面的 images 目录里找到一个图片 ..

再执行一下刚才我们看的那个 images 任务 ... 输入 gulp images

会显示一些任务执行的日志 . Requiring external module babel-register，使用 babel-register 这个外部模块。

Using gulpfile ，使用的任务文件是这个桌面上的项目下面的 gulpfile.babel.js

starting images ，开始 images 这个任务。 gulp-imagemin ，使用了这个包去处理文件 .. Minified 1 image，最小化处理了一个图像，saved，节省了 14.95 kB

最后会显示 Finished images，完成了这个任务，后面这个数字表示的是这个任务用了多长时间。