Your gulpfile.js is not compatible with Gulp v4

[tjg37]

Description:
When running ionic cordova build ios, ionic cordova build android or ionic serve, I get the following error, however the builds complete successfully and the app is able to run locally:

Error: Your gulpfile.js is not compatible with Gulp v4:
- Upgrade to gulp v4 (see https://zzz.buzz/2016/11/19/gulp-4-0-upgrade-guide/)
- Or downgrade @ionic/v1-toolkit to <= 3.2.0.
    at loadGulp (/Users/tejogol/Documents/Slide/github/ionic-base/node_modules/@ionic/v1-toolkit/dist/lib/gulp.js:61:19)
    at tasks (/Users/tejogol/Documents/Slide/github/ionic-base/node_modules/@ionic/v1-toolkit/dist/lib/gulp.js:69:28)
    at Object.hasTask (/Users/tejogol/Documents/Slide/github/ionic-base/node_modules/@ionic/v1-toolkit/dist/lib/gulp.js:85:23)
    at BuildCommand.run (/Users/tejogol/Documents/Slide/github/ionic-base/node_modules/@ionic/v1-toolkit/dist/commands/build.js:13:26)
    at BaseExecutor.run (/Users/tejogol/Documents/Slide/github/ionic-base/node_modules/@ionic/cli-framework/lib/executor.js:89:23)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

The contents of my gulpfile.js have been updated for gulp 4 (See below). If I run gulp commands such as gulp, gulp sass or gulp watch, they run successfully without any error. Are there any issues with my gulp file?

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('sass', gulp.series(function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(cleanCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
}));

gulp.task('default', gulp.task('sass'));

gulp.task('watch', gulp.series('sass', function() {
  gulp.watch(paths.sass, gulp.task('sass'));
}));

I have updated gulp and am using gulp v4.0.2. I noticed that the error that I am receiving above was added to the @ionic-cli/v1-toolkit a few days ago in #4509.

I'm not sure if this PR is related to the issue but wanted to mention it incase it's helpful. The issue may also be related to #4114.

Steps to Reproduce:
I receive the error

Your gulpfile.js is not compatible with Gulp v4:
- Upgrade to gulp v4 (see https://zzz.buzz/2016/11/19/gulp-4-0-upgrade-guide/)
- Or downgrade @ionic/v1-toolkit to <= 3.2.0.

every time I run any of ionic cordova build ios, ionic cordova build android or ionic serve.

Output:
An example output from ionic cordova build ios --verbose is:

  ionic:lib Terminal info: { ci: false, shell: '/bin/bash', tty: true, windows: false } +0ms
  ionic:lib CLI global options: { _: [ 'cordova', 'build', 'ios' ], help: null, h: null, verbose: true, quiet: null, interactive: true, color: true, confirm: null, json: null, project: null, '--': [] } +4ms
  ionic:lib:project Project type from config: Ionic 1 (ionic1) +0ms
  ionic:lib:project Project details: { configPath: '/Users/tejogol/Documents/Slide/github/ionic-base/ionic.config.json', errors: [], context: 'app', type: 'ionic1' } +0ms
  ionic Context: { binPath: '/Users/tejogol/.nvm/versions/node/v10.18.1/lib/node_modules/@ionic/cli/bin/ionic', libPath: '/Users/tejogol/.nvm/versions/node/v10.18.1/lib/node_modules/@ionic/cli', execPath: '/Users/tejogol/Documents/Slide/github/ionic-base', version: '6.11.0' } +0ms
  ionic:lib:integrations:cordova:config Loading Cordova Config (config.xml: '/Users/tejogol/Documents/Slide/github/ionic-base/config.xml', package.json: '/Users/tejogol/Documents/Slide/github/ionic-base/package.json') +0ms
  ionic:lib:build build options: { '--': [],
  ionic:lib:build   engine: 'cordova',
  ionic:lib:build   platform: 'ios',
  ionic:lib:build   project: undefined,
  ionic:lib:build   verbose: false,
  ionic:lib:build   type: 'ionic1' } +0ms
  ionic:lib:telemetry Sending telemetry for command: 'ionic cordova build' [ 'ios', '--verbose', '--interactive', '--color' ] +0ms
  ionic:lib:hooks Looking for ionic:build:before npm script. +0ms
  ionic:lib:build Looking for ionic:build npm script. +6ms
> ionic-v1 build
  ionic:v1-toolkit:lib:gulp Using gulpfile: /Users/tejogol/Documents/Slide/github/ionic-base/gulpfile.js +0ms
  ionic:v1-toolkit:lib:gulp Using gulp: /Users/tejogol/Documents/Slide/github/ionic-base/node_modules/gulp/index.js +4ms
[22:20:55] Cannot load gulp tasks: Error: Your gulpfile.js is not compatible with Gulp v4:
- Upgrade to gulp v4 (see https://zzz.buzz/2016/11/19/gulp-4-0-upgrade-guide/)
- Or downgrade @ionic/v1-toolkit to <= 3.2.0.
Error: Your gulpfile.js is not compatible with Gulp v4:
- Upgrade to gulp v4 (see https://zzz.buzz/2016/11/19/gulp-4-0-upgrade-guide/)
- Or downgrade @ionic/v1-toolkit to <= 3.2.0.
    at loadGulp (/Users/tejogol/Documents/Slide/github/ionic-base/node_modules/@ionic/v1-toolkit/dist/lib/gulp.js:61:19)
    at tasks (/Users/tejogol/Documents/Slide/github/ionic-base/node_modules/@ionic/v1-toolkit/dist/lib/gulp.js:69:28)
    at Object.hasTask (/Users/tejogol/Documents/Slide/github/ionic-base/node_modules/@ionic/v1-toolkit/dist/lib/gulp.js:85:23)
    at BuildCommand.run (/Users/tejogol/Documents/Slide/github/ionic-base/node_modules/@ionic/v1-toolkit/dist/commands/build.js:13:26)
    at BaseExecutor.run (/Users/tejogol/Documents/Slide/github/ionic-base/node_modules/@ionic/cli-framework/lib/executor.js:89:23)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)[22:20:55] Invoking sass gulp task.
  ionic:lib:hooks Looking for ionic:build:after npm script. +5s
> cordova build ios --verbose
...

My ionic info:

Ionic:

   Ionic CLI         : 6.11.0 (/Users/tejogol/.nvm/versions/node/v10.18.1/lib/node_modules/@ionic/cli)
   Ionic Framework   : ionic1 1.3.4
   @ionic/v1-toolkit : 3.2.4

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 8.0.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 2.5.3, (and 10 other plugins)

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.0.0) : 0.3.0

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v10.18.1 (/Users/tejogol/.nvm/versions/node/v10.18.1/bin/node)
   npm        : 6.13.4
   OS         : macOS Catalina
   Xcode      : Xcode 11.3.1 Build version 11C504

[imhoffd]

@blavenie any ideas?

[JuanMiranda]

Hi @blavenie, I was trying to achieve what your last commit expects from the gulpfile to validate V4, but even when I provide plain functions, execution stops. Can you provide a gulpfile.js small example that works with the last update ?

[blavenie]

@tjg37 You should update your gulpfile.js, to use functions and exports them (not need call gulp.task() - see this quick start guide)

Minimal working example :

const gulp = require('gulp'),
  path = require("path"),
  sass = require('gulp-sass');

function sass() {
  return gulp.src('./scss/ionic.app.scss')
    .pipe(sass()).on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'));
}

function watch(done) {
  gulp.watch(paths.sass, () => sass());

  if (done) done();
}

function watch(done) {
  gulp.watch(paths.sass, () => sass());

  if (done) done();
}

exports.sass = sass;
exports.watch = watch;
exports['ionic:serve:before'] = gulp.series(sass, watch); // Alias need need by @ionic/cli

The migration guide to gulp v4 (in the error message) seems to be quite old. Maybe we should provided a more recent link ?

[blavenie]

I think if found a way to be compatible with bothe gulp.task() OR exports, in gulpfile.js .

EDIT: Done ! see this PR #4539

[rolinger]

@blavenie @tjg37 - hey guys, I just reinstalled my dev environment onto a new computer and decided to I also needed to do a mass upgrade on most things. That being said, I am still using Ionic v1 and I too have run into the above error. I am on the latest everything for Ionic v1, so I assume the above PR referenced would have fixed the issue but I am still getting the gulp-sass error.

My gulp.js file still works on my other system running gulp v3.9.1 but not on the new one running gulp v4.0.2. I think I need to tweak my gulp.js file any and all help is appreciated:

gulp.js:

var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('default', ['sass']);

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(cleanCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('watch', ['sass'], function() {
  gulp.watch(paths.sass, ['sass']);
});

Environment:

Ionic:

   Ionic CLI         : 6.17.0 (C:\Users\rolin\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework   : ionic1 1.3.4
   @ionic/v1-toolkit : 3.2.15

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 10.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 4 other plugins)

Utility:

   cordova-res : 0.15.3
   native-run  : 1.4.0

System:

   NodeJS : v14.17.5 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.14
   OS     : Windows 10

[rolinger]

@blavenie @imhoffd @tjg37

I think I resolved my issues, but see Ionic Syntax Error below.

I had to convert my gulpfile.js to the following:

var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass')) ;  <--- note require('sass'), 
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(cleanCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('watch', function () {
    gulp.watch(paths.sass, gulp.series('sass'));
});

gulp.task('default', gulp.series('sass','watch'));

Then add sass to my project: npm install --save-dev sass
Once I did all the above it seems I got past the gulp/sass issues...I still have other things to fix in my new environment.

BUT THEN FOUND AN IONIC LIBRARY SYNTAX ERROR:

Wanted to report that there are syntax issues in a specific Ionic library, in file: www/lib/ionic/scss/_platform.scss

On lines 80 & 81, both lines are missing closing ")"

      top: calc(#{$bar-height + $bar-subheader-height + $tabs-height} + constant(safe-area-inset-right));
      top: calc(#{$bar-height + $bar-subheader-height + $tabs-height} + env(safe-area-inset-right));

[tjg37]

@rolinger I've seen the same syntax issues in the ionic library.