Signal Async-Vervollständigung mit Gulp, Babel und config.yml

Question

Aktuelle Projekt-Handle Babel und Schluck für Aufgabe und laden Sie eine Yml-Config-Datei für Pfade.

Dies ist 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" 

Dies ist 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 Einzelansicht diese Dateien keine Probleme haben, aber, wenn exute gulp Befehl Ich habe den nächsten Fehler in Konsole:

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? 

Die npm installierten Pakete sind:

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

Diese Einstellung von Zurb Foundation Template taked wurde und es funktioniert gut, so, wir denken, dass müssen funktioniert gut, aber ist es nicht.

Ich verstehe nicht, warum ich dieses Problem haben, weil alle Aufgaben in series Funktion sind, arbeitet sass Aufgabe fein, kompilieren alle SCSS Dateien, verbinden sie javascript Aufgabe, alle js Skripte in main.js und libraries.js Dateien, so denke ich, dass diese Aufgabe ist gut definiert, aber was passiert mit der anderen Aufgabe?

Answer 1

Von der anderen Antwort 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.

Blick auf die sass task in the Zurb Foundation Template, die Sie auf Ihrem Code basiert. Es verwendet den ersten Mechanismus, um asynchrone Vervollständigung zu signalisieren: einen Stream zurücksenden.

Sie haben diese Aufgabe geändert. Es gibt keinen Stream mehr zurück. Es gibt ein Array zurück. Deshalb schlägt Ihre sass Aufgabe fehl.

Sie müssen also einen Stream in Ihrer sass Aufgabe zurückgeben. Eine Möglichkeit, dies zu tun wäre, um die verschiedenen Ströme in einen einzigen Strom zu verschmelzen merge-stream mit:

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... 
    })); 
}