Gulp 入门例子

🌙
手机阅读
本文目录结构
axihe

创建 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?”

axihe

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

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

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

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

关注我: Github / 知乎

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


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang