title: Signal async completion with Gulp, Babel and config.yml
body: <p>Current project handle babel and gulp for task and load a yml config file for paths.</p>
  
  <p>This is the <code>cofing.yml</code>:</p>
  
  <pre><code>PATHS:
    # Path to source folder
    sources: "jet/static/jet_src"
    # Path to dist folder
    dist: "jet/static/jet"
    # Paths to static assets that aren't images, CSS, or JavaScript
    assets:
      - "jet/static/jet_src/**/*"
      - "!jet/static/jet_src/{img,js,scss,fonts}/**/*"
    # Paths to fonts folder
    fonts:
      - "jet/static/jet_src/fonts/**/*"
      - "node_modules/font-awesome/fonts/**/*"
    # Paths to Sass libraries, which can then be loaded with @import
    sass:
      - "jet/static/jet_src/scss"
      - "jet/static/jet_src/scss/select2"
      - "node_modules/font-awesome/scss/"
      - "node_modules/select2/src/scss/"
      - "node_modules/perfect-scrollbar/src/scss/"
    # Paths to JavaScript libraries, which are compined into one file
    javascript:
      - "jet/static/jet_src/js/!(main).js"
      - "jet/static/jet_src/js/main.js"
      - "jet/static/jet_src/js/!(select2.jet).js"
      - "jet/static/jet_src/js/select2.jet.js"
    libraries:
      - "node_modules/jquery/dist/jquery.js"
      # - "node_modules/jquery-ui/jquery-ui.js"
      - "node_modules/select2/dist/js/select2.full.js"
      - "node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.js"
      - "node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.js"
      - "node_modules/js-cookie/src/js.cookie.js"
  </code></pre>
  
  <p>This is the <code>gulpfile.babel.js</code>:</p>
  
  <pre><code>'use strict';
  
  import plugins  from 'gulp-load-plugins';
  import yargs    from 'yargs';
  import browser  from 'browser-sync';
  import merge    from 'merge-stream';
  import gulp     from 'gulp';
  // import panini   from 'panini';
  import rimraf   from 'rimraf';
  // import sherpa   from 'style-sherpa';
  import yaml     from 'js-yaml';
  import fs       from 'fs';
  import path     from 'path';
  
  // Themes path
  const themesPath = "jet/static/jet_src/scss/themes/";
  
  // Load all Gulp plugins into one variable
  const $ = plugins();
  
  // Check for --production flag
  const PRODUCTION = !!(yargs.argv.production);
  
  // Load settings from settings.yml
  const {COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS} = loadConfig();
  
  function loadConfig() {
      let ymlFile = fs.readFileSync('config.yml', 'utf8');
      return yaml.load(ymlFile);
  }
  
  function getFolders(dir) {
      return fs.readdirSync(dir)
          .filter(function (file) {
              return fs.statSync(path.join(dir, file)).isDirectory();
          });
  }
  
  // Build the "dist" folder by running all of the below tasks
  gulp.task('build', gulp.series(clean, gulp.parallel(sass, javascript, images, fonts)));
  
  // Build the site, run the server, and watch for file changes
  gulp.task('default', gulp.series('build', server, watch));
  
  // Delete the "dist" folder
  // This happens every time a build starts
  function clean(done) {
      rimraf(PATHS.dist, done);
  }
  
  // Compile Sass into CSS
  // In production, the CSS is compressed
  function sass() {
      var folders = getFolders(themesPath);
      return folders.map(folder =&gt; {
          gulp.src(path.join(themesPath, folder, '/**/*.scss'))
              .pipe($.sourcemaps.init())
              .pipe($.sass({
                  includePaths: PATHS.sass
              })
                  .on('error', $.sass.logError))
              .pipe($.autoprefixer({
                  browsers: COMPATIBILITY
              }))
              // Comment in the pipe below to run UnCSS in production
              .pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS)))
              .pipe($.if(PRODUCTION, $.cssnano()))
              .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
              .pipe(gulp.dest(PATHS.dist + '/css/themes/' + folder))
              .pipe(browser.reload({stream: true}));
      });
  }
  
  // Combine JavaScript into one file
  // In production, the file is minified
  function javascript() {
      var js = gulp.src(PATHS.javascript)
          .pipe($.sourcemaps.init())
          .pipe($.babel())
          .pipe($.concat('main.js'))
          .pipe($.if(PRODUCTION, $.uglify()
              .on('error', e =&gt; {
                  console.log(e);
              })
          ))
          .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
          .pipe(gulp.dest(PATHS.dist + '/js'));
  
      var libs = gulp.src(PATHS.libraries)
          .pipe($.sourcemaps.init())
          .pipe($.babel())
          .pipe($.concat('libraries.js'))
          .pipe($.if(PRODUCTION, $.uglify()
              .on('error', e =&gt; {
                  console.log(e);
              })
          ))
          .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
          .pipe(gulp.dest(PATHS.dist + '/js'));
  
      return merge(js, libs);
  }
  
  // Copy images to the "dist" folder
  // In production, the images are compressed
  function images() {
      return gulp.src(PATHS.sources + '/img/**/*')
          .pipe($.if(PRODUCTION, $.imagemin({
              progressive: true
          })))
          .pipe(gulp.dest(PATHS.dist + '/img'));
  }
  
  // Copy fonts to the "dist" folder
  function fonts() {
      return gulp.src(PATHS.fonts)
          .pipe(gulp.dest(PATHS.dist + '/fonts'));
  }
  
  // Start a server with BrowserSync to preview the site in
  function server(done) {
      browser.init({
          server: PATHS.dist, port: PORT
      });
      done();
  }
  
  // Reload the browser with BrowserSync
  function reload(done) {
      browser.reload();
      done();
  }
  
  // Watch for changes to static assets, Sass, and JavaScript
  function watch() {
      gulp.watch(PATHS.sources + '/scss/**/*.scss', sass);
      gulp.watch(PATHS.sources + '/js/**/*.js').on('change', gulp.series(javascript, browser.reload));
      gulp.watch(PATHS.sources + '/img/**/*').on('change', gulp.series(images, browser.reload));
      gulp.watch(PATHS.sources + '/fonts/**/*').on('change', gulp.series(fonts, browser.reload));
  }
  </code></pre>
  
  <p>In single view this files haven't problems, but, when exute <code>gulp</code> command i have the next error in console:</p>
  
  <pre><code>npm start                                                                                                                                         ✓  1949  10:49:29 
  
  &gt; django-jetpack@1.0.0-b start /Users/jose/Proyectos/django-jetpack
  &gt; gulp
  
  [10:49:35] Requiring external module babel-register
  [10:49:40] Using gulpfile ~/Proyectos/django-jetpack/gulpfile.babel.js
  [10:49:40] Starting 'default'...
  [10:49:40] Starting 'build'...
  [10:49:40] Starting 'clean'...
  [10:49:40] Finished 'clean' after 3.23 ms
  [10:49:40] Starting 'sass'...
  [10:49:40] Starting 'javascript'...
  [10:49:40] Starting 'images'...
  [10:49:40] Starting 'fonts'...
  [10:49:46] Finished 'images' after 5.91 s
  [BABEL] Note: The code generator has deoptimised the styling of "/Users/jose/Proyectos/django-jetpack/node_modules/jquery/dist/jquery.js" as it exceeds the max of "100KB".
  [BABEL] Note: The code generator has deoptimised the styling of "/Users/jose/Proyectos/django-jetpack/node_modules/select2/dist/js/select2.full.js" as it exceeds the max of "100KB".
  [10:49:57] Finished 'javascript' after 16 s
  [10:49:57] Finished 'fonts' after 16 s
  [10:49:57] The following tasks did not complete: default, build, &lt;parallel&gt;, sass
  [10:49:57] Did you forget to signal async completion?
  </code></pre>
  
  <p>The <code>npm</code>installed packages are:</p>
  
  <pre><code>"devDependencies": {
      "babel-preset-es2015": "^6.9.0",
      "babel-preset-react": "^6.5.0",
      "babel-register": "^6.9.0",
      "browser-sync": "^2.13.0",
      "font-awesome": "^4.6.3",
      "gulp": "github:gulpjs/gulp#4.0",
      "gulp-autoprefixer": "^3.1.0",
      "gulp-babel": "^6.1.2",
      "gulp-cli": "^1.2.1",
      "gulp-concat": "^2.6.0",
      "gulp-cssnano": "^2.1.2",
      "gulp-extname": "^0.2.2",
      "gulp-if": "^2.0.1",
      "gulp-imagemin": "^3.0.1",
      "gulp-load-plugins": "^1.2.4",
      "gulp-sass": "^2.3.2",
      "gulp-sourcemaps": "^1.6.0",
      "gulp-uglify": "^1.5.3",
      "gulp-uncss": "^1.0.5",
      "jquery": "^3.0.0",
      "js-cookie": "^2.1.2",
      "js-yaml": "^3.6.1",
      "merge-stream": "^1.0.0",
      "node-sass": "^3.8.0",
      "perfect-scrollbar": "^0.6.11",
      "rimraf": "^2.5.2",
      "select2": "^4.0.3",
      "susy": "^2.2.12",
      "yargs": "^4.7.1"
    }
  </code></pre>
  
  <p>This setting was taked from <a href="https://github.com/zurb/foundation-zurb-template" rel="nofollow">Zurb Foundation Template</a> and it works fine, so, we think that have to works fine, but isn't.</p>
  
  <p>I don't understand why i have this problem because all task are in <code>series</code> function, <code>sass</code>task works fine, compile all scss files, <code>javascript</code>task join all js scripts in <code>main.js</code>and <code>libraries.js</code>files, so, i think that this task are good defined, but, what happen with the other task?</p>