gulp4:你忘了发出异步完成信号了吗?

hyrbngr7  于 2022-12-16  发布在  Gulp
关注(0)|答案(2)|浏览(163)

从gulp 3迁移到4有一些问题。我看过各种帖子,但似乎仍然无法绕过这个错误
[12:17:41]下列任务未完成:serve-build,build,[12:17:41]您是否忘记发出异步完成信号?
已尝试在函数(done){.... done()中添加异步函数()和承诺/返回;}
似乎不能在正确的地方。它似乎停止和建立我的lib和app .js文件,但他们缺少的东西。。特别是tinymce插件。

gulp.task('clean-styles', function(done) {
    var files = [].concat(
        config.temp + '**/*.css',
        config.build + 'styles/**/*.css'
    );
    clean(files, done);
    });

gulp.task('styles', gulp.series('clean-styles', function() {
    log('Compiling Less --> CSS');

    return gulp
        .src(config.less)
        .pipe($.plumber()) // exit gracefully if something fails after this
        .pipe($.less())
    //        .on('error', errorLogger) // more verbose and dupe output. 
    requires emit.
        .pipe($.autoprefixer({browsers: ['last 2 version', '> 5%']}))
        .pipe(gulp.dest(config.temp));
}));

/**
 * Remove all fonts from the build folder
 * @param  {Function} done - callback when complete
 */
gulp.task('clean-fonts', function(done) {
    clean(config.build + 'fonts/**/*.*', done);
});


/**
 * Copy TinyMCE fonts
 * @return {Stream}
 */
gulp.task('fonts-tinymce', function () {
    log('Copying tinymce fonts');

    return gulp
        .src(config.fontsTinyMCE)
        .pipe(gulp.dest(config.build + 'styles/fonts'));
});

/**
 * Copy fonts
 * @return {Stream}
 */
gulp.task('fonts', gulp.series('clean-fonts', 'fonts-bootstrap', 'fonts-tinymce', function () {
    log('Copying fonts');

    return gulp
        .src(config.fonts)
        .pipe(gulp.dest(config.build + 'fonts'));
}));

/**
 * Remove all images from the build folder
 * @param  {Function} done - callback when complete
 */
gulp.task('clean-images', function(done) {
    clean(config.build + 'images/**/*.*', done);
});

/**
 * Compress images
 * @return {Stream}
 */
gulp.task('images', gulp.series('clean-images', function() {
    log('Compressing and copying images');

    return gulp
        .src(config.images)
        .pipe($.imagemin({optimizationLevel: 4}))
        .pipe(gulp.dest(config.build + 'images'));
}));

gulp.task('less-watcher', function() {
    gulp.watch([ config.less ], gulp.series('styles'));
});


/**
 * Optimize all files, move to a build folder,
 * and inject them into the new index.html
 * @return {Stream}
 */
gulp.task('optimize', gulp.series('inject', 'test', function() {
    log('Optimizing the js, css, and html');

    var assets = $.useref.assets({searchPath: './'});
    // Filters are named for the gulp-useref path
    var cssFilter = $.filter('**/*.css');
    var jsAppFilter = $.filter('**/' + config.optimized.app);
    var jslibFilter = $.filter('**/' + config.optimized.lib);

    var templateCache = config.temp + config.templateCache.file;

    return gulp
        .src(config.index)
        .pipe($.plumber())
        .pipe(inject(templateCache, 'templates'))
        .pipe(assets) // Gather all assets from the html with useref
        // Get the css
        .pipe(cssFilter)
        .pipe($.minifyCss())
        .pipe(cssFilter.restore())
        // Get the custom javascript
        .pipe(jsAppFilter)
        .pipe($.ngAnnotate({add: true}))
        .pipe($.uglify())
        .pipe(getHeader())
        .pipe(jsAppFilter.restore())
        // Get the vendor javascript
        .pipe(jslibFilter)
        .pipe($.uglify()) // another option is to override wiredep to use min files
        .pipe(jslibFilter.restore())
        // Take inventory of the file names for future rev numbers
        .pipe($.rev())
        // Apply the concat and file replacement with useref
        .pipe(assets.restore())
        .pipe($.useref())
        // Replace the file names in the html with rev numbers
        .pipe($.revReplace())
        .pipe(gulp.dest(config.build));
}));


