Build process introduction

Table of contents

Introduction to Gulp

Gulp is a build tool based on Node.js. It provides a Javascript interface to maintain complex build tasks intuitive and manageable.

You can find different gulpfile.js files inside a Wakanda project.

mobile folder

web folder

These are the entry points of the build process of your application.

Wakanda Studio is able to run the build tasks defined in the gulpfile.js files.

How to install Gulp »

Customize the build process

Gulp logic can be summarized by the concept of tasks. A gulpfile.js can include multiple tasks. When Gulp is launched, it collects all the tasks defined by the user and runs the specified ones.

Gulp is optional. When installed, the Studio is able to run several additional functionalities like the live-reload defined on web/gulpfile.js.

On Run Page the serve task is triggered:

gulp.task('serve', ['watch', 'connect']);

The first parameter is the task name, ‘serve’, and the second parameter can be a function or an actions list. By default we run different tasks:

  • connect: launch a server ready to live-reload when a file change message is received.
      gulp.task('connect', function() {
        connect.server({
          root: ['.'],
          port: options.connectPort,
          livereload: {
            port: options.livereloadPort
          },
          middleware: function(conn, opt) {
            return [
              proxy('!/app/**', {
                target: options.serverUrl,
                changeOrigin: false,
                ws: true
              })
            ];
          }
        });
      });
  • watch and reload: watch file changements in the specified folders and inform the live-reload server.
      var baseFolder = options.app;
      gulp.task('watch', function() {
        gulp.watch([
          baseFolder + 'scripts/**/*.js',
          baseFolder + 'styles/**/*.css',
          baseFolder + 'views/**/*.html',
          baseFolder + 'index.html'
        ], ['reload']);
      });
      gulp.task('reload', function() {
        gulp.src(options.app + '**')
          .pipe(connect.reload());
      });

This is the code necessary for the live-reload to work. These tasks are normally different for each project:

  • An appropriate folders and/or files list should be provided in the watch task.
  • Root location, live-reload and proxy settings could be customized when necessary.

Add more modules

Many additional Gulp modules are available. Here’s a list of the most popular packages:

Let’s see an example:

Compile SASS files automatically »