Gulp 4 - 拆分主gulpfile.js

Question

我正在尝试使用Gulp4 API并编写一个非常基本和简单的任务开始，并且在分割gulp文件时遇到了一些问题。

基本上我有两个独立的任务，一个用于缩小CSS，另一个用于缩小JS，我试图将其导入主gulpfile.js并将它们作为默认任务的一部分进行调用。

下面是一个独立gulp任务的示例，它主要清理缩小的css并再次缩小和连接css：

"use strict";

const { src, dest, series, task } = require( 'gulp' );

const concat    = require( 'gulp-concat' );
const prefix    = require( 'gulp-autoprefixer' );
const cleanCSS  = require( 'gulp-clean-css' );
const rimraf    = require( 'gulp-rimraf' );

const baseURL = './src/main/resources/';
const minifiedCssSources = [ baseURL + '**/*min.css' ];
const cssSources = [ baseURL + '**/*.css' ];

module.exports = function() {

  const _cleanupMinifiedCss = function() {
    return src(minifiedCssSources
        , { allowEmpty: true }
        , { read: false })
        .pipe(rimraf({ force: true }));
  }

  const _minifyConcatCss = function() {
    return src(cssSources)
        .pipe(concat('css.min.css'))
        .pipe(cleanCSS())
        .pipe(prefix('last 2 versions'))
        .pipe(dest(baseURL + 'css/'));
  }

  task("cssMinify", series(_cleanupMinifiedCss, _minifyConcatCss))
}

以下是我的主要gulpfile.js示例：

"use strict";

const { task, parallel } = require( 'gulp' );

const jsMinify = require("./gulp/tasks/minifyJs");
const cssMinify = require("./gulp/tasks/minifyStyles");

function defaultTask(done) {
    parallel(cssMinify, jsMinify)
    done();
}

task('default', defaultTask);

我遇到的问题是默认任务是开始和完成，但没有css被清理或缩小/连接。这就像完全忽略独立任务一样。

我一直在尝试各种导出和导入独立任务的方法，但是没有设法让它工作。不幸的是，他们网站上的文档很少：“每个任务都可以拆分成自己的文件，然后导入你的gulp文件进行合成。这不仅可以保持组织有序，而且可以让你独立测试每个任务或改变基于组合条件。“

任何人都有任何想法，我可以尝试或可能我错误的Gulp4 API？

Answer 1

为了每个人的利益，经过多次尝试，我似乎找到了一种方法来做到这一点！ :)

在下面粘贴一个例子。关键在于如何在独立任务中导出任务（最后2行）。

独立任务 - 比如说gulp\css.js

"use strict";

const { src, dest, series, task } = require( 'gulp' );

const concat    = require( 'gulp-concat' );
const prefix    = require( 'gulp-autoprefixer' );
const cleanCSS  = require( 'gulp-clean-css' );
const rimraf    = require( 'gulp-rimraf' );

const baseURL = './src/main/resources/';
const minifiedCssSources = [ baseURL + '**/*min.css' ];
const cssSources = [ baseURL + '**/*.css' ];



function _cleanupMinifiedCss() {
    return src(minifiedCssSources
        , { allowEmpty: true }
        , { read: false })
        .pipe(rimraf({ force: true }));
}

function _minifyConcatCss() {
    return src(cssSources)
       .pipe(concat('css.min.css'))
       .pipe(cleanCSS())
       .pipe(prefix('last 2 versions'))
       .pipe(dest(baseURL + 'css/'));
}


const cssTasks = series(_cleanupMinifiedCss, _minifyConcatCss);
exports.cssTasks = cssTasks;

主要的gulp文件：

"use strict";

const { task, parallel } = require( 'gulp' );

const jsMinify = require("./gulp/tasks/minifyJs");
const cssMinify = require("./gulp/tasks/minifyStyles");

task('default', parallel(jsMinify.jsTasks, cssMinify.cssTasks));