阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Gulp 入门例子

      创建 gulpfile 文件

      利用任何文本编辑器在项目大的根目录下创建一个名为 gulpfile.js 的文件,并在文件中输入以下内容:

      注意:创建的文件,名字叫gulpfile.js,不要随便起!

      创建默认任务

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

      项目的代码如图。

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

      运行Gulp任务

      在项目根目录下执行 gulp 命令:

      gulp
      

      这会运行gulpfile.js内的exports.default任务。

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

      运行原理

      上面的例子,运行的时候,看到这样的结果

      Using gulpfile E:\demo\my-project\gulpfile.js
      Starting 'default'...
      Hello 阿西河前端教程-axihe.com
      Finished 'default' after 3.02 ms
      
      • 第一点:找到本地的gulpfile.js文件
      • 第二点:开始运行任务'default'
      • 第三点:运行代码内的逻辑
      • 第四点:任务'default'运行结束,一共耗时3.02 ms

      创建copy任务

      src目录下的所有 js 输出到output目录

      gulp 暴露了 src()dest() 方法用于处理计算机上存放的文件。

      • src() 进行文件读入
        • 选择需要的文件,读取到内存中并通过流(Nodejs Stream)进行处理。
      • dest() 进行输出操作
        • 将文件储存在系统的目录内。
      • pipe() 方法来链式执行其他操作

      gulp 借鉴了 Unix 的 pipe 思想,处理文件采用流的方式,前一步的输出作为后一步的输入,中途不会在磁盘写入文件,仅在 dest 时输出文件,所以非常快速高效。

      stream 的核心是:上一级的输出是下一级的输入

      gulp 提供了 src 及 dest 方法分别来进行文件读入、输出操作,同时提供了 pipe 管道方法来链式执行其他操作。

      const { src, dest } = require('gulp');
      
      // 将src目录下的所有js输出到output目录
      exports.copy = function() {
        return src('src/*.js')
          .pipe(dest('output/'));
      }
      

      命令行运行下面命令,可以开始copy任务

      gulp copy
      

      task

      上面的 exports.xxx 就是代表任务,

      默认 task

      • 其中exports.default代表默认任务,default属于固定写法,不能修改,运行的时候,只需要运行gulp就好

      自定义 task

      • 其中exports.copy代表自定义任务,copy这个字段可以随便写,运行的时候,需要运行gulp copy

      babel

      const { src, dest } = require('gulp');
      const babel = require('gulp-babel');
      
      exports.default = function() {
        return src('src/*.js')
          .pipe(babel())
          .pipe(dest('output/'));
      }
      

      总结

      这一节主要认识了src/pipe/dest/task/

      dest() 接受一个输出目录作为参数,并且它还会产生一个 Node 流(stream),通常作为终止流(terminator stream)。当它接收到通过管道(pipeline)传输的文件时,它会将文件内容及文件属性写入到指定的目录中。

      流(stream)所提供的主要的 API 是 .pipe() 方法,用于连接转换流(Transform streams)或可写流(Writable streams)。

      gulp 还提供了 symlink() 方法,其操作方式类似 dest(),但是创建的是链接而不是文件( 详情请参阅 symlink() )。

      大多数情况下,利用 .pipe() 方法将插件放置在 src()dest() 之间,并转换流(stream)中的文件。

      老版本的写法

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

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

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

      卖前端学习教程

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

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

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

      目录
      目录