In the current Ionic Boilerplate folder, it has one big gulpfile.js to contain all Gulp tasks. And it will continue to grow when we adding new tasks for testing, building, deployment, etc.

In order to make the management easier, we are going to separate this single file into a file structure, so that:

  • Each single task has its own file, indicated by filename.
  • The file structure can have multiple levels of folders.
  • Just simply add another file to create a new task.
  • For each task, it maintains its own dependencies.

The New Code Structure

Here is the revised code structure of all Gulp tasks files.

├── gulpfile
│   ├── code
│   │   ├── browserify.js
│   │   ├── lint.js
│   │   └── saas.js
│   ├── env
│   ├── test
│   │   ├── protractor.js
│   │   └── unit.js
│   ├── util
│   |   ├── clean.js
│   |   └── handleErr.js
|   ├── config.js
|   ├── default.js
|   └── watch.js
├── ...
└── gulpfile.js

As shown above, the file gulpfile.js still remains in the project root as the main entry of Gulp, so that gulp can still make the call.

A new folder gulpfile is added to host all Gulp tasks. Also, several sub-folders are created for arranging the tasks into different Scenarios, such as:

  • code – for code related processing, like browserify, JS lint, etc.
  • env – for tasks that are related to different environments (development, production), doing app building, deployment, etc.
  • testtesting related.
  • util – useful helper tasks.

Outside, it has the two basic tasks – default and watch.


Here is the code in the current gulpfile.js.

var requireDir = require('require-dir')

// Require all tasks in `./gulpfile/`, including sub-folders.
requireDir('./gulpfile', { recurse: true })

The module require-dir is used to help load all other task js files inside the folder gulpfile. So that you do not need to manually add require() every time when you add a new task file.


In the config.js file, it contains the config that Gulp task may need to use, such as base path to source code, status, etc.

To use the config, simply require() it.

var config          = require('./config');

Testing Frameworks

Once the structure of Gulp tasks is ready, we can now start to add more tasks to help streamline our development process. Adding testing framework must be the most important one.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>