如何使这个 Gulp 任务异步？

Question

我有一个任务需要在开始下一个 gulp 任务之前完成。这个任务创建了几个精灵。这需要一段时间，所以我需要这个任务让 gulp 知道它什么时候完成，这样下一个任务就可以开始了。任务在 "gulpfile.js" 中定义，精灵任务称为 "build-sprites.js" em>。

我一直在使用名为 "run-sequence" (https://www.npmjs.com/package/run-sequence) 的 gulp 工具来对任务进行排序。它显然需要返回一个流、一个承诺或一个回调。但是我不确定如何使用这个 "build-sprites.js" 任务来完成这项工作。

gulpfile.js：

// Originally based off https://github.com/greypants/gulp-starter

var gulp = require('./gulp')([
  'build-local-css',
  'build-production-css',
  'build-sass',
  'build-sprites',
  'clean-css-output',
  'clean-image-output',
  'compress-images',
  'merge-assets',
  'rename-css-output',
  'version-assets',
  'watch'
]);

var runSequence = require('run-sequence');

// This runs the default tasks when Gulp is executed.

gulp.task('default', function(callback) {
    runSequence(
        ['clean-css-output', 'build-sprites'],
        'build-sass',
        'build-local-css',
        'rename-css-output',
        'merge-assets',
        'watch',
        callback
    );
});

// This runs task to prepare the assets for production

gulp.task('build-production', function(callback) {
    runSequence(
      'build-production-css',
      'version-assets',
      ['merge-assets', 'compress-images'],
      callback
    );
});

构建精灵：

var gulp = require('gulp');

module.exports = function () {

    var gulp = require('gulp');
    var buffer = require('vinyl-buffer');
    var csso = require('gulp-csso');
    var imagemin = require('gulp-imagemin');
    var merge = require('merge-stream');
    var spritesmith = require('gulp.spritesmith');

/*  ==========================================================================
    Sprite tasks for each folder
    ==========================================================================  */


    /*  Sprite main
        ========================================================================== */ 

        var spriteData = gulp.src('../../WebAppCommon/assets/src/images/sprites/sprite-main/*.png')
            .pipe(spritesmith({
                // Names the sprite's file name
                imgName: 'sprite-main.png',

                // The sprite's image location in the CSS
                imgPath: '//common.xxxx.local/assets/src/images/sprites/sprite-main.png',

                // Names the sprite's CSS file name
                cssName: 'sprite-main.css',

                cssOpts: {
                    cssSelector: function (sprite) {
                        return '.sprite-' + sprite.name;
                    }
                }
            })
        );

        // Pipe image stream through image optimizer and onto disk 
        var imgStream = spriteData.img
            // DEV: We must buffer our stream into a Buffer for `imagemin` 
            .pipe(buffer()).pipe(imagemin()).pipe(gulp.dest('../../WebAppCommon/assets/dist/images/sprites/'));

        // Pipe CSS stream through CSS optimizer and onto disk 
        var cssStream = spriteData.css.pipe(csso()).pipe(gulp.dest('../../WebAppCommon/css/v3/build_dc2css/'));


    /*  Sprite payment types
        ========================================================================== */

        var spriteData = gulp.src('../../WebAppCommon/assets/src/images/sprites/sprite-payment-types/*.png')
            .pipe(spritesmith({
                // Names the sprite's file name
                imgName: 'sprite-payment-types.png',

                // The sprite's image location in the CSS
                imgPath: '//common.xxxx.local/assets/src/images/sprites/sprite-payment-types.png',

                // Names the sprite's CSS file name
                cssName: 'sprite-payment-types.css',

                cssOpts: {
                    cssSelector: function (sprite) {
                        return '.sprite-' + sprite.name;
                    }
                }
            })
        );

        // Pipe image stream through image optimizer and onto disk 
        var imgStream = spriteData.img
            // DEV: We must buffer our stream into a Buffer for `imagemin` 
            .pipe(buffer()).pipe(imagemin()).pipe(gulp.dest('../../WebAppCommon/assets/dist/images/sprites/'));

        // Pipe CSS stream through CSS optimizer and onto disk 
        var cssStream = spriteData.css.pipe(csso()).pipe(gulp.dest('../../WebAppCommon/css/v3/build_dc2css/'));


    /*  Sprite profile design service
        ========================================================================== */

        var spriteData = gulp.src('../../WebAppCommon/assets/src/images/sprites/sprite-profile-design-service/*.png')
            .pipe(spritesmith({
                // Names the sprite's file name
                imgName: 'sprite-profile-design-service.png',

                // The sprite's image location in the CSS
                imgPath: '//common.xxxx.local/assets/src/images/sprites/sprite-profile-design-service.png',

                // Names the sprite's CSS file name
                cssName: 'sprite-profile-design-service.css',

                cssOpts: {
                    cssSelector: function (sprite) {
                        return '.sprite-' + sprite.name;
                    }
                }
            })
        );

        // Pipe image stream through image optimizer and onto disk 
        var imgStream = spriteData.img
            // DEV: We must buffer our stream into a Buffer for `imagemin` 
            .pipe(buffer()).pipe(imagemin()).pipe(gulp.dest('../../WebAppCommon/assets/dist/images/sprites/'));

        // Pipe CSS stream through CSS optimizer and onto disk 
        var cssStream = spriteData.css.pipe(csso()).pipe(gulp.dest('../../WebAppCommon/css/v3/build_dc2css/'));


    /*  Sprite project icons
        ========================================================================== */

        var spriteData = gulp.src('../../WebAppCommon/assets/src/images/sprites/sprite-project-icons/*.png')
            .pipe(spritesmith({
                // Names the sprite's file name
                imgName: 'sprite-project-icons.png',

                // The sprite's image location in the CSS
                imgPath: '//common.xxxx.local/assets/src/images/sprites/sprite-project-icons.png',

                // Names the sprite's CSS file name
                cssName: 'sprite-project-icons.css',

                cssOpts: {
                    cssSelector: function (sprite) {
                        return '.sprite-' + sprite.name;
                    }
                }
            })
        );

        // Pipe image stream through image optimizer and onto disk 
        var imgStream = spriteData.img
            // DEV: We must buffer our stream into a Buffer for `imagemin` 
            .pipe(buffer()).pipe(imagemin()).pipe(gulp.dest('../../WebAppCommon/assets/dist/images/sprites/'));

        // Pipe CSS stream through CSS optimizer and onto disk 
        var cssStream = spriteData.css.pipe(csso()).pipe(gulp.dest('../../WebAppCommon/css/v3/build_dc2css/'));


        // Return a merged stream to handle both `end` events 
        return merge(imgStream, cssStream);

};

Answer 1

为了澄清，我假设您的任务在名为“build-sprites.js”的文件中称为“build-sprites”？如果是这样，您需要像这样定义一个任务：

gulp.task('build-sprites', function(callback) {
   // return a stream somewhere, in whatever this task does.
});

您的 gulpfile.js 也可以只包含在“build-sprites.js”中定义的回调，然后您可以像这样使用它：

var buildSpritesCallback = require('/path/to/build-sprites.js');

//      ...

gulp.task('build-sprites', buildSpritesCallback );

现在，根据run-sequence 工具，您可以按照自己的方式将任务放入数组中并行运行是正确的

['clean-css-output', 'build-sprites'],

在下面的部分。哪个应该起作用。

runSequence(
    ['clean-css-output', 'build-sprites'],  // <--- here
    'build-sass',
    'build-local-css',
    'rename-css-output',
    'merge-assets',
    'watch',
    callback
);