前言
随着 node 的出现， javascript 的舞台越来越大，能做的事情越来越来。
本篇，我们来聊一聊前端工程化构建工具 Gulp , 并定制符合特定需求的 Gulp 插件 。
Gulp是一个自动化和增强工作流的工具包利用Gulp和JavaScript的灵活性来自动化缓慢、重复的工作流，并将它们组合成高效的构建管道。
废话说完，接下来，都是干货啦！
第一部分 项目目录
完全展开以后是这样的
注意， 如果希望 gulpfile 文件也能写es6 语法， 需要装个库： yarn add @babel/register。所有已配好，此处用的是 gulp.babel.js
下面一个一个来分解：
package.json
先用 yanr install 装一下需要用到的包
a.html
a.js
很简单，点击login按钮，给box元素添加一个class
重点来了 gulpfile.babel.js
运行 yarn buld
我们会发现， 项目下出现了一个 build 文件夹， 里面的内容就是 gulp 构建以后的内容。比如 a.js 文件已经被压缩为一行了
第二部分 自定义插件
1. 关于 gulp 的pipe
pipe 意味管道， 很好理解，文件流通过 pipe 管道， 那么就可以在这个过程中对文件流进行操作，定制自己的需求。 所有的处理都是在 pipe 中进行的。例如上图中的例子,
let src = [
'static/css/**/*.css', // ** 表示所有级别的目录， *.css 表示所有的 css 文件
'static/css/**/*.scss',
]
let stream = gulp.src(src) // 读出文件
.pipe(sourcemaps.init()) // 加入sourcemap
.pipe(babel()) // es6 转 es5
...
.pipe(selfPlugin()) // 自定义插件
return stream
复制代码
！！那么同理： 我们也可以加入自己写的 gulp 插件 对文件流进行处理
2.实现
我们先来实现一个很简单的功能， 比如 在所有的 js 文件里添加注释 this is js， 在所有css 文件里添加注释 this is css， 在所有其他类型的文件里添加 this is other。 具体实现如下：
selfPlugin.js
3.使用
在 gulpfile.babel.js 里引入我们的自定义组件，
重新构建以后， 你会发现 a.js 的末尾多了一行注释。当然其他文件也会有我们自定义插件里添加的内容。 此处就不演示了~ 如此， 便可拓展出很多功能。
好了， 恭喜！看到这里的小伙伴们 都是会写 gulp 插件的啦， 前端小萌新进阶成功！
网友评论