Question

在开始下一个gulp任务之前，我需要完成一项任务。此任务会创建多个精灵。这需要一段时间，所以我需要这个任务让gulp知道它什么时候完成，所以下一个任务就可以开始了。任务在“ gulpfile.js ”中定义，精灵任务名为“ build-sprites.js ”

我一直在使用名为“ 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
);

如何让这个Gulp任务异步？

1 个答案: