1
У меня есть задача, которую мне нужно выполнить, прежде чем начинать следующую задачу с глотком. Эта задача создает несколько спрайтов. Это займет некоторое время, поэтому мне нужна эта задача, чтобы дать понять gulp, когда это будет сделано, так что следующая задача может начаться. Задачи определены в «gulpfile.js» и задача спрайт называется «наращивание sprites.js».Как сделать задачу Gulp асинхронной?
Я использую инструмент под названием глотка «выполнение последовательности» (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);
};