任务

这一章将讲解如何创建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。

results matching ""

    No results matching ""