资讯专栏INFORMATION COLUMN

重读 Gulp

vpants / 993人阅读

摘要:当接收一个回调函数的时候,一定要注意回调函数中的参数。主要作用就是用来读取文件或者文件夹中的数据。表示文件的名称指的是发生的变化使用技巧的进一步使用,可以参照中文官网中的技巧集。

Gulp 简介

Gulp 对现在的前端而言,是一个稍微老旧的工具了,但是,为了复习以前学过的内容,还是把它翻出来,放在自己的博客中。说不定哪天又用到了呢。

需要说明的是,这里使用的 Gulp 版本是 3.9.1
认识 Gulp

Gulp 是基于 Nodejs 的任务运行器,主要作用就是对代码进行构建打包。说白了,就是将源代码通过 Gulp 中流的操作,生成目标代码。

Gulp 借鉴了 Unix 操作系统中的管道思想,前一级的输出作为后一级的输入,所有的操作都是通过 Nodejs 流的形式来进行操作。这种思想使操作变得简单,为后续的任务编写打下基础。

Gulp 资源

学习任何一门技术之前,首先要知道它的官网,Gulp 也不例外。在这里把中文官网和英文官网一并放在下面,当然,最好是看英文官网,所以把英文官网放在了最上面。

英文官网

中文官网

当然,该项目的 GitHub 地址也是需要知道在哪个地方的,这样方便查看源码。闲着没事的时候,也可以看看源码实现,提高一下自己的技术水平。

GitHub 地址

在网上搜集 Gulp 相关教程的时候,发现了一个很好的网站,上面有一系列关于 Gulp 的文章。这个网站中讲解 Gulp 还是比较详细的。可以按照该网站中给出的教程,逐个学习。

Gulp教程

Gulp 入门 安装 Gulp

Gulp 的安装依赖 Nodejs。在安装 Gulp 之前,一定要确保已经安装了 Nodejs。关于 Nodejs 的安装过程,可以参照 安装 Nodejs。

全局安装 :

如果需要全局使用 Gulp,可以使用全局安装。

$ npm install -g gulp-cli

全局安装,可以在终端中使用下面的命令查看当前的 Gulp 版本 :

$ gulp -v
[16:10:17] CLI version 1.4.0

通过全局安装的方式,在存在 gulpfile.js 的地方,都可以使用 gulp 命令来执行任务。

# 如 gulpfile.js 中存在一个 default 的命令,就可以通过下面的方式执行
$ gulp

项目依赖安装 :

这个时候安装的 Gulp 是在 package.json 中的 devDependencies 节点下的,因为 Gulp 是项目开发时使用的模块,不是生产时使用的模块。

在安装的时候,可以选择使用 npm 的方式安装,这种安装方式最常见,但是一般安装速度比较慢。

# 使用 npm 安装
$ npm install --save-dev gulp

当然,也可以选择使用 yarn 的方式进行安装,这种方式安装比较快速,但是需要安装 yarn。

# 使用 yarn 安装
$ yarn add gulp -D

通过项目依赖来安装的 Gulp,必须在项目的根目录下执行,且根目录中必须存在 gulpfile.js,执行 Gulp 任务的时候,需要使用 Gulp 工具在当前项目目录中的相对路径来调用。

# 如 gulpfile.js 中存在一个 default 的命令,就可以通过下面的方式执行
$ ./node_modules/.bin/gulp
一般情况下,不推荐使用全局的方式来安装 Gulp。推荐使用项目依赖来安装,然后再结合 package.json 来使用。
Gulp 的简单使用

首先要通过安装项目依赖的方式来安装 Gulp :

$ yarn add gulp -D

由于通过 Gulp 来执行任务,首先需要有一个 gulpfile.js 文件,因此,在执行任务之前,要创建 gulpfile.js 文件。文件创建完成之后,创建两个任务。

// 在文件中一定要引入的模块
var gulp = require("gulp");

// 将你的默认的任务代码放在这
gulp.task("default", function() {
  console.log("default task ...");
});

// 自定义名称的任务
gulp.task("demo",function(){
  console.log("demo task ...");
});

任务创建完成之后,下面就是通过 Gulp 来执行任务了。执行任务之前,首先明白不同的任务。对于 Gulp 而言,本身存在一个名字为 default 的任务,这个任务名在 Gulp 中已经内置了。除了 default 之外,其余所有的任务都是自定定义的任务,也就是说,除了 default 之外,任务名可以自定义。

