gulpfile.js: working with gulp 4.0, auto-opens browser

Author: alanconway

gulpfile.js

@@ -4,12 +4,13 @@ const connect = require("gulp-connect");
 const fs = require("fs");
 const generator = require("@antora/site-generator-default");
 const gulp = require("gulp");
+const open = require("gulp-open");
 const yaml = require("yaml-js");
 
 let filename = "dev-site.yml";
 let args = ["--playbook", filename];
 
-gulp.task("build", function(cb) {
+function build(cb) {
   /**
    * Use the '@antora/site-generator-default' node module to build.
    * It's analogous to `$ antora --playbook local-antora-playbook.yml`.
@@ -19,44 +20,36 @@ gulp.task("build", function(cb) {
    * a separate process for each run. So if a build error occurs with the `gulp`
    * command it can be useful to check if it also happens with the CLI command.
    */
-  generator(args, process.env)
-    .then(() => {
-      cb();
-    })
-    .catch(err => {
-      console.log(err);
-      cb();
-    });
-});
+  generator(args, process.env).catch(err => { console.log(err); })
+  connect.reload()
+  cb();
+}
 
-gulp.task("preview", ["build"], function() {
-  /**
-   * Remove the line gulp.src('README.adoc')
-   * This is placeholder code to follow the gulp-connect
-   * example. Could not make it work any other way.
-   */
-  gulp.src("README.adoc").pipe(connect.reload());
-});
-
-gulp.task("watch", function() {
+function watch() {
   let json_content = fs.readFileSync(`${__dirname}/${filename}`, "UTF-8");
   let yaml_content = yaml.load(json_content);
-  let dirs = yaml_content.content.sources.map(source => [
-    `${source.url}/**/**.yml`,
-    `${source.url}/**/**.adoc`,
+  let sources = yaml_content.content.sources.map(source => [
+    `${source.url}/**/*.yml`,
+    `${source.url}/**/*.adoc`,
     `${source.url}/**/**.hbs`
   ]);
-  dirs.push(["dev-site.yml"]);
-  gulp.watch(dirs, ["preview"]);
-});
+  sources.push(["dev-site.yml"]);
+  sources = [].concat.apply([], sources) // Flatten the array
+  gulp.watch(sources, build)
+}
 
-gulp.task("connect", function() {
+function serve() {
   connect.server({
     port: 5353,
     name: "Dev Server",
     livereload: true,
     root: "gh-pages"
   });
-});
+}
+
+function browse() {
+  gulp.src("gh-pages/index.html").pipe(open({uri: 'http://localhost:5353'}))
+}
 
-gulp.task("default", ["connect", "watch", "build"]);
+exports.build = build;
+exports.default = gulp.parallel(serve, watch, browse)