7

我正在尝试使用 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 做错了吗？

4

1 回答 1

9

为了大家的利益，经过多次尝试，我似乎找到了一种方法！:)

在下面粘贴一个示例。关键在于如何在独立任务中导出任务（最后 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));
于 2019-03-22T11:05:18.590 回答