'TypeError: file.pipe is not a function' when trying to publish compiled CSS to GCP bucket via gulp-gcloud-publish package

I am trying to use the gulp-gcloud-publish package to upload my compiled SCSS and JS scripts to my GCP bucket, and I am pulling my hair out trying to get it to work. I am assuming it is because of the package being outdated and possibly incompatible with Gulp 4.

Here are my gulp dependencies that I am loading:

const autoprefixer = require("autoprefixer"); // v 9.5.1
const cssnano = require("cssnano"); // v 4.1.10
const { src, dest, watch, series, parallel } = require("gulp"); // v 4.0.1
const postcss = require("gulp-postcss"); // v 8.0.0"
const sass = require("gulp-sass"); // v 4.0.2
const uglify = require('gulp-uglify'); // v 3.0.2
const jshint = require('gulp-jshint'); // v 2.1.0
var gcPub = require('gulp-gcloud-publish'); // v 2.1.1
var log = require('fancy-log'); // v 1.3.3

Here are my file paths for my SCSS and JS files:

const files = {
  scssPath: './src/scss/**/*.scss',
  jsPath: 'src/js/**/*.js'
}

Here is my deploy task I have for compiling my SASS and uploading the compiled CSS file to my GCP bucket (I am passing the SCSS file path to the gulp src function / keyFilename and projectId are referencing BitBucket repository variables I have defined):

function scssTaskGCP() {
  return src(files.scssPath)
    .pipe(sass())
    .pipe(postcss([ autoprefixer(), cssnano()]))
    .pipe(gcPub(
      {
        bucket: 'bucket-name',
        keyFilename: process.env.GCP_KEY_FILE,
        projectId: process.env.GCP_PROJECT_ID,
        base: '/assets/css',
        public: true,
        resumable: true,
        transformDestination: function(path) {
          return path.toLowerCase();
        },
        metadata: {
          cacheControl: 'max-age=315360000, no-transform, public',
        }
      }
    ));
}

I have the above function behaving very similarly to the example on the package's README. One difference is that the example is passing a single file and uploading it to the GCP bucket, and I am passing a dynamic file name to cover multiple SASS files and compiling the SASS files into one script.

I don't think the package likes this, as I am receiving this error message when I try to run the scssTaskGCP() task is run via my CI/CD pipeline:

+ gulp deploy
[22:32:36] Using gulpfile /opt/atlassian/pipelines/agent/project-folder/hca-craft/gulpfile.js
[22:32:36] Starting 'deploy'...
[22:32:36] Starting 'scssTaskGCP'...
[22:32:37] 'scssTaskGCP' errored after 846 ms
**[22:32:37] TypeError: file.pipe is not a function**
    **at DestroyableTransform._transform (/opt/atlassian/pipelines/agent/build/project-folder/node_modules/gulp-gcloud-publish/libs/index.js:113:10)**
   ...
[22:32:37] 'deploy' errored after 848 ms

I'm not sure what I am doing wrong and what else I can try. Perhaps I need to figure out how to implement a Gulp alternative. Can anyone help me with this please?? :( Thanks!

from Recent Questions - Stack Overflow https://ift.tt/31Dus9D
https://ift.tt/eA8V8J