Introduction

When you create an Ionic app using the Ionic CLI command ionic start, your project will contain a gulp.js file.

gulp is a build tool (similar to the well-known Grunt tool) which allows you to customize your build process. For instance, you can use it to minify/uglify your CSS and Javascript.

However, from the official documentation it isn't obvious what role gulp plays in your Ionic app. So, I did a bit of research. It turns out that:

• with ionic serve, gulp is used if you customize your ionic.project file
• with ionic build or ionic run, by default gulp isn't used at all

So how can we fit 'gulp' into our Ionic development workflow in these two cases?

Customizing 'ionic serve' with gulp

There are two ways to add gulp to your ionic serve setup: using the ionic setup sass command, or by manually editing your ionic.project file.

Method 1: run 'ionic setup sass'

This is documented in the official Ionic documentation as the way to use SASS in your Ionic project. It does a bunch of things, one of which is modifying your ionic.project file.

Before running ionic setup sass, your ionic.project file would look like this:

{
  "name": "myapp",
  "app_id": ""
}

After running ionic setup sass, your ionic.project file looks like this:

{
  "name": "myapp",
  "app_id": "",
  "gulpStartupTasks": [
    "sass",
    "watch"
  ],
  "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*"
  ]
}

What ionic setup sass did here is to add in gulp definitions for tasks to be executed when you run ionic serve.

Method 2: manually edit your ionic.project file

The second way is to manually edit the ionic project file, adding the gulpStartupTasks and watchPatterns definitions yourself.

The effect will be exactly the same as ionic setup sass: your ionic serve process will run the specified gulp tasks.

The difference is that with method 2 you need to specify the gulp tasks yourself, with method 1 ionic setup sass does that for you.

There is a nice blog post here with more details.

Note:

After making these customizations, you may get an error message like "gulp isn't installed" when you run ionic serve. To fix this, you need to install gulp.

Because gulp is actually already defined in the package.json file of your Ionic project, installing gulp is just a matter of executing:

npm install

Which method to use: method 1 or method 2?

The answer is that in most cases you would use method 1: just run ionic setup sass.

The reason is that, for ionic serve, the things that you want to use gulp for is exactly what ionic setup sass configures for you: running SASS compilations.

Other stuff which gulp can do for you (minification, concatenation and so on) would normally get done only for production builds, so with the ionic build and ionic run commands.

Customizing 'ionic build' and 'ionic run' with gulp

The gulpStartupTasks and watchPatterns definitions in your ionic.project file are only used for ionic serve. Other tasks like ionic build and ionic run ignore these settings.

So, if you want to customize your production builds using gulp (for instance, performing minification and concatenation), how would you do that?

Apparently the only (but simple) way is to run your gulp build separately just before ionic build as explained here.

So, just write a simple bash script e.g. like this:

  #!/bin/bash
# Usage: build.sh 'platform'
gulp pre-build
ionic build $*

For test/development builds you can still execute ionic build android or ionic build ios. However for production builds you would run build.sh android or build.sh ios so that you perform the gulp steps needed for production (minify, concatenate and so on).

Note:

An alternative approach (which is often recommended) is to use "Cordova hooks". This is the approach used here.

However, this approach adds yet another tool to the process. It seems simpler to just use gulp for all of your build tasks (ionic serve, ionic build and ionic run).

Conclusion

Integrating gulp into your Ionic development workflow is done differently for ionic serve and for ionic buid/run.

But then again the purpose you use gulp for is also different: in most cases for ionic serve all you want to do is run SASS compilations, while for ionic build and ionic run you want to do a lot more, especially for production builds.

In my next post I'll explain my Ionic development workflow and how I'm using gulp in more detail.