Gulp Task not running with Ionic serve

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

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

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

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

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();
});

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

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

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?

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

Same problem here. Looks like gulpStartupTasks is not working anymore…

+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

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

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

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

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

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

Thanks, tdcorrigan, this worked for me as well.