[ionic-4.3.1] Cannot run sass task: missing in gulpfile.js

[shuwan9]

ionic start myapp --type=ionic1 ionic serve

when i changed scss/ionic.app.scss,the www/css/*.css didn't update.

[shuwan9]

[imhoffd]

I'm not able to reproduce this issue. Are you sure you have a sass task in gulpfile.js?

[shuwan9]

@dwieeb thanks for your reply,this file named gulpfile.js is Automatic generated and and there is a sass task in it.

[abudel]

I had the same problem @vue5456 It works by adding this line on package.json file:

....
"scripts": {
   "serve:dev": "ionic-v1 serve --host=0.0.0.0 --port=8100 --livereload-port=35729 --dev-port=53703 --engine=browser & gulp watch"
 },
....

[mluis]

I'm having the same issue.

$ ionic cordova build ios
[WARN] Detected locally installed Ionic CLI, but it's too old--using global CLI.
> ionic-v1 build
[11:10:13] Cannot load gulp: ReferenceError: internalBinding is not defined
[11:10:13] Cannot load gulp: ReferenceError: internalBinding is not defined
[11:10:13] Cannot run sass task: missing in gulpfile.js
[11:10:13] Cannot load gulp: ReferenceError: internalBinding is not defined

[mluis]

Not quite sure, but I think I had to rebuild node-sass to work.

[imhoffd]

Maybe the error message itself is wrong.

[estrickler]

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 And 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 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('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!

[gerwinkoudijs]

I had the same issue. Debugging the ionic build CLI scripts shows that the gulpfile.js is imported using require() but somehow not loaded. It turned out that I had 2 gulp versions in my node_modules folder (version 3.5.6 in root and 3.9.1 in @ionic/v1-toolkit submodule). I think the tasks were loaded into the old gulp version and not in the newer one used by the toolkit.

I fixed the problem by removing and cleaning up the old gulp version and re-installing the @ionic/v1-toolkit using npm.

[johnhalbert]

@gerwinkoudijs had this exact same issue myself. Had to remove package-lock.json to be able to fix it.

[ACECEO]

I am having the same problem and tried everything listed above, but no luck.

I DID successfully refactor gulpfile.js so that it is version 4.0 promise compliant and that eliminated the first set of errors.

Here is my gulpfile.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('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('watch', gulp.series(['sass'], function() {
  gulp.watch(paths.sass, ['sass']);
}));

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

However, even after that, I still get the notorious "Cannot run sass task: missing in gulpfile.js" error

When I do ionic cordova build iOS --verbose, I get the following:

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/admin/Desktop/ECTCB_IONIC_1_5_2/ionic.config.json', errors: [], context: 'app', type: 'ionic1' } +0ms
  ionic Context: { binPath: '/usr/local/lib/node_modules/ionic/bin/ionic', libPath: '/usr/local/lib/node_modules/ionic', execPath: '/Users/admin/Desktop/ECTCB_IONIC_1_5_2', version: '5.2.3' } +0ms
  ionic:lib:integrations:cordova:config Loading Cordova Config (config.xml: '/Users/admin/Desktop/ECTCB_IONIC_1_5_2/config.xml', package.json: '/Users/admin/Desktop/ECTCB_IONIC_1_5_2/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. +4ms
> ionic-v1 build
  ionic:v1-toolkit:lib:gulp Using gulpfile: /Users/admin/Desktop/ECTCB_IONIC_1_5_2/gulpfile.js +0ms
  ionic:v1-toolkit:lib:gulp Using gulp: /Users/admin/Desktop/ECTCB_IONIC_1_5_2/node_modules/@ionic/v1-toolkit/node_modules/gulp/index.js +2ms
  ionic:v1-toolkit:lib:gulp Loaded gulp tasks: {} +613ms
[22:16:51] Cannot run sass task: missing in gulpfile.js
  ionic:lib:hooks Looking for ionic:build:after npm script. +900ms

There has got to be a way to figure this out. Any help would be greatly appreciated.

[tavikukko]

Hi, this is what I did to make "ionic cordova prepare ios" command to work.

• upgraded my ionic projects devDependencies gulp to latest 4.0.2
• converted gulpfile.js to support gulp 4

  
  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', 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.series(["sass"], function (done) { done(); }));

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

- run gulp and then prepare command without build

gulp && ionic cordova prepare ios --no-build

- to build the app

gulp && ionic cordova build ios --no-build

- to run the app

gulp && ionic cordova build ios --no-build

[rolinger]

Anyone...I am desperate for some help.

I just finally upgraded Ionic cli v1.7.14 to v5.2.6. My app is still Ionic-v1. I never used ionic serve before and was also using a much older webview-plus for my UIWebView. It worked. I would compile my app with the cli, then in Xcode deploy it to my test phones. I would use safari developer webtools to inspect my app on the various test iPhones.

But now moving to Cordova-plugin-ionic-webview, along with the CLI upgrade, safari no longer works. Using the same method, compile at cli, deploy from Xcode, my app deploys to the phones but Safari dev web inspector no longer shows anything. Also have some wonky stuff going on in my app (urls to app pages not working and https to my api server not working). Instead of Safari listing MyApp -> MyApp....it now lists MyApp -> -localhost. Previously I would click the second MyApp and the app would open up in safaris web inspector, now when I hover over -localhost the app/screen on my test phone shades blue, and when I click on -localhost the web inspector window opens but its blank - no elements, no console messages,...nada.

Will Safari work anymore? How can I get that working? Assuming its a whole new web view environment I then moved on to ionic serve

So I am trying the ionic serve and get the following errors and it opens a blank web page

[v1] [20:03:46] Cannot load gulp: AssertionError [ERR_ASSERTION]: Task function must be specified
[v1] [20:03:46] Serving directory www

@estrickler - I followed your guide and my ionic serve error changed from above to below:

[v1] [20:15:58] Cannot load gulp: AssertionError [ERR_ASSERTION]: Task never defined: sass
[v1] [20:15:58] Serving directory www

My gulpfile.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', gulp.series('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', function() {
  gulp.watch(paths.sass).on('change', gulp.series('sass'));
});

I am trying other stuff from this thread too but nothing is working.

Ionic:

   Ionic CLI         : 5.2.6 (/usr/local/lib/node_modules/ionic)
   Ionic Framework   : ionic1 1.0.0
   @ionic/v1-toolkit : 1.0.22

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 32 other plugins)

Utility:

   cordova-res : 0.6.0 
   native-run  : 0.2.8 

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.2
   NodeJS     : v10.16.3 (/usr/local/bin/node)
   npm        : 6.11.2
   OS         : macOS High Sierra
   Xcode      : Xcode 10.1 Build version 10B61

[jonathanduarte]

Any news about it? I'm having the same error.

[rolinger]

@jonathanduarte - I can't fully recall what I did to get mine working again. I ultimately removed ionic-webview from my projects but I don't think I needed to after I got other things working. Part of my issues were when I upgraded to the CLI I also upgraded specific gulpfile requirements ( I think this is what generated the sass errors)...and then I was trying to use ionic serve with my app on a real device but that causes a lot of issues regarding https when trying to view/troubleshoot a device app with the web inspector (something to do with a a security profile that you need to somehow enable a browser proxy to get your apps https connections to work).

I uninstalled everything. Reloaded CLI 5.2.0, rebuilt project, kept native gulp files (and didn't add anything new), did not use cordova-plugin-ionic-webview and stopped using ionic serve livereload for apps deployed to devices. Not certain this helps, but its what I can recall - it was a few months ago.

[TheExplorativeBadger]

@ACECEO I'm at the exact same point your old comment is, did you ever figure out how to resolve the "Cannot run sass task: missing in gulpfile.js" error?

[ACECEO]

@TheExplorativeBadger

Yes - I completely reformatted my machine restoring it to factory settings and then re-installed current versions of everything and boom, problem solved. I did not have time to troubleshoot an issue that could take years and opted to endure the extreme albeit short pain of a 2 week reformat and reinstall fest and that solved my problem. Absolutely ridiculous but that fixed it.

[TheExplorativeBadger]

@ACECEO

Yikes. Not the answer I was hoping for, but thanks for the update.

[rolinger]

@TheExplorativeBadger @ACECEO - I resolved this issue by NOT trying to update the installed packages. AFter I added it the first time i got several warnings that I thought upgrading specific packages would resolve - only to cause the sass error. I wiped the install and started over, what it imported is what was used and I did not add other packages either. Its been a while since I resolved this but I am pretty certain I recall this one correctly.

[TheExplorativeBadger]

Came back to mention that starting fresh and not updating anything after installation as mentioned by @rolinger fixed things for me.

Versions: npm - v6.13.6 Node - v10.16.3 Ionic CLI - v5.4.14 Ionic Project Version - ionic1 Cordova - v9.0.0 Gulp CLI - v2.2.0 Gulp Local - v3.9.1

Also worth mentioning that when using v3.9.1 of gulp, the suggested changes involving gulp.series() were not needed.

gulpfile.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('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('default', ['sass']);

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

Adding plugins, and necessary installations for ios / android / browser platforms worked just fine. Issues seem to have stemmed from upgrading / downgrading versions within the project.