Nodejs之gulp用法总结

一、nodeJS基础 *** 作

    (一)、安装nodeJS (node -v)

    (二)、npm 包管理工具  (cnpm安装 ：  npm install gulp -g)

    (三)、在项目中初始化package.json  (nodejs的配置文件,在项目中安装的模块,会记录在package.json)  npm init

    (四)、在其他位置需要配置相关模块时，只需把pageage.json拷贝过来，执行 npm install,即可自动安装所需模块

二、gulp

    1. 安装 (gulp -v)

        (1)全局安装  npm i gulp -g

        (2)本地安装：  npm i gulp --save-dev

    2. 在项目根目录创建 gulpfile.js

    3. gulp.task()    gulp.src()  gulp.pipe()  gulp.dest()  gulp.watch()

    4. gulp插件：  (1)压缩css  (2)压缩js  (3) 合并js  (4) 压缩图片 (5)自动添加前缀 autoprefixer  (6)sass编译  （7）热刷新

为了防止客户端的静态资源缓存，我们需要每次更新css或js的时候，通过md5或时间戳等方式重新命名静态资源。让客户端可以重新请求资源，而不是从缓存里取。然后html模板里的src也要做相应的修改。当然，这里还有个附加的需要就是，静态资源需要自行优化（压缩合并）。很好解决问题！

随着 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

---