gulp实作记录之API

发表于 2016-08-06   |   分类于 前端开发   |  

前言

软件程序存在的意义，是为了简化我们的生活和工作，利用程序可以代替我们完成一些生活工作中重复性的活动。构建工具的存在也是这个目的，简化我们的程序开发流程，并在一定程度上规范我们的开发工作。我所知道的第一个前端构建工具是grunt，未及深入学习，出现了gulp，论坛评价一边倒地赞扬gulp的优秀。最近又出现了webpack，替代browserify,目标是成为一个统一JavaScript前后端开发的构建工具，我也对webpack的官方文档做了一定学习，不过由于webpack和react贴得更近一些，而我暂时并未介入react及react native的学习开发，因此对其暂时搁置一段时间。个人认为webpack暂时不能完全取代gulp和grunt在前端构建的地位。因此今天就深入学习实践了一下gulp。

参考博客gulp详细入门教程，里面介绍很详细。还有一个很重要的工具cnpm

本篇主要对gulp的API进行介绍，gulp的API页面里有更多黑科技。gulp有4个API，分别是gulp.task,gulp.src,gulp.dest和gulp.watch，我们使用这四个API和众多的插件完成前端项目的构建工作。构建工作的开始当然是配置gulpfile.js文件了，这个文件在整个项目的根目录下面，我们接下来的代码全部是写在gulpfile.js中。

gulp.task

我们从gulp.task这个API开始谈起。话不多说，罗列usecase。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//在命令行里运行gulp somename，gulp就会运行somename任务的函数所规定的程序。
gulp.task('somename', function() {
  // Do stuff
});

//在使用gulp mytask命令执行任务时，会提前执行 ['array', 'of', 'task', 'names']中的依赖任务。
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // Do stuff
});

//省略函数项目，那么gulp build命令会将['array', 'of', 'task', 'names']中的各个分别执行一遍
gulp.task('build', ['array', 'of', 'task', 'names']);

//使用gulp命令即可执行['array', 'of', 'task', 'names']数组中的各个任务
gulp.task('default',['array', 'of', 'task', 'names'])

gulp.src

这里同样罗列usecase，这样更清楚。关于gul.src的options参数的接受，请自行进入API页面查询。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*
 *1.这里介绍下pipe函数，pipe函数灵感来源于*nix系统中管道的概念，上一级管道流出自动变为
 *  下一级管道的流入。因此gulp.src获得的文件内容，在下一个pipe函数中变为传入内容由插件
 *  函数如jade()/minify()来操作并将其执行结果流出转化为下一级pipe()的输入内容。
 *2.学过正则或者shell的同学对*号不会陌生，这是一个通配符，匹配任何元字符。那么我们很容
 *  易得出client/templates/*.jade匹配client/templates文件夹下面的任何以.js结尾的文件
 */
gulp.src('client/templates/*.jade')
	.pipe(jade())
	.pipe(minify())
	.pipe(gulp.dest('build/minified_templates'));

/*1.假设client文件夹下有a.js，bob.js，bad.js三个文件，那么下面的函数匹配client文件夹下
 *  的a.js和bad.js
 *2.gulp.src接受单个字符串参数，也可以接受数组字符串参数
 *3.!在程序中代表非，取反，因此!client/b*.js代表不匹配以b开头,以.js结尾的文件。此外还
 *  有下面两个用法。
 *4."**"：匹配0个或多个子文件夹    例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；
 *5."{}"：匹配多个属性    例：src/{a,b}.js(包含a.js和b.js文件)  src/*.{jpg,png,gif}
 *  (src下的所有jpg/png/gif文件)；
*/
gulp.src(['client/*.js', '!client/b*.js', 'client/bad.js'])

gulp.dest

usecase又来了。^…^

1
2
3
4
5
6
//gulp.dest相对简单，看看例子，一目了然。
gulp.src('./client/templates/*.jade')
	.pipe(jade())
	.pipe(gulp.dest('./build/templates'))
	.pipe(minify())
	.pipe(gulp.dest('./build/minified_templates'));

gulp.watch

顾名思义，看着，监视，监测。gulp.watch会监测被指定的文件，并在文件添加，修改内容,被重新命名，被删除的时候触发指定的函数，并且在函数中可以得到触发事件的类型

1
2
3
4
5
6
7
/* 1.event.path: 触发事件的文件所在的路径。
 * 2.event.type:触发事件的类型:added, changed, deleted 或者 renamed。
 * 3.文件设置参考gulp.src中提及的规则
*/
gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

总结

以上通过usecase介绍了gulp中四个API的用法，下一篇中会介绍gulp中一些常用的插件。

#gulp #构建工具
gulp实作记录之插件
git 修改远程仓库