javascript - Gulp 4 - splitting up main gulpfile.js - Stack Overflow

admin管理员组

文章数量:1314075

I am trying to use Gulp4 API and writing a very basic and simple tasks to start with and am having some issues with splitting up the gulp file.

Basically I have two standalone tasks, one for minifying CSS and another for minifying JS which I am trying to import into the main gulpfile.js and calling them as part of the default task.

Below is a sample of one of the standalone gulp tasks which mainly cleans up minified css and minifies and concats the css again:

"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))
}

And below is a sample of my main 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);

The issue I am having is that the default task is starting and finishing fine, however no css is being cleaned up or minified/concatenated. It's like the standalone tasks are being ignored pletely.

I have been trying various ways of exporting and importing the standalone tasks however haven't managed to get this working. Unfortunately the documentation on their website is pretty minimal: "Each task can be split into its own file, then imported into your gulpfile for position. Not only does this keep things organized, but it allows you to test each task independently or vary position based on conditions."

Anyone has any ideas what I could try or maybe I'm doing wrong with Gulp4 API?

I am trying to use Gulp4 API and writing a very basic and simple tasks to start with and am having some issues with splitting up the gulp file.

Basically I have two standalone tasks, one for minifying CSS and another for minifying JS which I am trying to import into the main gulpfile.js and calling them as part of the default task.

Below is a sample of one of the standalone gulp tasks which mainly cleans up minified css and minifies and concats the css again:

"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))
}

And below is a sample of my main 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);

The issue I am having is that the default task is starting and finishing fine, however no css is being cleaned up or minified/concatenated. It's like the standalone tasks are being ignored pletely.

I have been trying various ways of exporting and importing the standalone tasks however haven't managed to get this working. Unfortunately the documentation on their website is pretty minimal: "Each task can be split into its own file, then imported into your gulpfile for position. Not only does this keep things organized, but it allows you to test each task independently or vary position based on conditions."

Anyone has any ideas what I could try or maybe I'm doing wrong with Gulp4 API?

• javascript
• node.js
• gulp
• gulp-4

Share Improve this question Follow asked Mar 21, 2019 at 14:46 user1809790user1809790 1,36955 gold badges2525 silver badges5555 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

For the benefit of everyone, I seem to have found a way to do this after a number of tries! :)

Pasting an example below. The key is in how you export the task in your standalone task (last 2 lines).

Standalone task - say 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;

Main gulp file:

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

本文标签： javascriptGulp 4splitting up main gulpfilejsStack Overflow