为什么 Gulp 两次运行相同的任务？答案

【问题标题】：Why is Gulp running the same task twice?为什么 Gulp 两次运行相同的任务？
【发布时间】：2019-10-08 20:34:06
【问题描述】：

我遇到了与question posted here 类似的问题，但那里给出的答案都不适用于我的情况。

当我运行 Gulpfile.js 文件中定义的唯一一个任务时，它会被执行两次。

我正在使用 Gulp 版本 4.0.2

这是我的 Gulpfile.js 文件的内容：

const { src, dest, watch, series, parallel } = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');    
const files = {
    bootstrapSrcPath: 'bootstrap-sass/bootstrap.scss',
    bootstrapDstPath: 'Test'
};

exports.scssTask = series(
    scssTaskFunc
);

function scssTaskFunc() {  
    return src(files.bootstrapSrcPath)            
        .pipe(sass({ style: 'expanded' }))
        .pipe(dest(files.bootstrapDstPath))
        .pipe(postcss([autoprefixer(), cssnano()]))
        .pipe(rename({ suffix: '.min' }))
        .pipe(dest(files.bootstrapDstPath));
}

这是我在 CMD 提示符下运行的命令和结果：

C:\Users\myUser\source\repos\myProject> cmd.exe / c gulp - b "C:\Users\myUser\source\repos\myProject" --color--gulpfile "C:\Users\myUser\source\repos\myProject\Gulpfile.js" scssTask
[16: 10: 15]Using gulpfile ~\source\repos\myProject\Gulpfile.js
[16: 10: 15]Starting 'scssTask'...
[16: 10: 15] Starting 'scssTaskFunc'...
[16: 10: 17] Finished 'scssTaskFunc' after 1.7 s
[16: 10: 17]Finished 'scssTask' after 1.71 s
Process terminated with code 0.

它可以工作，输出文件是我所期望的，但做两次似乎很浪费。

这是 gulp 显示的任务：

C:\Users\myUser\source\repos\myProject> gulp--tasks
[15: 57: 29]Tasks for ~\source\repos\myProject\Gulpfile.js
[15: 57: 29]└─┬ scssTask
[15: 57: 29]└─┬ <series>
[15:57:29]     └── scssTaskFunc

为什么要运行两次任务，一次作为“scssTask”，第二次作为“scssTaskFunc”？

顺便说一句，这是我第一次尝试 gulp，所以如果这是一个 derp 问题，我深表歉意。

【问题讨论】：

标签： gulp

【解决方案1】：

您的任务没有运行两次，只是因为您使用的是gulp.series，所以看起来确实如此。

gulp.series 和gulp.parallel 通常用于将任务组合成更大的操作。例如，如果您也有jsTaskFunc，您可以像这样创建一个任务build：

exports.build = parallel(scssTaskFunc, jsTaskFunc);

运行gulp build 会在您的终端中记录如下内容：

[09:42:12] Starting 'build'...
[09:42:12] Starting 'scssTaskFunc'...
[09:42:12] Starting 'jsTaskFunc'...
[09:42:12] Finished 'scssTaskFunc' after 93 ms
[09:42:12] Finished 'jsTaskFunc' after 94 ms
[09:42:12] Finished 'build' after 111 ms

由于您使用了gulp.series，现在正在发生类似的事情，因为scssTask 将scssTaskFunc 作为依赖任务运行，但严格来说scssTask 和scssTaskFunc 并不是同一个任务。什么都不会运行两次。

为避免混淆，并且因为gulp.series 不是必需的，只需执行以下操作：

exports.scssTask = scssTaskFunc;

【讨论】：