npm包gulp-series使用教程-JavaScript中文网-JavaScript教程资源分享门户

#npm包gulp-series使用教程

在前端开发中，自动化构建工具是必不可少的，其中Gulp是现在使用最广泛的构建工具之一，可以根据需要自定义我们所需要的构建过程。今天我们来介绍Gulp常用的npm包——gulp-series，该包可以帮助我们无需手动去按照特定的顺序运行多个任务，只需简单设置，它就能够自动帮我们完成。

##Gulp-Series是什么？

Gulp系列是一个简单的NPM包，旨在帮助我们一次运行多个Gulp任务。可以控制任务的顺序和并发性。

##安装Gulp-series

我们首先需要将gulp-series安装到我们的开发环境中:

npm install gulp-series --save-dev

或者使用yarn:

yarn add gulp-series --dev

##使用Gulp-series

Gulp-series非常容易使用。首先，通过require将其导入您的Gulpfile.js文件:

var series = require('gulp-series');

然后，创建一个任务数组，包含要在运行序列中运行的所有任务。您可以将其命名为tasks，

var tasks = [
    task1,
    task2,
    task3
];

请注意，我们这里所说的 “任务” 可以是任何 Gulp 都支持的任务——就像您在 Gulp 中创建任何其他任务一样。

最后，需要在Gulp任务中调用series()方法，然后将要运行的任务数组作为参数传递。

gulp.task('default', series(tasks));

我们一般设置在default任务里。

这样，我们就将所需任务按照我们给定的顺序传递给了gulp-series，这时，gulp-series会自动按照我们给定的顺序执行我们指定的任务。假如我们的gulp文件中有以下几个任务：

-- -------------------- ---- -------
------------------ -------------- -
    ---
    -------
---

------------------- ---------- -
    ---
---

-------------------- ---------- -
    ---
---

------------------- ---------- -
    ---
---

----------------- ---------- -
    ---
---

如果您希望所有任务按照以下顺序运行：clean, styles, scripts, images, copy——可以将其传递到series()方法中：

gulp.task('build', series('clean', 'styles', 'scripts', 'images', 'copy'));

那么，怎样才能更精确的设置任务的顺序呢？这时，我们又需要哪些方法来实现呢？

##任务运行顺序

如果您需要在序列中更精确地控制 Gulp 任务的运行顺序，您可以传递一个对象，而不仅仅是一个任务数组。在这个对象中，您可以指定顺序、并发性和其他选项。

例如，想要先运行一些任务，再同时运行其他任务的场景，可以像下面这样定义：

var composableTasks = series(
  ['copy', 'clean', 'styles'],
  parallel('scripts', 'images')
);

gulp.task('build', composableTasks);

在这个示例中，我们首先运行copy、clean和styles任务，然后同时运行scripts和images任务。

将两个高级任务结合使用可以创建令人印象深刻的构建任务。

##示例代码

-- -------------------- ---- -------
--- ---- - ----------------
--- ------ - -----------------------

------------------ ---------- -
    ---------------------
---

------------------- ---------- -
    ----------------------
---

-------------------- ---------- -
    -----------------------
---

------------------- ---------- -
    ----------------------
---

----------------- ---------- -
    --------------------
---

--- ----- - -
    -------- --------- ---------- --------- ------
--

-------------------- ---------------

##总结

Gulp-series是非常方便的npm包，它可以使我们的开发过程变得更加自动化，让我们可以更加集中精力去实现具体的业务功能，提高我们的工作效率。同时，它也为我们扩展自动化构建工具提供了一些新的思路。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f156421403f2923b035c32b