任务
这一章将讲解如何创建gulp任务,如何执行它,如何撰写一个具有实际功能和处理流程的任务。
创建任务
上一章已经讲到,单凭一个gulpfile是无法完成整个gulp流程管理的,大多数时候,我们都通过创建一堆有联系的、以gulpfile为入口的js代码,以此构建复杂的gulp管理体系。
上一章已经介绍了如何在gulpfile中引入其他js文件作为具体任务的执行模块,所以这里就不介绍了,我将直接具体的代码块来讲清楚如何创建任务。
在gulp任务体系代码中这样进行任务的注册:
gulp.task('my_task',require('./tasks/my_task.js'));
这样就创建好了一个gulp任务,在命令行中,执行
$ gulp my_task
require的那个脚本中的模块就会被执行。
我们来具体看下my_task.js
的结构:
var gulp = require('glup');
module.exports = function() {
// do your task
};
主体结构就这么简单,所有要执行的东西都写在这个function里面。
如何和你的项目结合
但是讲了这么多,你可能还没搞清楚,你用gulp到底为什么。实际上,gulp根本不是你的目标,你只是在开发你自己的项目的时候,把gulp作为一个工具,而不是为了写一大堆gulp任务,你的项目才是主,gulp只是辅助。举个栗子吧,你的项目里面会不断的用一个模板去生成新的文件,但是每一次生成的时候,都因为传入的参数不同而不同。利用gulp就可以实现这个目的,在上面的function里面写上读取模板、构建参数替换、输出到具体的文件等流程,这样就实现了这个目的,但是最终,gulp这些东西跟用户没关系,只有那些重复生成的文件才是用户最后要用的。
gulp比较厉害的,是可以自动去执行一些代码,后面一章我们会具体将gulp的api,这一章我们主要讲你应该怎么使用api,知道怎么使用了,下一章再知道都有哪些api,将快速掌握gulp。
比如,我们现在得到一个gulp的api:gulp.dest,这个api的功能是用来输出内容到某个文件的。
pipe(管道)这个概念
gulp里面有一个非常有名的概念,叫“管道”,也就是pipe,但它不直接作用于gulp,而是要作用于其他结果上。
pipe是node中的一个概念,可以处理Stream,而gulp.src这个api恰巧输出的是vinyl files的stream,因此可以用pipe来进行处理。
pipe是gulp和grunt的一个重大区别,关于两则的区别,会在专门的章节讲到。它就像一根一根的管道,东西从这个口进去,下个口出来,样子就变了,再进入下一个管道,出来又继续变,所以gulp里面的经典用法如下:
gulp.src('./client/templates/*.jade')
.pipe(jade())
.pipe(gulp.dest('./build/templates'))
.pipe(minify())
.pipe(gulp.dest('./build/minified_templates'));
这个pipe可以连续不断的使用,前面一个pipe处理之后的结果,将作为下一个pipe处理的开端。取出.pipe(gulp.dest('./build/xxx'))
这一节管道来讲一下:
gulp.dest是一个api,但是它只有一个参数,告诉程序处理结果将输出到'./build/xxx'这个文件,但是要输出什么内容呢?要输出的内容来自上一个pipe。
再来说下pipe(minify())
这个管道,minify来自一个gulp插件,需要在项目中执行npm install gulp-minify-css --save-dev
。这根管道都干了什么呢?将上一个pipe的结果(被放在了内存中)交给minify这个插件,插件处理完之后,就进入下一个管道。
逻辑处理
当然了,gulp不是只能用管道来进行处理的,你也可以自己处理,比如:
module.exports = function() {
copy(from,to);
minify(from,to);
};
上面的copy, minify是我自己乱写的两个函数,只是为了说明,你可以不用gulp的api也可以使用简单的js逻辑代码完成任务,只不过后面你学到watch的时候,就会考虑使用gulp。
现在动手写一个操作文件的gulp任务吧。
下一章介绍gulp的api。