"ionic-v1 build" failing: "Cannot run sass task: missing in gulpfile.js"

I cannot build my project because of this. This error is gibberish to me, as there is clearly a sass task in my gulpfile.js:

var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');

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

gulp.task('serve:before', ['watch']);
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(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

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

gulp.task('install', ['git-check'], function() {
  return bower.commands.install()
    .on('log', function(data) {
      gutil.log('bower', gutil.colors.cyan(data.id), data.message);
    });
});

gulp.task('git-check', function(done) {
  if (!sh.which('git')) {
    console.log(
      '  ' + gutil.colors.red('Git is not installed.'),
      '\n  Git, the version control system, is required to download Ionic.',
      '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
    );
    process.exit(1);
  }
  done();
});

Here is my package.json:

{
  "name": "ionic-project",
  "version": "1.1.1",
  "description": "An Ionic project",
  "dependencies": {
    "com.synconset.imagepicker": "^2.1.10",
    "cordova-android": "7.1.4",
    "cordova-plugin-crosswalk-webview": "^2.4.0",
    "cordova-plugin-firebase": "^2.0.5",
    "google-app-indexing-cordova": "^1.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-minify-css": "^0.3.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^3.1.0",
    "ionic-native": "^2.9.0",
    "ionic-plugin-deeplinks": "^1.0.17",
    "ng": "0.0.0",
    "node-sass": "^4.11.0",
    "npm": "^6.7.0",
    "phonegap-plugin-push": "^1.11.1",
    "vinyl-fs": "^3.0.3"
  },
  "devDependencies": {
    "@angular/cli": "7.2.3",
    "@ionic/v1-toolkit": "^1.0.18",
    "bower": "^1.8.8",
    "gulp": "^3.9.1",
    "gulp-util": "^2.2.14",
    "shelljs": "^0.3.0"
  },
  "cordovaPlugins": [
    "com.synconset.imagepicker",
    "cordova-plugin-camera",
    "cordova-plugin-console",
    "cordova-plugin-crosswalk-webview",
    "cordova-plugin-device",
    "cordova-plugin-file",
    "cordova-plugin-google-analytics",
    "cordova-plugin-inappbrowser",
    "cordova-plugin-network-information",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "cordova-plugin-whitelist",
    "cordova-sqlite-storage",
    "ionic-plugin-keyboard",
    "cordova-plugin-screen-orientation",
    "cordova-plugin-vibration",
    "cordova-plugin-geolocation",
    {
      "variables": {
        "SENDER_ID": "dr-b-app"
      },
      "locator": "phonegap-plugin-push"
    }
  ],
  "cordovaPlatforms": [
    "ios"
  ],
  "cordova": {
    "plugins": {
      "ionic-plugin-deeplinks": {
        "URL_SCHEME": "drbdiet",
        "DEEPLINK_SCHEME": "https",
        "DEEPLINK_HOST": "www.drbdiet.com",
        "DEEPLINK_2_SCHEME": "https",
        "DEEPLINK_2_HOST": "portal.drbdiet.com"
      },
      "cordova-plugin-crosswalk-webview": {
        "XWALK_VERSION": "23+",
        "XWALK_LITEVERSION": "xwalk_core_library_canary:17+",
        "XWALK_COMMANDLINE": "--disable-pull-to-refresh-effect",
        "XWALK_MODE": "embedded",
        "XWALK_MULTIPLEAPK": "true"
      },
      "com.synconset.imagepicker": {},
      "phonegap-plugin-push": {
        "SENDER_ID": "dr-b-app",
        "FCM_VERSION": "11.6.2"
      },
      "cordova-plugin-firebase": {},
      "google-app-indexing-cordova": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Ionic info output:

[ERROR] Error loading @ionic/angular package.json: Error: Cannot find module
        '@ionic/angular/package'
[ERROR] Error loading @ionic/angular-toolkit package.json: Error: Cannot find
        module '@ionic/angular-toolkit/package'
[ERROR] Error loading @angular-devkit/build-angular package.json: Error: Cannot

        find module '@angular-devkit/build-angular/package'

Ionic:

   ionic (Ionic CLI)             : 4.9.0 (C:\Users\stefk\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : not installed
   @angular-devkit/build-angular : not installed
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : not installed

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : no whitelisted plugins (22 plugins total)

System:

 (C:\Users\stefk\AppData\Local\Android\android-sdk)
   NodeJS            : v11.8.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.7.0
   OS                : Windows 7

I have the latest ionic-v1 toolkit installed, as I installed it this morning.

I am able to run gulp sass successfully on its own:

[14:10:49] Using gulpfile c:\Projects\myapp\gulpfile.js
[14:10:49] Starting 'sass'...
[14:10:50] Finished 'sass' after 653 ms

I’ve tried to do just about everything that Google results suggest. The following suggested solutions did not fix the problem:

  • npm rebuild node-sass (executes without error, just doesn’t fix the problem)
  • npm install node-sass (suggested here)
  • npm install --save-dev gulp (suggested here)
  • Adding the following to package.json (suggested here)
"scripts": {
   "serve:dev": "ionic-v1 serve --host=0.0.0.0 --port=8100 --livereload-port=35729 --dev-port=53703 --engine=browser & gulp watch"
 },
  • Changing my gulp sass version in package.json to ^3.1.0 and then running npm install (suggested here)
  • Changing gulp.task('serve:before', ['watch']); to gulp.task("ionic:watch:before", ["sass","watch"]); (suggested here)
  • Running ionic-v1 build in a CMD window while gulp watch is running in another CMD window (suggested here), with or without changing gulp.task('default', ['sass']); to gulp.task('default', ['sass', 'watch']); (suggested here)
  • Reinstalling vinyl-fs (suggested here)
2 Likes

Did you figure it out ? I just started having the same error after updating some node stuff.

I ran into this same issue. Turns out there were several issues with the gulp file. For me, these started when I last upgraded gulp: npm install -g gulp

For reference, I have these installed versions
CLI version 2.1.0 Local version 4.0.0

The first issue (which is your current error) was caused because the default task was declared before the sass task. It seems gulp now requires the task to be declared before they are referenced. This meant I also had to move the “git-check” task before the “install” task.

However, if you also have gulp 4.0.0 installed, more changes will be needed. We need to update any array of tasks to use gulp.series() instead. aka

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

becomes

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

The other thing I changed (which I’m not sure was necessary) is the “watch” task to use “on”:

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

Thanks to this post for help with the upgrade to gulp 4.0.0: https://www.liquidlight.co.uk/blog/how-do-i-update-to-gulp-4/

Here’s my final gulpfile.js

var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');

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(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

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

gulp.task('ionic:watch:before', gulp.series('default'));

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

gulp.task('git-check', function(done) {
  if (!sh.which('git')) {
    console.log(
      '  ' + gutil.colors.red('Git is not installed.'),
      '\n  Git, the version control system, is required to download Ionic.',
      '\n  Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
    );
    process.exit(1);
  }
  done();
});

gulp.task('install', gulp.series('git-check', function() {
  return bower.commands.install()
    .on('log', function(data) {
      gutil.log('bower', gutil.colors.cyan(data.id), data.message);
    });
}));

I hope this helps!

Thank you for the detailed answer! Unfortunately this isn’t working for me, I’m only given an error saying that gulp.series is not a function.

I saw your same response on the ionic-cli issues page, I responded there, could you take a look and maybe lend a hand…been at this for hours and am pulling my hair out: https://github.com/ionic-team/ionic-cli/issues/3742

I rearranged my gulpfile.js to look like yours (minus the git-check stuff) and the error has now gone away and a blank safari webpage opens (localhost:8100) - but now I am confused. am I supposed to be viewing my app in the blank webpage, is that webpage acting as the ‘server’…why can’t I see my app, deployed from Xcode, in Safari. Any explanations are much appreciated.

I was never able to solve this, I’m biting the bullet and rewriting my app in Ionic 4.

I got everything working on both Android and iOS using the Ionic CLI v5.2.6 - I aligned my global and local gulp versions using the one that installs with Ionic CLI. I didn’t upgrade any of the gulp dependencies and am living with the 5 WARNINGS about deprecated features in each of those gulp dependencies.

The only problem I have now is I can’t use cordova-plugin-ionic-webview while developing due to the plugins use of CORS. With CORS I can 't figure out how to test my app on development test phones because all of the $http or src='/thispath/img.png' calls/links are being denied/forbidden and I haven’t figured out how get around the CORS issue yet. Until then, I backed out of the ionic-webview plugin and am using the older UIWebView which allows my app to work on test devices. I think the CORs issue is really about Safari/Chrome allowing script/call/link redirects coming from the app through the browser…not certain though. Have to get some critical components built in the app - after the next release is done I will focus on the CORs issue.

I really don’t want to bite the bullet on upgrading to Ionic 4…but I know its coming.

Try this in your index.html for the CORS issue:

<meta http-equiv="Content-Security-Policy" content="
			default-src 'self' * cdvfile://* ws://localhost:35729 filesystem: data: gap: https://ssl.gstatic.com;
			connect-src * 'unsafe-eval' 'unsafe-inline';
			style-src 'self' 'unsafe-inline'
				127.0.0.1
				your.internal.ip.address
				http://*.google.com
				http://*.gstatic.com
				http://*.googleapis.com
				http://*.firebaseio.com
				https://*.google.com
				https://*.gstatic.com
				https://*.googleapis.com
				https://*.firebaseio.com;
			media-src *;
			script-src 'self' localhost:35729 'unsafe-eval' 'unsafe-inline' 
				127.0.0.1:*
				your.internal.ip.address:*
				http://*.google.com
				http://*.gstatic.com
				http://*.googleapis.com
				http://*.firebaseio.com
				https://*.google.com
				https://*.gstatic.com
				https://*.googleapis.com
				https://*.firebaseio.com;

“35729” may be a different number on your system.