如何配置 一个简单的gulp 自动监听事件

直接点的：

gulp.watch('file',['taskName'])

这样就行了，gulp.watch()就是自动监听函数，file那里填要监听的文件，taskName那里填对应要执行的任务名称，也可以把taskName换成相应function()：

gulp.watch('file',function(event){

    //具体的一些进行处理的代码

})

也可以像这样：

var watcher = gulp.watch('js/**/*.js', ['uglify','reload'])

watcher.on('change', function(event) {

  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...')

})

具体怎么用还是多看下gulp的文档吧，毕竟只有熟悉了才能灵活发挥。

随着 node 的出现， javascript 的舞台越来越大，能做的事情越来越来。

本篇，我们来聊一聊前端工程化构建工具 Gulp , 并定制符合特定需求的 Gulp 插件 。

Gulp是一个自动化和增强工作流的工具包利用Gulp和JavaScript的灵活性来自动化缓慢、重复的工作流，并将它们组合成高效的构建管道。

废话说完，接下来，都是干货啦！

完全展开以后是这样的

注意， 如果希望 gulpfile 文件也能写es6 语法， 需要装个库： yarn add @babel/register。所有已配好，此处用的是 gulp.babel.js

下面一个一个来分解：

package.json

先用 yanr install 装一下需要用到的包

1. 关于 gulp 的pipe

pipe 意味管道， 很好理解，文件流通过 pipe 管道， 那么就可以在这个过程中对文件流进行 *** 作，定制自己的需求。 所有的处理都是在 pipe 中进行的。例如上图中的例子,

！！那么同理： 我们也可以加入自己写的 gulp 插件 对文件流进行处理

2.实现

我们先来实现一个很简单的功能， 比如 在所有的 js 文件里添加注释 this is js， 在所有css 文件里添加注释 this is css， 在所有其他类型的文件里添加 this is other。 具体实现如下：

selfPlugin.js

---