Gulp 4 - расщепление основного gulpfile.js - PullRequest
Новая
       32

Gulp 4 - расщепление основного gulpfile.js

2 голосов
/ 21 марта 2019

Я пытаюсь использовать 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?

1 Ответ

0 голосов
/ 22 марта 2019

Для блага всех, кажется, я нашел способ сделать это после нескольких попыток! :)

Вставка примера ниже. Ключ в том, как вы экспортируете задачу в свою автономную задачу (последние 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;

Основной файл глотка: 

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