Gulp 教程

🌙
手机阅读
本文目录结构

Gulp 是什么

Gulp 是 Web 开发中帮你自动完成任务的工具。它可以完成的前端任务包括:

  • 启动 Web Server
  • 当文件修改保存后,自动刷新浏览器
  • 批量处理 Sass 或者 Less 文件
  • 优化资源 CSS, JavaScript, 和 images

Gulp 能做的比以上更多。你甚至可以用 Gulp 创建一个静态站点生成器。

Gulp 真是非常强大的。

在开始之前,我们谈谈 Gulp 和同类工具的对比。

为什么使用 Gulp

我们通常称 Gulp 这类工具为“构建工具”,因为在创建网站的时候,用这类工具来运行任务。目前最流行的构建工具有 Gulp 和 Grunt. Gulp 和 Grunt 的主要区别在于配置工作流的不同。Gulp 的配置更加简洁,运行速度更快。

Gulp 常用插件

  • gulp-rename:重命名文件
  • gulp-concat:合并文件
  • gulp-filter:过滤文件
  • gulp-uglify:压缩 Js
  • gulp-csso:压缩优化 CSS
  • gulp-html-minify:压缩 HTML
  • gulp-imagemin:压缩图片
  • gulp-zip:zip 压缩文件
  • gulp-autoprefixer:自动为 css 添加浏览器前缀
  • gulp-rev:给静态资源文件名添加 hash 值 unicorn.css => unicorn-d41d8cd98f.css
  • gulp-sass:编译 sass
  • gulp-babel:将 ES6 代码编译成 ES5

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

书籍推荐