Gulp快速入门教程

2018年4月21日13:48:42 4 65

Gulp是基于流的前端自动化的构建工具,虽说如今是webpack盛行的时代,但是gulp和webpack整合效果更美味的,鱼与熊掌都可兼得哦!本文只介绍下Gulp的基本使用和一些常用的Gulp插件,废话不多说,一起来看看吧。

Gulp快速入门教程

安装Gulp

Gulp是依赖Node的,这里假设你已经安装好了Node,首先我们全局安装一下Gulp:

全局安装完成后,我们再切换到项目的要目录下,执行:

安装Gulp插件

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

配置Gulp

我们需要在根目录下创建一个gulpfile.js文件来配置Gulp,将所有的插件加载进来,文件名必须要是gulpfile.js,否则无论执行,下面是一个gulpfile的示例:

运行Gulp

配置好gulpfile.js文件后,我们就可以运行Gulp进行相关的任务了,使用Gulp命令操作:

Gulp API

Gulp详细API的说明可以查看gulp API docs

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  3   博主  1

    • avatar 今日头条新闻 来自天朝的朋友 谷歌浏览器 Windows 7 0

      文章不错非常喜欢

      • avatar 起点 来自天朝的朋友 谷歌浏览器 Windows 7 0

        文章不错,好特易购支持你、乐泰可赛新胶水批发零售www.hyhaote.com

        • avatar 武胜婚庆公司 来自天朝的朋友 火狐浏览器 Windows 7 1

          这篇文章写得很好。