阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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的教程都有!

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

      目录
      目录