在上面的代码中定义了两个任务,其中 default 是默认任务,执行的时候比较方便,在 gulp 命令之后,不需要跟任何参数。

$ ./node_modules/.bin/gulp

[14:50:11] Using gulpfile ~/Desktop/es/gulpfile.js
[14:50:11] Starting "default"...
default task ...
[14:50:11] Finished "default" after 187 μs

但是,自定义的任务执行的时候,要在 Gulp 命令后跟上一个参数,这个参数是任务的名字。

$ ./node_modules/.bin/gulp demo

[14:50:16] Using gulpfile ~/Desktop/es/gulpfile.js
[14:50:16] Starting "demo"...
demo task ...
[14:50:16] Finished "demo" after 1.35 ms

输出的日志中,会把任务开始的时间以及结束的时间打印出来,开始时间和结束时间之间就是任务执行的过程。从某方面来讲,这种输出的日志类似 HTML 中的标签,存在开始标签和结束标签。当然,这只是一种类比。

需要补充的一点 : 如果需要使用 babel 来转换 js 文件,为了能使 babel 的配置文件能够正常读取,一般会把 gulpfile.js 重新命名为 gulpfile.babel.js,这样就可以在 gulpfile.babel.js 中使用 ES6 的最新语法了。
Gulp API

Gulp 的 API 设计也比较简单,总共只有四个 gulp.src gulp.dest gulp.task gulp.watch。很少的 API,极大程度上缩减了记忆的成本,但是需要自己配置的内容相对而言就多了。

gulp.task

gulp.task 主要是用来定义任务的。

/**
 * 作用 : 定义一个任务
 * @param {String} name 任务的名字,不要在任务名字中出现空格
 * @param {Array} deps 可选参数,任务列表的数组,是当前任务执行前的依赖任务,数组的元素是任务名
 * @param {Function} fn 定义任务所要执行的一些操作
 */
gulp.task(name[, deps], fn)

对于第三个参数,需要说明一下。第三个参数可以接收一个回调函数,也可以返回一个 stream。

当接收一个回调函数的时候,一定要注意回调函数中的参数。

gulp.task("mytask", function (cb) {
  if (true) {
    cb(null); // 当回调函数的参数是 null 的时候,说明不会存在错误
  } else {
    cb("存在错误"); // 当回调函数的参数不是 null 的时候,这个时候就是产生了错误
  }
});

返回一个 stream 流的时候,一般是通过 gulp 的 API 来获取的。

gulp.task("mytask", function() {
  var stream = gulp.src("client/**/*.js")
    .pipe(gulp.dest("build"));
  return stream;
});
gulp.src

gulp.src 主要作用就是用来读取文件或者文件夹中的数据。

/**
 * 作用 : 读取数据并返回一个流
 * @param {String | Array} globs 参数是文件或者文件夹,支持相对路径
 * @param {Object} options 可选参数,任务列表的数组,是当前任务执行前的依赖任务,数组的元素是任务名
 */
gulp.src(globs[, options])

其中 globs 的参数是 node-glob 模块 的参数。详细参数可以到官网查看这个模块,这里只说明几个特殊的匹配。

** 用于匹配文件夹,表示 0 个或者多个层级的目录

* 用于匹配文件名,表示 0 个或者多个字符

! 排除符合规则的文件,! 一定要放在匹配规则之前

如果要匹配 src 目录下的所有 .js 文件,且排除 src 目录下的所有以下划线开头的 .js 文件,就可以写成下面的形式 :

gulp.src(["./src/**/*.js", "!./src/**/_*.js"])

使用 options.base 可以修改文件的目标路径。在没有指定该参数的时候,目标路径是第一个匹配符之前的路径。

gulp.task("default", function () {
  // 这个时候会把 ./src/one 替换成 ./build,也可以理解成此时的 options.base 为 ./src/one
  // 最终 .js 文件所在的路径就是 ./build/*.js
  return gulp.src(["./src/one/*.js"])
    .pipe(gulp.dest("./build"));
});

如果指定了 options.base 参数,那么最终文件所在的路径就会发生变化。

gulp.task("default", function () {
  // 最终 .js 会被拷贝到 ./build/one/*.js 中
  return gulp.src(["./src/one/*.js"], {
      base: "src"
    })
    .pipe(gulp.dest("./build"));
});
gulp.dest

gulp.dest 用来指定文件最终被写入的路径。

/**
 * 作用 : 读取数据并返回一个流
 * @param {String} path 文件的目标路径,这个只能指定文件夹,不能指定文件
 * @param {Object} options 可选参数,一般很少使用,这里不再说明
 */
gulp.dest(path[, options])

gulp.dest 的简单使用实例。

gulp.task("default", function () {
  return gulp.src("./src*.js").pipe(gulp.dest("./build"));
});
gulp.watch

gulp.watch 用于监视文件变化,发现文件变化,则触发某个操作。

/**
 * 作用 : 监视文件变化,发现文件变化,则触发某个操作
 * @param {String | Array} glob 一般是匹配文件
 * @param {Object} opts 可选参数,一般很少使用,这里不再说明
 * @param {Array} tasks 数组的参数是任务的名称,表示文件变化触发一个或多个任务
 */
gulp.watch(glob [, opts], tasks)

咱们现在看一个简单的例子,.js 文件发生变化的时候,执行任务 one。

gulp.task("one", function () {
  console.log("one...");
});

gulp.task("default", function () {
  console.log("default ...");
});

gulp.watch("src/**/*.js", ["one"]);

现在有一个需求,当某个 .js 文件发生变化的时候,需要获取是哪个文件发生了变化,那么就需要增加监听。

gulp.task("one", function () {
  console.log("one...");
});

gulp.task("default", function () {
  console.log("default ...");
});

gulp.watch("src/**/*.js", ["one"]).on("change", function(event) {
  // event.path 表示文件的名称
  // event.type 指的是发生的变化
  console.log("File " + event.path + " was " + event.type + ", running tasks...");
});
使用技巧

Gulp 的进一步使用,可以参照中文官网中的 gulp 技巧集。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92185.html

相关文章

  • 重读 JavaScript DOM 编程艺术(一)--DOM 的增删改查

    摘要:在很久之前读过编程艺术,现在重读又有新的体会,遂记录下。唯一没有被其他元素包含的元素是元素,它是的根元素。是节点内的第一个子节点,所以将是一个值,应该写成才能得到。操作操作无非是增删改查,我们先看查和改。 在很久之前读过JavaScript Dom 编程艺术,现在重读又有新的体会,遂记录下。 什么是DOM 对于这种英文缩写,首先看它的英文全拼--Document Object Mode...

    songze 评论0 收藏0
  • 重读PHP手册笔记系列(一)

    摘要:手册序言,即,是一种被广泛应用的开源通用脚本语言,尤其适用于开发并可嵌入中去。该语言的主要目标是允许开发人员快速编写动态生成的页面,但的用途远不只于此。对于服务器模块版本的,仅在服务器启动时读取一次。 PHP手册 序言 PHP,即PHP: Hypertext Preprocessor,是一种被广泛应用的开源通用脚本语言,尤其适用于 Web 开发并可嵌入 HTML 中去。它的语法利用了 ...

    hikui 评论0 收藏0
  • 重读你不知道的JS (上) 第一节五章

    摘要:词法作用域的查找规则是闭包的一部分。因此的确同闭包息息相关,即使本身并不会真的使用闭包。而上面的创建一个闭包,本质上这是将一个块转换成一个可以被关闭的作用域。结合块级作用域与闭包模块这个模式在中被称为模块。 你不知道的JS(上卷)笔记 你不知道的 JavaScript JavaScript 既是一门充满吸引力、简单易用的语言,又是一门具有许多复杂微妙技术的语言,即使是经验丰富的 Jav...

    worldligang 评论0 收藏0
  • 重读你不知道的JS (上) 第一节四章

    摘要:如果提升改变了代码执行的顺序,会造成非常严重的破坏。声明本身会被提升,而包括函数表达式的赋值在内的赋值操作并不会提升。要注意避免重复声明,特别是当普通的声明和函数声明混合在一起的时候,否则会引起很多危险的问题 你不知道的JS(上卷)笔记 你不知道的 JavaScript JavaScript 既是一门充满吸引力、简单易用的语言,又是一门具有许多复杂微妙技术的语言,即使是经验丰富的 Ja...

    chanjarster 评论0 收藏0
  • 重读你不知道的JS (上) 第一节三章

    摘要:如果是声明中的第一个词,那么就是一个函数声明,否则就是一个函数表达式。给函数表达式指定一个函数名可以有效的解决以上问题。始终给函数表达式命名是一个最佳实践。也有开发者干脆关闭了静态检查工具对重复变量名的检查。 你不知道的JS(上卷)笔记 你不知道的 JavaScript JavaScript 既是一门充满吸引力、简单易用的语言,又是一门具有许多复杂微妙技术的语言,即使是经验丰富的 Ja...

    lavor 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<