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


#1

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

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


#3

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!