介绍
Gulp 是前端工程化的时代的代表之一。它是一种方便快捷的任务运行工具，可以自动执行各种前端任务，如编译 sass 和 less 样式，压缩 js、css、html 等文件，图片压缩等等。而随着前端工作的不断变化，gulp 的插件库也在不断地更新，其中就有一个名为 gulp-taskfromstreams 的插件。本文将介绍如何使用该插件来提高前端工程的开发效率。
安装
在使用 gulp-taskfromstreams 插件之前，需要先来安装它。打开命令行窗口，切换到你的项目目录下输入以下命令：
--- ------- -------------------- ----------
这个命令通过 npm 从远程仓库中下载 gulp-taskfromstreams 插件，并同时保存在你的项目中（--save-dev 参数表示将此插件作为开发时的依赖）。
使用
gulp-taskfromstreams 插件的作用是将以流（stream）的方式返回的一组任务（task）包装成 gulp 任务（task），并且它只需要定义一次任务，之后就可以被多次调用。
gulp 任务的定义通常如下所示：
--------------------- ---------- - -- ---- ----- ---
使用 gulp-taskfromstreams 插件后，我们就可以将流式任务包装成 gulp 任务：
--- --------------- - -------------------------------- --------------------- -------------------- ---- ------
其中，fn1、fn2 等都是以流式的方式定义的任务，它们可以是 gulp 插件中的某种功能函数，或是自己定义的一些任务。假设我们要将 images 目录中的所有图片进行压缩，此时我们可以使用 gulp-imagemin 插件（需要先安装）：
--- -------- - -------------------------
--- ---------------- - -----------------------------
--- ---------------- - -----------------------------
------------------------ ----------------
-------- -------- -
------ ----------------------------------------------
----------------
-------------------
-------------------------- ----------
---
--------------------------------
--
---上例中，我们定义了一个名为 minifyImage 的 gulp 任务，通过给 taskFromStreams 函数传递一个以流式方式定义的 imgMin 函数，将其包装成可被 gulp 调用的任务。imgMin 函数使用 gulp-imagemin 插件来处理图片，将其压缩并输出到 dist/images 目录中。其他类型的多个任务也可以使用 taskFromStreams 函数包装成流式任务，带来更高的代码重用和开发效率。
示例代码
一个完整的示例代码可以如下所示：
--- ---- - ----------------
--- --------------- - --------------------------------
--- ---- - ---------------------
--- ------------ - -----------------------------
--- -------- - --------------------------
--- -------- - -------------------------
--- ------ - -----------------------
----------------- ----------------
-------- ------------ -
------ ------------------------
--
-------- ------------- -
------ -------
--
-------- ------------ -
------ ---------------
--
-------- ----------- -
------ -----------
--
-------- ---------- -
------ ----------------------
--
---
------------------------ ----------------
-------- -------- -
------ ----------------------------------------------
----------------
-------------------
-------------------------- ----------
---
--------------------------------
--
---
--------------------- ----------------
-------- ------------ -
------ --------------------
--
-------- ---------- -
------ ---------
--
-------- --------- -
------ ---------------------
--
---
-------------------- --------------------- -------------- -------------上例中，我们定义了三个 gulp 任务：sass、minifyImage 和 uglifyJs，并且它们均使用了 gulp-taskfromstreams 插件来包装流式任务。其中，sass 任务将 sass 文件编译成 css 并进行前缀添加和压缩，最后输出到 dist/css 目录中；minifyImage 任务对 images 目录中的图片进行压缩处理，并输出到 dist/images 目录中；uglifyJs 任务对 js 文件进行压缩，并输出到 dist/js 目录中。最后，我们还定义了一个名为 default 的 gulp 任务，它并行执行上述三个任务。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/61595