阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    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
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录