Gulp 常用插件列表
🌙
手机阅读
本文目录结构
使用插件
Gulp 插件实质上是 Node 转换流（Transform Streams），它封装了通过管道（pipeline）转换文件的常见功能，通常是使用 .pipe() 方法并放在 src() 和 dest() 之间。
他们可以更改经过流（stream）的每个文件的文件名、元数据或文件内容。
有两个地方可以搜索插件；
-
- npm 上搜索插件 - 标记有
"gulpplugin"和"gulpfriendly"关键词
- 我一般使用
gulpplugin, 去搜索 keywords:gulpplugin - 搜索 keywords:gulpplugin rename
- npm 上搜索插件 - 标记有
-
- 可以在 https://gulpjs.com/plugins/ 上浏览和搜索。
插件的使用核心
- gulp 推荐每个插件应该只专注的做一小部分工作，然后通过 pipe 将它们连接起来，就可以完成我们需要做的事情。
- 因此你可以把它们像构建块一样连接在一起。获得想要的结果可能需要把一组插件组合在一起使用。
- 插件应当总是用来转换文件的。其他操作都应该使用（非插件的） Node 模块或库来实现。
推荐收藏下本页
推荐收藏下本网页，使用Gulp时候，可以找下需要什么插件。
如果你收到浏览器收藏夹里不知道以后怎么找，可以查看我分享的 牛逼的程序员是怎么搜索资料的？中的 快速搜索浏览器收藏夹里的内容 这部分。
其中npm是我最常去的地方。
插件列表
| 插件名 | 描述 |
|---|---|
| gulp-rename | 重命名文件 |
| gulp-concat | 合并文件 |
| gulp-filter | 过滤文件 |
| gulp-uglify | 压缩 Js |
| gulp-csso | 压缩优化 CSS |
| gulp-html-minify | 压缩 HTML |
| gulp-imagemin | 压缩图片 |
| gulp-zip | 用于生成一个 zip 压缩包； |
| gulp-autoprefixer | 自动为 css 属性 添加浏览器前缀 |
| autoprefixer | css 前缀浏览器 |
| gulp-rev | 给静态资源文件名添加 hash 值（添加版本号） unicorn.css => unicorn-d41d8cd98f.css |
| gulp-rev-replace | 版本号替换 |
| gulp-sass | 编译 sass |
| gulp-babel | 将 ES6 代码编译成 ES5 |
| gulp-clean | 用于清理； |
| gulp-notify | 用于打印消息文本； |
| gulp-minify-css | 用于压缩 css; |
| amd-optimize | 用于 amd 模块引用编译； |
| gulp-import-css | 如果 css 文件是通过 import 导入的可以使用此插件进行合并优化； |
| gulp-useref | 引入使用 build 标记，进行替换 解析 html 资源定位 |
| gulp-header | 压缩之后将注释写入到文件的头部 |
| gulp-if | 进行 if 语句判断 |
| gulp-size | 获取文件大小 |
| gulp-less | 编译 less 文件 |
| gulp-file-include | 对文件进行引入 |
| gulp-sourcemaps | 生成 map 文件 |
| gulp-livereload | 自动刷新 |
| gulp-clean-css | css 压缩 |
| browserSync | 启动 server 并启动热更新 |
| gulp-plumber | 监测工作流，报错，防止遇到错误时直接退出 gulp |
| gulp-css-spritesmith | 根据 css 文件自动生成雪碧图 |
| gulp-postcss | css 扩展 |
| gulp-eslint | js 语法检查 |
| del | 清除文件 |
| gulp-connect | 创建 web 服务器 |
| gulp-htmlmin | html 压缩 |
| postcss-px-to-viewport | vw 响应尺寸 |
| gulp-watch | 监听 |
| postcss-viewport-units | css 添加 content |
| gulp-load-plugins | 加载安装的Gulp插件 |
