How to add support for Jade templates in Ionic

tutorials
1

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
2

How do you use angular expressions in it?

1 Like
3

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
4

Nice, thanks for sharing this!

5

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

6

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.

7

Jade has been renamed to pug

1 Like
8

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