Ionic CLI doesn't run gulp tasks on ionic serve

Ionic Framework ionic-v3
21

I tried this and it’s not working for me… but I see it works for most… so thinking I’m doing something wrong. I updated my gulp file.js with your edit… and I created the ionic.config.json file. Am I suppose to reference/load the ionic.config.json file from another file, or does Ionic just pick the file up by it being loaded at root of project?

22

Worked for me.
Thanks.

23

Yes! With “ionic serve” the gulp task now runnig but I have used gulp.task('serve:after', ['default']); because with serve:before the localhost server not ran

Just a question about my ionic info. Do you know miss Gulp Info here?
Cordova CLI: 6.4.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: 1.9.0
ios-sim version: 3.1.1
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.2.1 Build version 8C1002

24

For those who want to run npm scripts instead of ‘ionic serve’, you just need to run, concurrently, both ionic serve and gulp watch/tasks. What I did is:

Installed concurrently:

$ npm i concurrently --save-dev

Changed my npm scripts to:

"start": "npm run serve",
"serve": "concurrently --kill-others \"gulp watch\" \"ionic serve\""
And worked fine! =D
25

Thanks for the solution. Was a nightmare for me to solve. Could’ve lost hours.

26

EDIT

If you are using the latest Ionic CLI (v3.x +) you should not update the ionic.config.json file and you should use gulp.task('ionic:watch:before', ['default']). instead of gulp.task('serve:before', ['default']); in your gulpfile.js

3 Likes
27

Thanks, this works!

I was using ionic 1 but my cli is v3.9.1 and need a way to run my gulp task.

28

In an ionic 1 project I had recover I also had to modify the package.json moving “gulp” from “dependencies” to “devDependencies” section to activate gulp tasks…

2 Likes
29

Thank you, its works. Just move the dependency to:

“devDependencies”: {
“bower”: “^1.3.3”,
“grunt”: “^1.0.2”,
“grunt-contrib-compress”: “^1.4.3”,
“grunt-contrib-uglify”: “^3.3.0”,
“gulp”: “^3.5.6”,
“gulp-concat”: “^2.2.0”,
“gulp-minify-css”: “^0.3.0”,
“gulp-rename”: “^1.2.0”,
“gulp-angular-templatecache”: “^2.2.0”,
“gulp-ng-annotate”: “^2.1.0”,
“gulp-sass”: “^4.0.1”,
“gulp-useref”: “^3.1.5”,
“gulp-util”: “^2.2.14”,
“node-sass”: “^4.8.3”,
“sass-graph”: “^2.2.4”,
“shelljs”: “^0.3.0”
},

30

not working for me. my config :

Ionic CLI : 5.2.4
Ionic Framework : ionic1 1.3.1
@ionic/v1-toolkit : 1.0.10

Cordova:

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

Utility:

cordova-res : not installed
native-run : not installed

System:

Android SDK Tools : 26.1.1
NodeJS : v10.16.2
npm : 6.10.3
OS : Windows 10

i can call my gulp task manually and it worked as expected, but when ionic serve it’s not working

update : succesfully config gulp task run when ionic serve.
since ionic cli 4 the developer changed ionic:watch:before to ionic:serve:before
reference : https://github.com/ionic-team/ionic-cli/issues/3459

it seems that gulp 4 have issue with @ionic/v1-toolkit (v1.0.22 / v2.x) or newer ionic cli (v4/v5)
reference : https://github.com/ionic-team/ionic-cli/issues/4114

so i have to downgrade my gulp 4.0 to gulp 3.9.1 then run npm dedupe

here is my related gulpfile.js

var paths = {
  sass: ['./scss/**/*.scss'],
  templatecache: ['./www/app/**/*.html']
};

gulp.task('templatecache', function (done) {
  gulp.src('./www/app/**/*.html')
    .pipe(templateCache({
      standalone: true
    }))
    .pipe(gulp.dest('./www/app/js'))
    .on('end', done);
});

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

gulp.task('default', ['templatecache'],
  function (done) {
    done();
  });

gulp.task('ionic:serve:before', ['default', 'watch'],
function (done) {
  done();
});

please make sure the code style suits the gulp version. gulp v3 have different style with gulp v4. And voila now my gulp will triggered when ionic serve and when i change code (live reload).