[Solved]Jade with ionic?

Hi there !

I’m sorry if my question is stupid but I just started to use ionic and I was asking myself if it’s possible to use Jade. I already done that before but it was with Express.
Thanks for your answers.

yes, it’s possible.
you can use it, but not directly in ionic, only for generate html static files / templates.

Add jade plugin for gulp

Modify paths in gulpfile.js

var paths = {
  sass: ['./scss/**/*.scss'],
  jade: ['./jade/**/*.jade']
};

Add task

gulp.task('jade', function (done) {
    return gulp.src(paths.jade)
      .pipe(jade())
      .pipe(gulp.dest('./www/templates/'))
      .on('end', done);
});

Modify watch task

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

Perfect, Thank a lot ! :slight_smile:

Very well, but in recent versions of gulp, if you use that code as is, you will get a: task completion callback called too many times

[13:04:42] Using gulpfile ~/desarrollo/Proyectos/ionic/myApp/gulpfile.js
[13:04:42] Starting 'jade'...
[13:04:42] Finished 'jade' after 27 ms
[13:04:42] 'jade' errored after 28 ms
[13:04:42] Error: task completion callback called too many times at finish

You need to remove the return from the task code, like this:

gulp.task( 'jade', function (done) {
  gulp.src( paths.jade )
    .pipe( jade() )
    .pipe( gulp.dest( './www/' ) )
    .on( 'end', done );
} );

I’d also add jade to the default task:

gulp.task( 'default', ['sass', 'jade'] );

Problem reference: https://github.com/SBoudrias/gulp-istanbul/issues/22