Confusion / Duplication between ionic.config.js and gulpfile.js


I’m starting to use Ionic 2 and I’ve been struck by a weirdness in the way the ionic CLI interacts with the gulpfile. I had assumed that Ionic uses gulp for building, so I have been changing things in there to improve my build process.

For example, my application has lots of .scss files in the different /page/ subdirectories. Making sure these are included in the build is obviously the job of the build tool (rather than someone having to manually remember to add boilerplate lines to app.core.scss). So I added a gulp task sass.collect which generates a file .tmp/app.generated.scss which is included from theme/app.core.scss. The standard sass task has a dependency on the new sass.collect task.

But then I ran ionic serve and the sass.collect task is not being run…

Then I looked into ionic.config.js and discovered that the sass src glob (‘app/theme/app.+(ios|md).scss’) is declared here as well. Huh? So what tool is responsible for compiling sass into css? Surely gulp and the ionic CLI aren’t both doing this?

So take a look at this post

The gulpfile is there for now, but doesn’t do anything. But up coming releases of the CLI will start to use the gulpfile instead. Then you’ll be able to use and customize everything :grin: