0

Current project handle babel and gulp for task and load a yml config file for paths.

This is the cofing.yml:

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"

This is the gulpfile.babel.js:

'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 => {
        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 => {
                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 => {
                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));
}

In single view this files haven't problems, but, when exute gulp command i have the next error in console:

npm start                                                                                                                                         ✓  1949  10:49:29 

> django-jetpack@1.0.0-b start /Users/jose/Proyectos/django-jetpack
> 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, <parallel>, sass
[10:49:57] Did you forget to signal async completion?

The npminstalled packages are:

"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"
  }

This setting was taked from Zurb Foundation Template and it works fine, so, we think that have to works fine, but isn't.

I don't understand why i have this problem because all task are in series function, sasstask works fine, compile all scss files, javascripttask join all js scripts in main.jsand libraries.jsfiles, so, i think that this task are good defined, but, what happen with the other task?

SalahAdDin
  • 2,023
  • 25
  • 51
  • Possible duplicate of [Gulp error: The following tasks did not complete: Did you forget to signal async completion?](http://stackoverflow.com/questions/36897877/gulp-error-the-following-tasks-did-not-complete-did-you-forget-to-signal-async) – Sven Schoenung Jun 27 '16 at 16:51
  • I don't believe that your solution solve this, i take this configuration from Zurb Foundation Templates: https://github.com/zurb/foundation-zurb-template. This template works fine, my template no. – SalahAdDin Jun 27 '16 at 17:12

1 Answers1

3

From the other answer I already linked:

Since your task could contain asynchronous code you have to signal Gulp when your task has finished executing.

In Gulp 3.x you could get away without doing this. Gulp would just assume that your task is synchronous and that it has finished as soon as your task function returns. Gulp 4.x seems to be stricter in this regard. You have to signal task completion.

You can do that in three ways:

  • Return a Stream.
  • Return a Promise.
  • Call the callback function.

Look at the sass task in the Zurb Foundation Template that you based your code on. It uses the first mechanism to signal async completion: returning a stream.

You've changed that task. It no longer returns a stream. It returns an array. That's why your sass task fails.

So you need return a stream in your sass task. One way to do this would be to merge the different streams into one single stream using merge-stream:

var merge = require('merge-stream');

function sass() {
  var folders = getFolders(themesPath);
  return merge.apply(null, folders.map(folder => {
    return gulp.src(path.join(themesPath, folder, '/**/*.scss'))
               .pipe($.sourcemaps.init())
           //etc...
  }));
}
Community
  • 1
  • 1
Sven Schoenung
  • 30,224
  • 8
  • 65
  • 70