Ionic serve: how to rerun gulp task

Question

I'm kinda new to ionic and gulp. I was able to configure the ionic.project file in order to run the gulp tasks when I first run ionic serve. But now when I change files I want that the gulp task will run again.. But this doesn't happen.. Is there a way to do that?

This is my ionic.project file:

{
  "name": "test",
  "app_id": "",
  "gulpStartupTasks": [
    "default"
  ],
  "watchPatterns": [
    "src/**/*",
    "src/*",
    "www/**/*",
    "!www/lib/**/*"
  ]
}

I expected that when some file changes that match the wtachPatterns it will invoke the gulp watch task, but this doesnt happen (I see that ionic see that the file has changed but nothing happen.)

this the the gulp watch task:

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

Basically the task is minifying all the JS files and all the sass/scss files and the index.html is looking on the minified files. so if the gulp task isn't invoked there are no changes in the minified file and I need to run ionic serve all over again.. Is there a proper way to do that?

UPDATE:

This is the complete gulpfile

var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
require('require-dir')('./gulp/tasks');


var paths = {
  sass: ['./scss/**/*.scss'],
  style: ['./src/**/*.scss'],
  script: ['./src/app.js'],
  html:['./src/*.html']
};

gulp.task('default', ['sass', 'script','watch', 'html', 'style']);


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

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('http://git-    scm.com/downloads') + '.',
      '\n  Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
    );
    process.exit(1);
  }
  done();
});

And this is an example of one of the files who have the actual task:

var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var stringify = require('stringify');

var paths = ['./src/app.js'];

gulp.task('script', function() {
  return browserify(paths, {debug: true})
    .transform(stringify(['.html']))
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./www/js'));
});

Answer 1

Well So the problem was with paths I watched. I removed the ./ and now its working

Answer 2

First thing first, you misunderstand the watchPatterns is for livereload, which means, the web will refresh if there is any file changed on watch. It's definitely not having any relation to gulp.

Read more at: http://ionicframework.com/docs/cli/test.html

To watch for file changes with watch, update your watch task, which is

gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);  <-- any file in paths.sass changed will trigger `gulp sass`
  gulp.watch(paths.script, ['script']);  <-- any file in paths.script changed will trigger `gulp script`
});

So if you want to watch more files to be processed by Gulp, just add tasks and watch them in gulp watch.

Oh hey, you are watching only files in ./scss/**/*.scss and ./src/app.js. Add more if you wish.