Automate development tasks

Usually we want to run multiple tasks each time we rebuild an application. Rather than running each task individually, they can be set as default tasks.

TABLE OF CONTENTS

1. Introduction to Progressive Web apps

2. Why Progressive Web Apps?

3. Objective of the Project

4. Advantages of Progressive Web App

5. Advantages of PWA over Native Apps

6. Benefits of Progressive Web App

7. Use Cases

8. The Future of PWA

9. Software Requirements

10. Reference

11. REQUIREMENTS GATHERING

12. Introduction to PWA Architectures

13. Introduction to PWA Architectures

14. Using libraries to code service workers

15. Add to Homescreen

16. Push Notifications

17. Payments and Credential Management

18. Recommended patterns for PWAs

19. CLUSTER AND OUTLINE OF PAGES

20. Code Base

21. Serve the app shell from the cache

22. Automate development tasks

23. Creating a package.json

24. Customizing the init process

25. Managing dependency versions

Automate development tasks

Define default tasks

Usually we want to run multiple tasks each time we rebuild an application. Rather than running each task individually, they can be set as default tasks.

Replace TODO 6.1 in gulpfile.js with the following:

gulpfile.js

gulp.task('default', ['minify', 'processCSS']);

Now delete the app/build folder and run the following in the command line (from app/):

gulp

Note that both the minify and processCSS tasks were run with that single command (check that theapp/builddirectory has been created and that app/build/main.js and app/build/main.css are there).

Explanation

Default tasks are run anytime the gulp command is executed.

Set up gulp watch

Even with default tasks, it can become tedious to run tasks each time a file is updated during development. gulp.watch watches files and automatically runs tasks when the corresponding files change.

Replace TODO 6.2 in gulpfile.js with the following:

gulpfile.js

gulp.task('watch', function() {
gulp.watch('styles/*.css', ['processCSS']);
});

Save the file. From app/, run the following in the command line:

gulp watch

Add a comment to app/styles/main.css and save the file. Open app/build/main.css and note the real-time changes in the corresponding build file.

TODO: Now update the watch task in gulpfile.js to watch app/js/main.js and run the minify task anytime the file changes. Test by editing the value of the variable future inapp/js/main.js and noting the real-time change in app/build/main.js. Don't forget to save the file and rerun the watch task.

Explanation

We created a task called watch that watches all CSS files in the styles directory, and all the JS files in the jsdirectory. Any time any of these files changes (and is saved), the corresponding task (processCSS or minify)executes.

Set up BrowserSync

You can also automate the setup of a local testing server.

From app/, run the following in the command line:

npm install browser-sync --save-dev

Replace TODO 6.3a in gulpfile.js with the following:

gulpfile.js

var browserSync = require('browser-sync');

Now replace TODO 6.3b in gulpfile.js with the following:

gulpfile.js

gulp.task('serve', function() {
browserSync.init({
server: '.',
port: 3000
});
});

Save the file. Now run the following in the command line (from app/):

gulp serve

Your browser should open app/ at localhost:3000 (if it doesn't, open the browser and navigate there).

Explanation

The gulp browsersync package starts a local server at the specified directory. In this case we are specifying the target directory as '.', which is the current working directory (app/). We also specify the port as 3000.

Put it all together

Let's combine everything learned so far.

TODO: Change the default tasks from minify and processCSS to serve.

TODO: Update the serve task to the following code:

gulp.task('serve', ['processCSS'], function() {
browserSync.init({
server: '.',
port: 3000
});
gulp.watch('styles/*.css', ['processCSS']).on('change', browserSync.reload);
gulp.watch('*.html').on('change', browserSync.reload);
});

Close the app from the browser and delete app/build/main.css. From app/, run the following in the command line:

gulp

Your browser should open app/ at localhost:3000 (if it doesn't, open the browser and navigate there). Check that the app/build/main.css has been created. Change the color of the blocks in app/styles/main.css and check that the blocks change color in the page.

Explanation

In this example we changed the default task to serve so that it runs when we execute the gulp command. Theserve task has processCSS as a dependent task . This means that the serve task will execute theprocessCSS task before executing itself. Additionally, this task sets a watch on CSS and HTML files. When CSS files are updated, the processCSS task is run again and the server reloads. Likewise, when HTML files are updated (like index.html), the browser page reloads automatically.

Optional : In the serve task, add minify as a dependent task. Also in serve, add a watcher for app/js/main.jsthat executes the minify task and reloads the page whenever the app/js/main.js file changes. Test by deletingapp/build/main.js and re-executing the gulp command. Nowapp/js/main.js should be minified into app/build/main.js and it should update in real time. Confirm this by changing the console log message in app/js/main.js and saving the file - the console should log your new message in the app.

1.9 gulpfile.js

The best way to manage locally installed npm packages is to create a package.json file.

A package.json file offers you a lot of great things:

· It serves as documentation for what packages your project depends on.

· It allows you to specify the versions of a package that your project can use using semantic versioning rules.

· It makes your build reproducible, which means that it's much easier to share with other developers.

At a bare minimum, a package.json must have:

o all lowercase

o one word, no spaces

o dashes and underscores allowed

o in the form of x.x.x

o follows semver spec

For example:

{

"name": "my-awesome-package",

"version": "1.0.0"

}