How to integrate es6 with gulp-develop-server

Question

I am trying to transfer an old node-express project over to be able to use es6. I have seen many posts about using gulp with es6. Most of them discuss using a syntax like this:

const gulp = require("gulp");
const babel = require("gulp-babel");

gulp.src('./index.js')
  .pipe(
    babel({
      presets: [
        ["@babel/env", { modules: false }],
      ],
    })
  )

However my existing project's gulpfile does't use gulp.src at all. Instead, it uses gulp-develop-server. The gulpfile looks like this:

const gulp = require("gulp");
const devServer = require("gulp-develop-server");
const spawn = require("child_process").spawn;
const fs = require("fs");

const basedir = ".";

function serverRestart(done) {
  // perform some cleanup code here
  devServer.restart();
  done();
}

function serverStart() {
  devServer.listen({
    path: basedir + "/index.js",
  });
}

function serverWatch() {
  serverStart();
  gulp.watch(
    [
      basedir + "/paths/**/*",
      // more directories to watch
    ],
    serverRestart
  );
}

function reload(done) {
  serverWatch();
  done();
}

function defaultTask() {
  let p;
  gulp.watch(["gulpfile.js"], killProcess);
  spawnChild();
  function killProcess(e) {
    if (p && !p.killed) {
      devServer.kill();
      p.kill("SIGINT");
      spawnChild();
    }
  }
  function spawnChild() {
    p = spawn("gulp", ["reload"], { stdio: "inherit" });
  }
}

process.stdin.resume();
process.on("exit", handleExit.bind(null, { cleanup: true }));
process.on("SIGINT", handleExit.bind(null, { exit: true }));
process.on("uncaughtException", handleExit.bind(null, { exit: true }));

function handleExit(options, err) {
  // perform some cleanup code here

  if (options.cleanup) {
    devServer.kill();
  }
  if (err) {
    console.log(err.stack);
  }
  if (options.exit) {
    process.exit();
  }
}

gulp.task("serverRestart", serverRestart);
gulp.task("serverStart", serverStart);
gulp.task("serverWatch", serverWatch);
gulp.task("reload", reload);
gulp.task("default", defaultTask);

The existing flow is important because it executes needed code for setup and cleanup every time I hit save, which runs serverRestart. I've been trying a few different methods based on the other questions which recommended using gulp.src().pipe(), but I havne't had much luck integrating it with the existing pattern which uses gulp-develop-server. I am trying to not have to rewrite the whole gulpfile. Is there a simple way to integrate babel with my existing gulpfile such that I can use es6 in my source code?

Answer 1

There's an example with CoffeeScript in the gulp-develop-server documentation.

Using that as a model, try this:

function serverStart() {
  devServer.listen({
    path: "./dist/index.js",
  });
}

function serverWatch() {
  serverStart();
  gulp.watch(
    [
      basedir + "/paths/**/*",
    ],
    serverRestart
  );
}


function serverRestart() {
  gulp.src('./index.js')
    .pipe(
      babel({
        presets: [
          ["@babel/env", { modules: false }],
        ],
      })
    )
    .pipe( gulp.dest( './dist' ) )
    .pipe( devServer() );
}

Other suggestions

That being said, your existing Gulp file doesn't actually really use Gulp. That is, everything is defined as a function and it doesn't leverage any of Gulp's useful features, like managing task dependencies. This is because (pre-es6), this was a very simple project. The Gulp tasks in that file are an over-elaborate way to watch files and run a server. The same could be done (with less code) using nodemon.

With the introduction of React and more complicated build processes, Gulp seems to have fallen out of favor with the community (and in my personal experience, Gulp was a time sinkhole anyhow).

If the main change you want to make is to use import, you can simply use a more recent Node version. You'll surely run into the error SyntaxError: Cannot use import statement outside a module. Simply rename the file to .mjs and it will work. This provides a way to incrementally migrate files to import syntax. Other features should automatically work (and are all backwards-compatible, anyhow). Once your project is mostly, or all, compliant, you can add "type": "module" to your package.json file, then rename all of your require-style js files to .cjs, and rename all of your .mjs files to .js, or leave them as .mjs. Read more about the rules of mixing CommonJS and Module imports in the Node.js blog post (note that some things may have changed since that article was written).