Как сделать эту задачу Gulp асинхронной?

У меня есть задача, которую мне нужно выполнить, прежде чем начинать следующую задачу gulp. Эта задача создает несколько спрайтов. Это занимает некоторое время, поэтому мне нужно, чтобы эта задача сообщала gulp, когда она будет выполнена, чтобы можно было начать следующую задачу. Задачи определены в файле "gulpfile.js", а задача спрайта называется "build-sprites.js".

Я использую инструмент gulp под названием "run-sequence" (https://www.npmjs.com/package/run-sequence), чтобы упорядочить задачи. По-видимому, нужно либо вернуть поток, либо обещание, либо обратный вызов. Однако я не уверен, как это сделать с этой задачей "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);

};

node.js gulp
person Tim    schedule 03.02.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы уточнить, я предполагаю, что ваша задача называется «build-sprites» в файле с именем «build-sprites.js»? Если это так, вам нужно определить задачу следующим образом:

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
);
person Kevin Hernandez    schedule 03.02.2016