How to add support for Jade templates in Ionic

Here is how I added support for Jade templates to my workflow with Ionic.

##What is Jade?
Jade is a robust, elegant, feature rich template engine for nodejs. It lets you write your views in Jade instead of pure HTML.

Have a look at the example code in: http://jade-lang.com/

##What do I need?
Install the gulp-jade plugin. Go to your Ionic app directory then type:

npm install gulp-jade --save-dev

##What files do I need to edit?

  • gulp.js
  • ionic.project

Edit your gulp.js file and add this line to the top of the file:

var jade = require( 'gulp-jade' );

Edit the path variable to look like this:

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

Add jade to default task:

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

Then add the jade task itself:

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

After that, modify the watch task to look like this:

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

And finally if you want live reload to work with your jade templates, modify gulpStartupTasks in ionic.project to this:

"gulpStartupTasks": [
    "jade",
    "sass",
    "watch"
  ]

##Where do I put my .jade files?
Create a jade directory in your top level app folder (should be a sibling of the sass directory). Whatever structure you put inside there will be mirrored to www.

Create some jade templates in there then run:

ionic serve

Modify any of them and watch your browser instantly reload your views!
Enjoy.

6 Likes

How do you use angular expressions in it?

1 Like

With something like this:

div( ng-repeat='author in authors' )
  h3 {{ author.name }}
  span.email {{ author.email }}

With Jade you can do cool stuff like breaking your views into partial for better organization and reuse: http://jade-lang.com/reference/includes/

2 Likes

Nice, thanks for sharing this!

Ionic being based on angularjs, you can do exactly the same without jade.

What do you mean by that? You can do the same with HTML or Jade, the point is that Jade allows you to write your view code in a more compact way.

So you can say that, you can do with Jade everything you can do with HTML.

If you are talking about the includes, there is a fundamental difference, being that with Jade the includes are done in the preprocessing, with angular it’s done at runtime.

Jade has been renamed to pug

1 Like

The new name for ionic.project file is ionic.config.json