Book Image

Mastering PhoneGap Mobile Application Development

By : Kerri Shotts
Book Image

Mastering PhoneGap Mobile Application Development

By: Kerri Shotts

Overview of this book

PhoneGap is a useful and flexible tool that enables you to create complex hybrid applications for mobile platforms. In addition to the core technology, there is a large and vibrant community that creates third-party plugins that can take your app to the next level. This book will guide you through the process of creating a complex data-driven hybrid mobile application using PhoneGap, web technologies, and third-party plugins. A good foundation is critical, so you will learn how to create a useful workflow to make development easier. From there, the next version of JavaScript (ES6) and the CSS pre-processor SASS are introduced as a way to simplify creating the look of the mobile application. Responsive design techniques are also covered, including the flexbox layout module. As many apps are data-driven, you'll build an application throughout the course of the book that relies upon IndexedDB and SQLite. You'll also download additional content and address how to handle in-app purchases. Furthermore, you’ll build your own customized plugins for your particular use case. When the app is complete, the book will guide you through the steps necessary to submit your app to the Google Play and Apple iTunes stores.
Table of Contents (19 chapters)
Mastering PhoneGap Mobile Application Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Creating your first Gulp configuration file


Gulp tasks are defined by the contents of the project's gulpfile.js file. This is a JavaScript program, so the same skills you have with JavaScript will apply here. Furthermore, it's executed by Node.js, so if you have any Node.js knowledge, you can use it to your advantage.

Tip

This file should be placed in the root directory of your project and must be named gulpfile.js.

The first few lines of your Gulp configuration file will require the Gulp plugins you'll need to complete the tasks. The following lines will then specify how the various tasks need to be performed. For example, a very simple configuration might look as follows:

var gulp = require("gulp");
gulp.task("copy-files", function () {
  gulp.src(["./src/**/*"])
      .pipe(gulp.dest("./build"));
});

This configuration only performs one task: it moves all the files contained within src/ to build/. In many ways, this is the simplest form of a build workflow, but it's a bit too simple for our purposes.

Tip

Note the pattern we used to match all the files. If you need to see the documentation on what patterns are supported, see https://www.npmjs.com/package/glob.

To execute the task, you can execute gulp copy-files. Gulp would then execute the task and copy all the files from src/ to build/.

What makes Gulp so powerful is the concept of task composition. Tasks can depend on any number of other tasks and those tasks can depend on yet more tasks. This makes it easy to create complex workflows out of simpler pieces. Furthermore, each task is asynchronous, so it is possible for many tasks with no shared dependencies to operate in parallel.

Each task, as you can see in the prior code, is comprised of a selection of a series of source files (src()), optionally performing some additional processing on each file (via pipe()) and then writing those files to a destination path (dest()). If no additional processing is specified (as in the prior example), Gulp will simply copy the files that match the wildcard pattern. The beauty of streams, however, is that one can execute any number of transformations before the final data is saved. So, the workflows can become very complex.

Now that you've seen a simple task, let's get into some more complicated tasks in the next section.