Gulp 新手使用

Posted 2020-10-08 徐锅的博客

Gulp

注意：gulp依赖于nodejs，在安装前要确保已经安装node环境，如为安装查看《windows系统下nodejs安装及环境配置》安装node环境。

1.全局安装

在命令行执行下边命令，进行全局安装：

npm install --global gulp

检测gulp是否安装成功，执行下边命令：

gulp -v

如果出项下边类似的输出，则为安装成功。

My_computer>>gulp -v
[10:49:34] CLI version 3.9.1
[10:49:34] Local version 3.9.1

2.作为项目的开发依赖（devDependencies）安装

切换到项目目录下，在命令行执行：

npm install --save-dev gulp

--save-dev为可选参数，表示需要添加到package.json中的devDependencies节点下。（前提是项目下已存在package.json文件）

3.在项目下新建gulpfile.js文件（文件名不可更改），文件内容为：

var gulp = require(‘gulp‘); gulp.task(‘default‘, function() {
// 将你的默认的任务代码放在这
console.log("Gulp Test!");
});

4.运行gulp，在项目下执行下面命令，运行gulp

gulp

执行结果如下：

My_computer>>gulp
[10:56:26] Using gulpfile F:\Gulp_src\gulp_test01\gulpfile.js
[10:56:26] Starting ‘default‘...
Gulp Test!
[10:56:26] Finished ‘default‘ after 208 μs

Gulp API

gulp在git上只介绍了四个API： task 、 dest 、 src 、 watch ，除此之外，gulp还提供了一个 run 方法。

1.gulp.src(globs[, options])

src() 方法是指定需要处理的源文件的路径，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件。

 

参数	说明
globs	需要处理的源文件匹配符路径
options	有3个属性buffer、read、base

 

globs参数说明：

“css/base.css”：具体文件名称

“css/*.css”：指css下所有以.css结尾的文件

“src/**/*.css”：匹配src下0个或多个文件目录下所有以.css结尾的文件

“!src/js/test.js”：排除src/js下的test.js文件

“{src/js/{a,b}.js}”：匹配src/js下a.js和b.js文件

“{src/img/*.{jpg,png,gif}}”：匹配src/img下的所有jpg/png/gif图片

options参数说明：

options.buffer ： 类型： Boolean 默认：true 设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；

options.read ： 类型： Boolean 默认：true 设置false，将不执行读取文件操作，返回null；

options.base ： 类型： String 设置输出路径以某个路径的某个组成部分为基础向后拼接

应用实例：

var gulp= require(‘gulp‘),
gulp.task(‘test‘, function () {
gulp.src([‘src/**/*.css‘,‘!src/{extend,page}/*.css‘])
 .pipe(gulp.dest(‘./css‘));
});

2.gulp.dest(path[, options])

dest() 方法是指定处理完后文件输出的路径。能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

 

参数	说明
path	指定文件输出路径，或者定义函数返回文件输出路径亦可
options	有2个属性cwd、mode

 

path参数说明：

指文件输出的路径，可以通过函数返回路径，如果路径不存在会默认创建该路径。文件被写入的路径是以所给的相对路径根据所给的目标目录计算而来。类似的，相对路径也可以根据所给的 base 来计算。

options参数说明：

options.cwd

类型： String 默认值： process.cwd()

输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效。

options.mode

类型： String 默认值： 0777

八进制权限字符，用以定义所有在输出目录中所创建的目录的权限。

应用实例：

var gulp= require(‘gulp‘),
gulp.task(‘test‘, function () {
gulp.src(‘./client/templates/*.jade‘)
.pipe(jade())
.pipe(gulp.dest(‘./build/templates‘))
.pipe(minify())
.pipe(gulp.dest(‘./build/minified_templates‘));
});

3.gulp.task(name[,deps],fn)

该方法用来定义一个能够执行的gulp任务。

 

参数	说明
name	任务名称，不能包含空格
deps	该任务依赖的任务，依赖任务的执行顺序跟在deps中声明的顺序一致
fn	该任务调用的插件操作

 

name参数说明：

任务的名字，如果你需要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。

deps参数说明：

类型：Array

一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。

gulp.task(‘mytask‘, [‘array‘, ‘of‘, ‘task‘, ‘names‘], function() {
 // 做一些事 
});

注意： 你的任务是否在这些前置依赖的任务完成之前运行了？请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。

fn参数说明：

该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。

应用实例：

vargulp= require(‘gulp‘);

gulp.task(‘test_1‘,function(){
console.log(‘test_1 done‘);
});

gulp.task(‘test_2‘,function(){
console.log(‘test_2 done!‘);
});

gulp.task(‘test_3‘,function(){
console.log(‘test_3 done‘);
});

gulp.task(‘end‘,[‘test_1‘,‘test_2‘,‘test_3‘],function(){
  console.log(‘end done‘);
});

运行结果：

My_computer>>gulp end
[11:31:39] Using gulpfile F:\Gulp_src\gulp_test01\gulpfile.js
[11:31:39] Starting ‘test_1‘...
test_1 done
[11:31:39] Finished ‘test_1‘ after 171 μs
[11:31:39] Starting ‘test_2‘...
test_2 done!
[11:31:39] Finished ‘test_2‘ after 581 μs
[11:31:39] Starting ‘test_3‘...
test_3 done
[11:31:39] Finished ‘test_3‘ after 201 μs
[11:31:39] Starting ‘end‘...
end done
[11:31:39] Finished ‘end‘ after 291 μs

4.gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])

监听文件修改，文件修改保存和执行相应配置的任务。

 

参数	说明
glob	需要处理的源文件匹配符路径
opts	传给gaze的参数，具体参看 gaze ；
tasks	需要执行的任务的名称数组
cb(event)	每个文件变化执行的回调函数

 

glob参数说明：

类型：String或者Array

一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。

tasks参数说明：

类型：Array

需要在文件变动后执行的一个或者多个通过 gulp.task() 创建的 task 的名字。

cb(event)参数说明：

每次变动需要执行的 callback。

gulp.watch(‘js/**/*.js‘, function(event) { 
  console.log(‘File ‘ + event.path + ‘ was ‘ + event.type + ‘, running tasks...‘); 
});

callback 会被传入一个名为 event 的对象。这个对象描述了所监控到的变动：

event.type

类型： String

发生的变动的类型：added, changed 或者 deleted。

event.path

类型： String

触发了该事件的文件的路径。

5.gulp.run()

gulp模块的 run() 方法，表示要执行的任务。可能会使用单个参数的形式传递多个任务。注意：任务是尽可能多的并行执行的，并且可能不会按照指定的顺序运行。

应用实例：

gulp.task(‘end‘,function(){
  gulp.run(‘test_1‘,‘test_2‘,‘test_3‘);
});

运行结果：

My_computer>>gulp end
[11:56:13] Using gulpfile F:\Gulp_src\gulp_test01\gulpfile.js
[11:56:13] Starting ‘end‘...
gulp.run() has been deprecated. Use task dependencies or gulp.watch task trigger
ing instead.
[11:56:13] Starting ‘test_1‘...
test_1 done
[11:56:13] Finished ‘test_1‘ after 562 μs
[11:56:13] Starting ‘test_2‘...
test_2 done!
[11:56:13] Finished ‘test_2‘ after 207 μs
[11:56:13] Starting ‘test_3‘...
test_3 done
[11:56:13] Finished ‘test_3‘ after 205 μs
[11:56:13] Finished ‘end‘ after 8.52 ms