代码之家  ›  专栏  ›  技术社区  ›  Twirlman

gulp4-任务未完成,忘记发送异步完成信号

  •  1
  • Twirlman  · 技术社区  · 6 年前

    刚刚开始学习Gulp并遵循本系列教程: https://www.youtube.com/watch?v=oRoy1fJbMls&list=PLriKzYyLb28lp0z-OMB5EYh0OHaKe91RV

    它在gulp 3上运行得很好,但是在将npm更新到当前版本之后,它崩溃了,我尝试将gulpfile.js从版本3转换到4,在运行gulp命令之后,出现了以下错误: 以下任务未完成:默认情况下,是否忘记发出异步完成的信号? 我该怎么解决?

    这是我的红色文件:

    const gulp = require('gulp');
    const rename = require('gulp-rename');
    const sass = require('gulp-sass');
    const uglify = require('gulp-uglify');
    const autoprefixer = require('gulp-autoprefixer');
    const sourcemaps = require('gulp-sourcemaps');
    const browserify = require('browserify');
    const babelify = require('babelify');
    const source = require('vinyl-source-stream');
    const buffer = require('vinyl-buffer');
    
    let styleSource = 'src/scss/style.scss';
    let styleDestination = './build/css/';
    let styleWatch = 'src/scss/**/*.scss';
    
    let jsSource = 'main.js';
    let jsFolder = 'src/js/';
    let jsDestination = './build/js/';
    let jsWatch = 'src/js/**/*.js';
    let jsFILES = [jsSource];    
    let htmlWatch = '**/*.html';
    
    /* Converting Sass to CSS */
    gulp.task('styles',function(){
        return gulp.src(styleSource)
            .pipe(sourcemaps.init())
            .pipe(sass({
                errorLogToConsole: true,
                outputStyle: 'compressed'
            }))
            .on('error', console.error.bind(console))
            .pipe(autoprefixer({
                browsers: ['last 2 versions'],
                cascade: false
            }))
            .pipe(rename({suffix:'.min'}))
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(styleDestination));
    });
    
    /* Converting ES6 to Vanilla JS */
    gulp.task('js',function(){
        return jsFILES.map(function(entry){
            return browserify({
                entries: [`${jsFolder}${entry}`]
            })
            .transform(babelify, {presets:['env']})
            .bundle()
            .pipe(source(entry))
            .pipe( rename({extname:'.min.js'}) )
            .pipe(buffer())
            .pipe(sourcemaps.init({loadMaps: true})) 
            .pipe(uglify())
            .pipe(sourcemaps.write('./'))
            .pipe(gulp.dest(jsDestination))
        });
    
    })
    
    // default task to run all tasks
    const compile = gulp.parallel(['styles','js']);
    compile.description = 'Compile all styles and js files';
    
    gulp.task('default', compile);
    
    // watch default
    const watch = gulp.series('default', function(){ // ,'browser-sync'
    // keep running, watching and triggering gulp
        gulp.watch(styleWatch, gulp.parallel('styles')); //, reload
        gulp.watch(jsWatch, gulp.parallel('js')); //, reload
        gulp.watch(htmlWatch);
    });
    watch.description = 'watch all changes in every files and folders';
    gulp.task('watch', watch);
    

    这是我大口喝了之后的错误: enter image description here

    1 回复  |  直到 6 年前
        1
  •  3
  •   Kamil Dzielinski    6 年前

    你的 js 任务返回一个数组,gulp不明白。任务可以返回流或承诺,或者必须调用回调参数来表示完成,如下所示:

    gulp.task('js', function(cb) {
        // Your js task code here
        cb();    
    })
    

    另外,请阅读最新的 gulp4 documentation

    推荐文章