/**
 * Build everything
 * This is separate so we can run tests on
 * optimize before handling image or fonts
 */
gulp.task('build', gulp.series('optimize', 'images', 'fonts', function() {
    log('Building everything');

    var msg = {
        title: 'gulp build',
        subtitle: 'Deployed to the build folder',
        message: 'Running `gulp serve-build`'
    };
    del(config.temp);
    log(msg);
    notify(msg);
}));

/**
 * Remove all tinymce fonts from the build folder
 * @param  {Function} done - callback when complete
 */
gulp.task('clean-fonts-tinymce', function (done) {
    clean(config.build + 'styles/fonts/*.*', done);
});


/**
 * serve the build environment
 * --debug-brk or --debug
 * --nosync
 */
gulp.task('serve-build', gulp.series('build', function() {
    serve(false /*isDev*/);
}));
esyap4oy

esyap4oy1#

我有一个有点类似的设置,这应该有助于与错误:

/**
 * serve the build environment
 * --debug-brk or --debug
 * --nosync
 */
gulp.task('serve-build', gulp.series('build', function(done) {
    serve(false /*isDev*/);
    done();
}));

有关异步完成的详细信息,请参阅文档

xu3bshqb

xu3bshqb2#

对于普通的狼吞虎咽任务(例如,构建我的javascript),你有一个很好定义的任务开始和结束。
然而,对于devServer或watch任务这样的开发任务,这些任务是启动的,然后一直运行。错误的原因通常是你启动了任务,当你按下CTRL-C键时,它还在运行,所以gulp没有看到任务完成(因为它没有完成)。
另一种情况是,如果你的代码完成了,但是是异步的,并且你忘了告诉gulp你已经用回调函数完成了,但是我在这里忽略这种情况。
如果你不想在你的无休止的任务(devServer/watch/runRedis/etc)中出现错误,你有两个选择来处理这些类型的任务...

1)撒谎吞下

function myNeverEndingDevTask(done) {
    // start an async process (dev server, watch, etc)
    done(); // we tell gulp we are done, but we aren't really (async process keeps going)
}

在这种情况下,gulp会立即报告Finished: myNeverEndingDevTask,即使任务还没有完成(例如devServer或watch还在运行),但当你按下CTRL + C键时,gulp不会收到错误。

2)手柄CTRL-C

我将使用gulp.watch作为一个例子,但它可以适用于任何永不结束的吞咽任务。
问题是,当我们按下CTRL-C键时,手表仍在运行,而gulp知道它仍在运行,因为我们没有执行上面的选项#1。
所以我们需要处理CTRL-C并告诉gulp我们已经完成了,我们可以通过添加一个SIGINT事件处理程序来清理(如果需要的话)我们永不结束的任务,然后THEN调用done()让gulp知道我们完成了任务。
你可以把它 Package 成一个实用函数比如...

function gulpWatchTidy (paths, opts, task, done) {
    // gulp.watch returns underlying chokidar watcher
    var watcher = gulp.watch(paths, opts, task);
    process.on('SIGINT', function() {
        // chokidar 3 is async and needs .then()
        // chokidar 2 (gulp glob-watcher depends on chokidar2)
        watcher.close(); 
        done();
    });
    return watcher;
}

但不是这样的...

function taskWatchJavascript() {
    var watchOpts = {delay: 1000};
    return gulp.watch('src/**/*.js', watchOpts, taskBuildJavascript);
}

......你这么做......

function taskWatchJavascript(done) {
    var watchOpts = {delay: 1000};
    return gulpWatchTidy ('src/**/*.js', watchOpts, taskBuildJavascript, done);
}

我们的实用函数接受gulp异步回调,并处理SIGINT(CTRL-C)来清理或停止监视器(或其他),然后让gulp知道我们完成了。
然后Did you forget to signal async completion?错误消失了,因为我们清理了永久任务,并让gulp知道它们都完成了。

相关问题