Как да направя тази Gulp задача асинхронна?

Имам задача, която трябва да изпълня, преди да започна следващата задача за преглъщане. Тази задача създава няколко спрайта. Отнема известно време, така че имам нужда от тази задача, за да уведомя gulp кога е готова, за да може да започне следващата задача. Задачите са дефинирани в "gulpfile.js" и задачата за спрайт се нарича "build-sprites.js".

Използвам инструмент за преглъщане, наречен "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
    );
});

build-sprites:

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