Gulp 常用插件列表

🌙
手机阅读
本文目录结构
axihe

使用插件

Gulp 插件实质上是 Node 转换流(Transform Streams),它封装了通过管道(pipeline)转换文件的常见功能,通常是使用 .pipe() 方法并放在 src()dest() 之间。

他们可以更改经过流(stream)的每个文件的文件名、元数据或文件内容。

有两个地方可以搜索插件;

插件的使用核心

  • 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 属性 添加浏览器前缀
autoprefixercss 前缀浏览器
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-csscss 压缩
browserSync启动 server 并启动热更新
gulp-plumber监测工作流,报错,防止遇到错误时直接退出 gulp
gulp-css-spritesmith根据 css 文件自动生成雪碧图
gulp-postcsscss 扩展
gulp-eslintjs 语法检查
del清除文件
gulp-connect创建 web 服务器
gulp-htmlminhtml 压缩
postcss-px-to-viewportvw 响应尺寸
gulp-watch监听
postcss-viewport-unitscss 添加 content
gulp-load-plugins加载安装的Gulp插件

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang