Gulp 4 - 拆分主 gulpfile.js

Question

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

基本上，我有两个独立的任务，一个用于缩小 CSS，另一个用于缩小 JS，我试图将其导入 maingulpfile.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。这就像完全忽略了独立任务。

我一直在尝试导出和导入独立任务的各种方法，但是没有设法让它工作。不幸的是，他们网站上的文档非常少：“每个任务都可以拆分成自己的文件，然后导入到您的 gulpfile 中进行组合。这不仅使事情井井有条，而且还允许您独立测试每个任务或根据组合变化有条件。”

任何人都知道我可以尝试什么，或者我在 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));