Ionic + Gulp Workflow

1

Hi.

What benefits can I get from adding gulp to my ionic app development workflow? Can you guys share how you work with them together?

Thank you.

2

Hey @vasconcelloslf

LevelUpTuts+ do a great short series on learning gulp. https://www.youtube.com/watch?v=wNlEK8qrb0M.

What gulp allows you to do is automate the workflow when working with Ionic.

Repetitive tasks like compiling Sass, minifying css & js, compressing images etc can be time consuming to do manually, so all gulp really does is just automate these tasks for you, usually when certain files that you’ve nominated changed.

3

At present I use it just for compiling my sass and fonts etc. but looking to expand this a bit more.

Would love to hear if anyone has come up with any other useful Gulp recipes for Ionic development. I was thinking perhaps using it to speed up git check ins or building production images etc.

4

Are you using gulp-autoprefixer. That’s a must, not sure why the starter app’s don’t include that gulp module out of the box.

5

Thanks for the heads up - I just checked out gulp-autoprefixer and it looks like a cool package - might install that one tonight.

This is the sort of thing I am talking about - there must be a myriad of gulp packages out there that will be useful for Angular/Ionic projects.

In the same vein, I have been looking for Sublime Text extensions to help as well - found some good packages for prettying up code display and formatting etc. Must be some good Angular based ones out there that I have missed.

6

I highly suggest you take a look at the Yeoman Ionic Generator which is absolutely awesome

7

For me the biggest benefits of using gulp are speed and modularity, which allows very fine grain control over my workflow.
When using the yeoman generator, I felt it was too bloated with stuff I didn’t need and too slow sometimes for recompilation and live reload. I also think that gulp’s syntax is far easier to read and understand than Grunt’s which is especially helpful when working in teams.
I recently wrote a blog post about my workflow with gulp + ionic: http://www.thomasmaximini.com/2015/02/10/speeding-up-ionic-app-development-with-gulp.html
I hope it helps!
Update: I published a Yeoman generator for Ionic with Gulp: https://github.com/tmaximini/generator-ionic-gulp

2 Likes
8

Hey @tmaximini, this was exactly the kind of stuff I was looking for. Thanks.