Gulp学习

Gulp 学习

gulp 主要是通过这篇文章入门的，我只是将重点再概括一下，顺便给自己做点笔记。

Gulp 一般都会和 grunt、webpack 一同比较，我也看了很多资料，比较通俗的认识是，gulp 相对与 grunt 而言比较简单，不需要写一大堆繁琐的配置文件，而且 API 比较简单，运行速度比较快，相对于 webpack 而言，gulp 就像是一个操作系统，而 webpack 就像是一个应用程序，gulp 可以引用 webpack 使用 webpack，但是 webpack 是一个打包工具。
在一天内你可能可以学会最基本的 webpack，但是背后的一些细节配置肯定不会精通，当你需要某个功能的时候可能；连配置都不会写，但是如果你一天学会了 gulp 的 vinyl stream，那你基本 gulp 的内容都学会了。
如果你使用 react，vue 等类似的组件开发的话，webpack 已经足够，而且比较省事，基本不需要在构建上花太多的力气，而且也能够拥有一些基础的特性，但是如果你需要控制的事情很多而且相对复杂，那么 gulp 相对来说更合适。

在 Gulp 中，它主要的程序是通过 node.js 的 steam 运行的，通过gulp.src()获取到需要的的 steam，然后通过gulp.pipe()将 steam 导入到你想要去的地方，比如导入到 gulp 的插件或者导入到输出的目标路径。

开始使用 gulp

首先 gulp 需要一个文件作为它的主文件，这个主文件叫做gulpfile.js，所以你新建一个 gulp 的主文件放在你的项目中，然后再这个主文件中定义你的任务。

var gulp = require('gulp')
gulp.task('default', function() {
  console.log('welcome')
})

如果要运行 gulp，只要在主文件的目录中使用 git 或者 cmd 等工具，输入 gulp 命令就可以了，gulp 后面可以输入任务名，如果不输入就会执行 default 的默认任务。

接下来总结一下 gulp 主要的 api。

gulp.src()

gulp.src()方法是用来获取 steam 的，但是要注意的是这个流里内容不是原始的文件流，而是一个虚拟文件对象流，这个虚拟文件对象流中存储这原始文件的路径、文件名、内容等信息。

gulp.src(globs[,options])

这里的 globs 是所要读取的 glob 或者包含 globs 的数组，用来匹配文件路径。参数可以是文件匹配模式，也可以是直接的路径名。
options 具体参考官方 API，平常用的不多。

这里有个常用的拓展就是在gulp.src()中可以加个 base 的参数，用来灵活的修改最后输出文件的路径。具体看后面的gulp.dest()。

要想会用gulp.src()来匹配，还得稍微懂一点文件匹配模式，毕竟我们不可能每次都是直接输入文件路径。
最开始的那一篇文章中介绍的很详细，建议刚入门的可以多看看。

gulp.dest()

gulp.dest()是文件输出的路径。

gulp.dest(path[,option])

首先用这个 api 的时候要理解这个路径最后输出是什么样子的，当gulp.src()没有 base 参数的时候，最终的输出路径就是 path 加上gulp.src中通配符和通配符后面的路径。

var gulp = require('gulp')
gulp.src('js/jquery.js').pipe(gulp.dest('dist')) //因为没有通配符，所以直接匹配文件，最终生成的路径就是dist/jquery.js

gulp
  .src('js/**/a.js') //假设匹配的路径是js/aa/a.js，aa是通配符匹配的
  .pipe(gulp.dest('dist')) //因为有通配符，所以匹配通配符和它后面的路径，最终生成的路径dist/aa/a.js

这里有个注意点就是，path 的只是 path，不能定义文件的文件名，就算你 path 是 dist/q.js,最终文件名也不是 q.js，如果 src 中文件名是 a.js，那么最终的路径就是 dist/q.js/a.js。文件名始终是 src 最终的匹配的文件名。

不过如果gulp.src()中有 base 参数的时候，那么最终的路径就是 path 加上gulp.src()中 base 后面的路径。

比如：

var gulp = require('gulp')
gulp
  .src('js/lib/a.js', { base: 'js' }) //base为js的时候
  .pipe(gulp.dest('dist')) //最终路径为dist/lib/a.js

gulp
  .src('js/lib/a.js') //没有base的时候，匹配最终文件名
  .pipe(gulp.dest('dist')) //最终路径为dist/a.js

gulp.task()

gulp.task()用来定义一个使用 Orchestrator 实现的任务（task）。

gulp.task(name[,deps],fn)

name: 任务的名字，如果你需要在命令行中运行你的某些任务，那么请不要在名字中使用空格。
deps：一个包含任务列表的数组，这些任务会在你当前任务运行之前完成，相当于这是 name 的开胃菜，只有这些 deps 里面的任务运行后，再运行 name。
fn：就是你要定义的函数。

这里比较关键的一点是当你定义的 deps 中有 task 为异步操作的时候，他不会按照顺序依次运行，后面的 task 不会等待前面异步的 task 而是一起运行。

引用官方文档里面的话就是：你的任务是否在这些前置依赖的任务完成之前运行了？请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。

关于如何处理异步执行方式，我觉得官方文档解释的非常清楚，建议直接看官方文档。这其中主要的方法是在异步操作的 task 中使用一个 callback，或者返回一个 steam 或 promise。

gulp.watch()

gulp.watch()顾名思义就是监听文件的变化，当有变化的时候便会执行一些操作。

gulp.watch(glob[,opts,cb])

cb 是一个 callback，指每次变动需要执行的 callback。
callback 会被传入一个名为 event 的对象。这个对象描述了所监控到的变动：
event.type：发生变动的类型（added、changed、deleted）。
eventpath：触发了改事件的路径。

结尾

感谢大家的观看 0.0