Gulp Task not running with Ionic serve

Ionic Framework ionic-v3
1

Hi

my GULP Task for Sass is not working anymore after i update to ionic 2 and renamed the ionic.project.

Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
OS: Windows 8.1
Node Version: v4.4.5


Proxy added: /v1 => https://app.bigrussel.de/api
Running live reload server: http://172.16.1.120:35729
Watching: www/**/*, !www/lib/**/*
V Running dev server:  http://172.16.1.120:8100
Ionic server commands, enter:
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit

ionic $

where is the Problem?

Thanks Daniel

2

we can’t help you with what you provide this is just the normal output when you run ionic serve.

3

Try Update your ionic framework version. This should be 2.0.0-beta.8

Check the version in your package.json and execute npm install

4

Are you coming from an ionic 1 project?
You need to make sure your gulpfile is setup correctly.

5

Hi @mhartington yes right i coming from ionic 1. The Problem is since the Update.

Here is 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 templateCache = require(‘gulp-angular-templatecache’);
var ngAnnotate = require(‘gulp-ng-annotate’);
var useref = require(‘gulp-useref’);

var paths = {
sass: [‘./scss//*.scss’],
templatecache: ['./www/templates//.html’],
ng_annotate: ['./www/js/**/.js’],
useref: [‘./www/*.html’]
};

gulp.task(‘default’, [‘sass’, ‘templatecache’, ‘ng_annotate’],function () {
return gulp.src(‘app/*.html’)
.pipe(useref())
.pipe(gulp.dest(‘dist’));
});

gulp.task(‘sass’, function(done) {
gulp.src(‘./scss/ionic.app.scss’)
.pipe(sass())
.pipe(gulp.dest(‘./www/css/’))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: ‘.min.css’ }))
.pipe(gulp.dest(‘./www/css/’))
.on(‘end’, done);
});

gulp.task(‘templatecache’, function (done) {
gulp.src(paths.templatecache)
.pipe(templateCache({standalone:true}))
.pipe(gulp.dest(‘./www/js’))
.on(‘end’, done);
});

gulp.task(‘ng_annotate’, function (done) {
gulp.src(paths.ng_annotate)
.pipe(ngAnnotate({single_quotes: true}))
.pipe(gulp.dest(‘./www/dist/dist_js/app’))
.on(‘end’, done);
});

gulp.task(‘useref’, function (done) {
var assets = useref.assets();
gulp.src(paths.useref)
.pipe(assets)
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest(‘./www/dist’))
.on(‘end’, done);
});

gulp.task(‘watch’, function() {
gulp.watch(paths.sass, [‘sass’]);
gulp.watch(paths.templatecache, [‘templatecache’]);
gulp.watch(paths.ng_annotate, [‘ng_annotate’]);
gulp.watch(paths.useref, [‘useref’]);
});

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(‘Git - Downloads’) + ‘.’,
‘\n Once git is installed, run '’ + gutil.colors.cyan(‘gulp install’) + ‘' again.’
);
process.exit(1);
}
done();
});

6

I’m having the same problem. I’m working on both v1 and v2 projects so I have ionic-cli beta installed.

In v1 projects gulp tasks using gulpStartupTasks are not being executed on ionic serve . I have downgraded my ionic-cli to v1 and it works fine.

So at the moment I have to reinstall ionic-cli each time I switch projects.

1 Like
7

hello! i had a simular problem with my node-sass


first i was not able to install the package again, afterwards i removed the gulp-sass from my package.json file and tried again

$ npm install gulp-sass

now it works fine! i think the problem is that in your file is a version of a gulp task that’s not fit with your new ionic environment

8

Yes i am also coming from ionic 1 before i installed ionic 2 my all gulp start running on ionic serve

Code Form ionic.project file

{
“name”: “projectname”,
“app_id”: “com.project”,
“gulpStartupTasks”: [
“sass”,
“templatecache”,
“ng_annotate”,
“useref”,
“copy”,
“watch”
]
}

after installing ionic v2 it is giving me warning regarding renaming ionic.project file to ionic.config.json, i do that as well still gulp task not running on ionic serve.

what is issue i am not able to get, any idea?

9

Are there any updates to this issue? I also recently updated to CLI 2.0.0 and renamed my project file to ionic.config.json. Now the sass task doesn’t appear to work. I created a sample project with the 2.0.0 CLI and compared both gulpfile.js and ionic.config.json and they appear to be the same. Renaming ionic.config.json back to ionic.project does not help.

Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 1.3.1
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v4.2.4
Xcode version: Xcode 7.3.1 Build version 7D1014

10

Same problem here. Looks like gulpStartupTasks is not working anymore


11

+1 confirming: ionic serve doesn’t run gulp tasks anymore after upgrading cli from v1 to v2.0.0 -and- renaming ionic.project to ionic.config.json

1 Like
12

After some digging I managed to get this running (at least for my setup, which I think is pretty common). I guess the ionic-cli github README documentation is not yet updated for v2.

I found that the new approach for v2 ionic-cli is to use a naming convention in gulp tasks and “hooks”:

https://github.com/driftyco/ionic-preview-app/blob/master/gulpfile.js#L13

https://github.com/driftyco/ionic-preview-app/blob/master/gulpfile.js#L13

The way I fixed my setup to run gulp tasks on ionic serve:

  1. remove the whole (probably deprecated in v2) gulpStartupTasks property from ionic.config.json
  2. in the project-root gulpfile.js create a task named serve:before and add your task(s) as dependency

=> that’s it :slight_smile:

10 Likes
13

Thanks, today I noticed the same problem after switching to the Ionic 2 CLI, this solution works!

Previously I used another workaround but it was only a half solution, and I ran into a few other issues with the Ionic 2 CLI as well:

Which Ionic CLI to use? 1.7.16 or 2.0.0.xxx beta?

All in all the upgrade from Ionic CLI 1 to 2 (for running/building Ionic 1 projects) was a bit less smooth and easy than I expected.

2 Likes
14

leob’s solution also worked for me in combination with switching from Ruby 1.9 to 2.0.

I added the following to my gulpfile:
gulp.task(‘serve:before’, [‘watch’], function() {});

3 Likes
15

Thanks a ton dude.
You saved the day :smile:

16

It’s saved my job. Thank you for your help.

17

Thanks, tdcorrigan, this worked for me as well.