Gulp 常用插件列表

🌙
手机阅读
本文目录结构

使用插件

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 属性 添加浏览器前缀
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插件

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

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

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

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

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>