Ionic CLI doesn't run gulp tasks on ionic serve

alvarormoya · September 29, 2017, 10:58am

Hi all,

I recently updated ionic cli to be able to run an ionic2 side project to learn. However, my main project is still in ionic1. Now, when I run ionic serve, gulp tasks are not executed.

System information:

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.0
Ionic Framework Version: 1.2.4-nightly-1917
Ionic CLI Version: 2.0.0-beta.24
Ionic App Lib Version: 2.0.0-beta.14
ios-deploy version: 1.8.4
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v0.12.4
Xcode version: Xcode 7.3 Build version 7D175

And when I run ionic serve:

ionic serve
WARN: ionic.project has been renamed to ionic.config.json, please rename it.
WARN: ionic.project has been renamed to ionic.config.json, please rename it.
Running live reload server: http://localhost:35729
Watching: www//*, !www/lib//*
√ Running dev server: http://localhost:8100

My ionic.project file:

“gulpStartupTasks”: [
“sass”,
“templatecache”,
“watch”
],
“watchPatterns”: [
“www//*",
"!www/lib//*”
],
“browsers”: [
{
“platform”: “android”,
“browser”: “crosswalk”,
“version”: “12.41.296.5”
}
]
}

I hope you can help me to fix it

kevinnascimento · April 19, 2016, 1:23pm

I have the same problem.

You have a solution?

youurayy · May 15, 2016, 10:24pm

As per the following, the 2.x.x will go directly into the gulpfile for tasks like watch and build.

github.com

ionic-team/ionic-cli/blob/5e283ce947679acf57f114ab0b4131d12e4edcb6/lib/cli.js

var Cli = module.exports;
var IonicAppLib = require('ionic-app-lib');
var IonicStats = require('./ionic/stats').IonicStats;
var IonicStore = require('./ionic/store').IonicStore;
var IonicConfig = new IonicStore('ionic.config');
var Info = IonicAppLib.info;
var IonicProject = IonicAppLib.project;
var Ionitron = require('./ionic/ionitron');
var optimist = require('optimist');
var path = require('path');
var fs = require('fs');
var settings = require('../package.json');
var Tasks = require('./tasks/cliTasks');
var Utils = IonicAppLib.utils;
var Logging = IonicAppLib.logging;
var log = Logging.logger;
var Q = require('q');
var semver = require('semver');
var gutil = require('gulp-util');
var prettyTime = require('pretty-hrtime');

This file has been truncated. show original

github.com

ionic-team/ionic-cli/blob/5e283ce947679acf57f114ab0b4131d12e4edcb6/lib/cli.js

var Cli = module.exports;
var IonicAppLib = require('ionic-app-lib');
var IonicStats = require('./ionic/stats').IonicStats;
var IonicStore = require('./ionic/store').IonicStore;
var IonicConfig = new IonicStore('ionic.config');
var Info = IonicAppLib.info;
var IonicProject = IonicAppLib.project;
var Ionitron = require('./ionic/ionitron');
var optimist = require('optimist');
var path = require('path');
var fs = require('fs');
var settings = require('../package.json');
var Tasks = require('./tasks/cliTasks');
var Utils = IonicAppLib.utils;
var Logging = IonicAppLib.logging;
var log = Logging.logger;
var Q = require('q');
var semver = require('semver');
var gutil = require('gulp-util');
var prettyTime = require('pretty-hrtime');

This file has been truncated. show original

(If you use Coffeescript gulpfile, there’s a further issue: https://github.com/driftyco/ionic-cli/issues/1004)

mbrookson · June 29, 2016, 12:22pm

I have come across the same problem!

ionic serve works and loads my app in the browser, but the SCSS files aren’t compiled unless I manually run gulp sass and live reload doesn’t work anymore for my Ionic 1 app

Did you find a solution?

eirikh · July 7, 2016, 8:00am

Same problem here … The gulp startup tasks aren’t automatically started anymore …

mbrookson · July 14, 2016, 2:49pm

Is there a solution to this yet?

Running gulp sass manually doesn’t seem to even work either

agustinhaller · August 30, 2016, 12:58pm

Hi, I think i found a solution for the issue.

Just add this to your gulpfile.js

gulp.task('serve:before', ['default']);

That line tells the new ionic cli 2@beta to run the old ionic cli 1.x ‘default’ task before serving (before running ionic serve)

Also you need to add a ionic.config.json file with this:

{
  "name": "base_project",
  "app_id": "",
  "v2": false,
  "typescript": false,
  "watch": {
    "sass": ["scss/**/*.scss"],
    "html": ["www/**/*.html"],
    "livereload": [
      "www/**/*.html",
      "www/**/*.js",
      "www/**/*.css"
    ]
  }
}

Hope that helps

juanf9224 · August 1, 2016, 1:53pm

I had the same issue, @agustinhaller solution solved it, now gulp task sass is running smoothly, Thanks!

MmtBkn · August 19, 2016, 5:57am

Oh. Thank you so much!

‘watch’ can be added to watch files also.

gulp.task('serve:before', ['default','watch']);

twicejr · August 19, 2016, 7:38am

In my case, the following resolves it: sudo ionic hooks add

papermud · August 19, 2016, 3:32pm

Check that you have the latest gulp-sass version in package.json; it’s a dependency of node-sass + required by Ionic, e.g.

"dependencies": {
    "gulp-sass": "^2.3.2"
  },

Uninstall gulp-sass

$ npm uninstall --save-dev gulp-sass

Reinstall gulp-sass

$ npm install --save-dev gulp-sass@2

There are a large number of issues pertaining to node-sass installation.
You may have to rebuild node-sass: $ npm rebuild node-sass

partialdata · August 19, 2016, 11:59pm

I am having the same issue.

ionic setup sass
ionic serve
dosnt work…

I have to run gulp sass watch then run ionic serve and it works…

xkris6x · August 24, 2016, 2:29am

help:

$ ionic serve

There is an error in your gulpfile:
Error: /home/project/web/nodeJS/proyecto/app1/node_modules/node-sass/vendor/linux-x64-48/binding.node: failed to map segment from shared object: Operation not permitted
at Error (native)
at Object.Module._extensions…node (module.js:583:18)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
at Object. (/home/project/web/nodeJS/proyecto/app1/node_modules/node-sass/lib/index.js:24:15)
at Module._compile (module.js:556:32)
at Object.Module._extensions…js (module.js:565:10)

aureliano · August 30, 2016, 12:13pm

It worked for me

alftuga · September 10, 2016, 4:05pm

worked! Thank you so much!

1BJK903 · October 10, 2016, 10:16am

It works… but not entirely. It does not work if you want to have livereload. Can we add that as well?

agustinhaller · October 10, 2016, 8:15pm

The solution discussed in this post should work with livereload also. (It’s working for me).

Can you please attach more information about the error you are getting?

giorgiofellipe · October 11, 2016, 5:23am

Couldn’t figure out why, but it wasn’t working for me until I removed the “scripts” tag from package.json

nwrman · October 20, 2016, 9:24pm

Yeah, same thing here, that’s weird

raae · October 27, 2016, 1:51pm

Same thing here. Had to remove “scripts” tag from package.json.