Gulp 4 - splitting up main gulpfile.js

Question

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

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

。

以下是独立沟渠任务之一的样本，主要清洁了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被清理或缩小/串联。就像独立任务被完全忽略一样。

我一直在尝试各种导出和导入独立任务的方式，但是尚未设法实现此功能。不幸的是，他们的网站上的文档非常小："每个任务都可以分为自己的文件，然后将其导入到您的墨西哥湾中以进行组成。这不仅可以使事物井井有条，而且允许您独立地测试每个任务或基于构图的每个任务在条件下。"

有人有任何想法，我可以尝试什么，或者我对Gulp4 API做错了？

Answer 1

为了使每个人受益，我似乎已经找到了一种尝试之后的方法！：）

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

独立任务 - 说gulpcss.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;

主湾文件：

"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));