Gulp.js 教程

🌙
手机阅读
本文目录结构

写在前面

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

视频教程

我为这个Gulp.js做了一套对应的视频教程,可以在我的Bilibili频道上看到: https://www.bilibili.com/video/BV1HA411i73M

具体的目录如下:

本教程前言

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

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

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

本教程最后更新于 2020年8月10日

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

$ gulp --version

CLI version: 2.3.0
Local version: 4.0.2

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

如果你第一次接触Gulp

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

如果你以前使用过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
axihe

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

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

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

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

关注我: Github / 知乎

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


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

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

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

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

axihe