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被清理或缩小/串联。就像独立任务被完全忽略了。

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

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

1 个答案: