Ionic "serve" trouble

[esase]

When I start the serve command my gulp's hooks don't work. For example:

gulp.task('serve:before', function(cb) ...

But when I remove the scripts section from package.json the serve command works great again.

Steps to reproduce:

1. Make some gulp task like this: gulp.task('serve:before', function() {console.log('here');});
2. Add an empty script section inside package.json
3. Call the ionic serve - there is no any message from the hook
4. Remove the script section from package.json and call again the serve command. Now all works ok.

Which @ionic/app-scripts version are you using?
Cordova CLI: 6.3.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic CLI Version: 2.1.1
Ionic App Lib Version: 2.1.1
Ionic App Scripts Version: 0.0.36
ios-deploy version: 1.8.4
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v6.8.1
Xcode version: Xcode 8.0 Build version 8A218a

PS: This trouble is absent in ionic 2.0.0!

[jgw96]

Hello @esase would you be able to provide more info about this issue? Are you trying to use a custom gulp task with our tasks?

[esase]

Hello @jgw96, yes I have several npm helphers like:

  "scripts": {
    "setup": "npm install -g cordova ionic@2.0.0",
    "prepare": "node ./prepare.js && npm install && ionic state restore",
    "build": "node ./prepare.js && ionic build ios && ionic build android"
  }

and also I have custom gulp tasks like this:

    // Ionic hooks
    gulp.task('serve:before', function(cb) {
        // some logic (compile js, copy some configurations, etc)
    });

    gulp.task('run:before', function(cb) {
        // some logic (compile js, copy some configurations, etc)
    });

    gulp.task('serve:after', function() {
        // some logic (compile js, copy some configurations, etc)
    });

When I add the scripts entry, ionic serve's hooks don't work (But other hooks like before_build, etc, work good). Why ?

[esase]

Below listed my gulp and package json file:

var path = require('path');
var fs = require('fs');
var gulp = require('gulp');

var mainGulpPath = path.resolve(process.cwd() + '/../gulpfile.js');

if (fs.existsSync(mainGulpPath)) {

    var mainGulp = require(mainGulpPath);

    // Ionic hooks
    gulp.task('serve:before', function(cb) {
        mainGulp.start('build', cb);
    });

    gulp.task('run:before', function(cb) {
        mainGulp.start('device', cb);
    });

    gulp.task('serve:after', function() {
        return mainGulp.start('watch');
    });

}

{
  "name": "datecy-ionic",
  "version": "0.0.1",
  "description": "Datecy app for Wordpress",
  "dependencies": {},
  "devDependencies": {
    "fs-extra": "^0.30.0",
    "gulp": "^3.9.1"
  },
  "cordovaPlugins": [
    "cordova-hot-code-push-plugin",
    "cordova-plugin-camera",
    "cordova-plugin-compat",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-file",
    "cordova-plugin-file-transfer",
    "cordova-plugin-geolocation",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "cordova-plugin-webserver",
    "cordova-plugin-whitelist",
    "ionic-plugin-keyboard",
    "phonegap-plugin-push",
    "ringle-plugin-config"
  ],
  "cordovaPlatforms": [
    "android",
    "ios"
  ],
  "scripts": {
    "setup": "npm install -g cordova ionic@2.0.0",
    "prepare": "node ./prepare.js && npm install && ionic state restore",
    "build": "node ./prepare.js && ionic build ios && ionic build android"
  }
}

[esase]

What other information should I provide?

[esase]

Hello @jgw96 any news related with my problem?

[jgw96]

Hello @esase , unfortunately I am not able to reproduce this issue. Could you provide a small test repo that i could use to reproduce this issue? Thanks!

[esase]

@jgw96 you can easily reproduce this bug, please follow these steps:

add empty "scripts" entity inside your package.json, it should like this e.g.:

{
  "name": "datecy-ionic",
  "version": "0.0.1",
  "description": "Datecy app for Wordpress",
  "dependencies": {},
  "devDependencies": {
    "fs-extra": "^0.30.0",
    "gulp": "^3.9.1"
  },
  "cordovaPlugins": [
    "cordova-hot-code-push-plugin",
    "cordova-plugin-camera",
    "cordova-plugin-compat",
    "cordova-plugin-console",
    "cordova-plugin-device",
    "cordova-plugin-file",
    "cordova-plugin-file-transfer",
    "cordova-plugin-geolocation",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "cordova-plugin-webserver",
    "cordova-plugin-whitelist",
    "ionic-plugin-keyboard",
    "phonegap-plugin-push",
    "ringle-plugin-config"
  ],
  "cordovaPlatforms": [
    "android",
    "ios"
  ],
  "scripts": {
  }
}

Than add a test gulp task inside your gulpfile.js (Remove all old content before):

   gulp.task('serve:before', function(cb) {
         console.log("---- Serve before hook ----');
    });

And finally start your ionic with - ionic serve command. You shouldn't see our test log message (This a bug). But when you remove the "scripts" entity from your package.json and run the ionic serve again you should see the our console message