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 正在清理或 minified/concatenated。就像完全忽略独立任务一样。

我一直在尝试各种导出和导入独立任务的方法，但未能成功。不幸的是，他们网站上的文档非常少："Each task can be split into its own file, then imported into your gulpfile for composition. Not only does this keep things organized, but it allows you to test each task independently or vary composition based on conditions."

任何人都知道我可以尝试什么，或者我可能在使用 Gulp4 时做错了 API？

Answer 1

为了大家好，我试了好几次好像找到了办法！ :)

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

独立任务 - 比如 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));

Gulp 4 - 拆分主 gulpfile.js

Gulp 4 - splitting up main gulpfile.js

javascript

node.js

gulp

gulp-4