Gulp 教程

🌙
手机阅读
本文目录结构
a'xi'he

本教程前言

如果你看到的Gulp教程写法是下面这种的,那就是Gulp老版本的写法,现在不推荐使用了;

/*
编写任务
    第一个参数:任务的名字
    第二个参数:回调函数
*/
gulp.task("default", function(){
    console.log('Hello 阿西河前端教程-axihe.com');
})

本教程是写于 2020 年 6 月 14 日,使用的版本是 gulp 4.0.2这个版本作为演示。

你可以通过gulp --version查看你的本地版本。

$ gulp --version

CLI version: 2.3.0
Local version: 4.0.2

https://a.axihe.com/npm/gulp/mintty_D1slFREj4o.png

写在前面

如果你对Nodejs比较了解,那么会更容易学习,如果你不了解Nodejs也不要紧,这里所介绍的Nodejs知识,非常简单,一看就会,都是基础语法,如果想学习Nodejs,可以查看本站的 Node.js 教程

如果你第一次接触Gulp

你可能关心下面的文章,新手主要了解下src,dest,task,watch这几个API

朱安邦的Gulp视频教程

如果你第一次接触Gulp,很多小伙伴更喜欢看视频入门,为此我做了一个视频教程;希望能够帮助到大家

  • 前言导读
  • Gulp 安装
  • Gulp 入门例子
  • 原理部分:
    • Gulp 运行原理
    • Gulp src 文件匹配规则
    • Gulp 中途添加文件
    • Gulp 分阶段输出
  • 例子部分1:
    • Gulp 压缩 CSS 文件
    • Gulp 压缩 JavaScript
    • Gulp 压缩 HTML 并替换内容
    • Gulp 合并文件
  • tsak部分:
    • task共有和私有
    • task返回值
    • Gulp 并行执行—creating-tasks
    • Gulp 顺序执行—creating-tasks
    • Gulp 任务重构—creating-tasks
  • 辅助部分:
    • Gulp 常见插件
    • Gulp 使用普通的npm包
    • Gulp 任务中使用 if
    • Gulp 内联插件
  • gulpfile部分:
    • Gulp gulpfile.js
    • Gulp gulpfile.js 模块化
    • Gulp gulpfile.js 与 TypeScript
  • 例子部分2:
    • Gulp 压缩图片
    • Gulp 根据 css 文件自动生成雪碧图
    • Gulp 构建 Sass
  • 构建与发布
    • Gulp 生产环境和开发环境判断—creating-tasks
    • Gulp 全自动配置(自动压缩,自动open,自动刷新)
      • 自动刷新/启动 server 并启动热更新
    • Gulp 发布到服务器

Gulp例子

如果你以前使用过Gulp

你可能关心下面的文章

还有一些Gulp的一些方法你可能也是非常关心的

如果在使用终于到了问题

下面这些可能会解决你遇到的问题。

Gulp 是什么

Gulp 是 Web 开发中帮你自动完成任务的工具,基于Nodejs Stream流的批处理工具。

注意:Gulp只是被广泛用于前端构建工具使用,但是它的作用不仅仅只有这些;

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

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

Gulp 优点

将重复操作的事情,编写成任务,需要的时候,一条命令,就可以让任务自动化执行了,比如压缩文件,发布文件等。

Gulp 本身比较简单,我们学习的时候,重要培养自己下面两点的能力,这才是 Gulp 的核心。

  • 如何制定一套合理、可配置、能够真正提升我们工作效率的构建流程
  • 如何在需要某个功能时,能够快速找到最合适的那个插件,且能够快速使用

特点

Gulp的任务的两大特点

  • 万事皆任务
  • 基于Nodejs数据流

Gulp 使用步骤

  1. Gulp 安装
  2. 在项目根目录下创建 gulpfile.js
  3. 在gulpfile.js文件中编写任务
    • 通常是处理项目内的,一般是src目录内文件处理到dist目录内
    • 注意:gulp可以把系统人的任何文件处理到任何地方,
  4. 运行gulp任务

注:如果网速不给力,可以改为国内的npm源来安装,推荐查看本站的 nrm 教程,通过nrm来安装npm的一些包。

Gulp 新版和旧版区别

很久以前,我刚开始搞 gulp 的时候,写法是下面这样子的:

老版本的写法

const gulp = require("gulp")

/*
编写任务
    第一个参数:任务的名字
    第二个参数:回调函数
*/
gulp.task("default", function(){
    console.log('Hello 阿西河前端教程-axihe.com');
})

例子仅仅作为参考,现在不推荐这么写啦,否则你会遇到错误: Gulp “Did you forget to signal async completion?”

新版本的写法

现在推荐的写法

function defaultTask(cb) {
    console.log('Hello 阿西河前端教程-axihe.com');
    cb();
}

exports.default = defaultTask

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

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

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

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

关注我: Github / 知乎

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


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang