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 技巧集。