javascript - gulp工作流文件产出问题？

Question

gulpfile.js

var gulp = require('gulp');

var cssSprite = require('gulp-css-spritesmith');

//拼接雪碧图
gulp.task('sprites', function () {
    gulp.src('./output/css/*.css')
        .pipe(cssSprite({
            imagepath: './output/imgs/slice/',
            spritedest: './output/imgs/sprite/',
            spritepath: '../imgs/sprite/'
        }))
        .pipe(gulp.dest('./'));
});

//文件移动
gulp.task('moveFile',function(){
    gulp.src('./public/css/*')
        .pipe(gulp.dest('./output/css/'));
    gulp.src('./public/imgs/*/*')
        .pipe(gulp.dest('./output/imgs/'));

})

gulp.task('build',['moveFile','sprites']);

目录结构

示例代码

预期效果是首先将css文件夹和imgs文件夹移动到output文件夹后再生成雪碧图，目前问题是文件成功移动了，但是雪碧图没有生成，必须再执行一次gulp build才生成雪碧图。

Answer 1

看起来 你的 sprites任务应该依赖moveFile任务
有一个相关的问题： https://segmentfault.com/q/1010000003038517

gulp.task(name[, deps], fn)
deps中的任务会在name之前执行，而deps里面的所有任务默认是最大限度的并行执行。

所以不妨题主试试，链接里说的那种，给后序任务加个依赖看看

Answer 2

如果理不清楚前后依赖关系，可以试试gulp-sequence这个插件，就能像grunt一样顺序执行了。当然效率可能会降低

Answer 3

原因是：任务是并行的，互相不依赖，就跟同时发送三个ajax请求一样，你不能确定谁先成功

解决办法：

var gulp = require('gulp');

var cssSprite = require('gulp-css-spritesmith');
//文件移动
gulp.task('moveCSSFile', function () {
    return gulp.src('./public/css/*')
        .pipe(gulp.dest('./output/css/'));
})
gulp.task('moveImgsFile', function () {
    gulp.src('./public/imgs/*/*')
        .pipe(gulp.dest('./output/imgs/'));

})

gulp.task('build', ['moveCssFile','moveImgsFile'], function () {
    gulp.src('./output/css/*.css')
        .pipe(cssSprite({
            imagepath: './output/imgs/slice/',
            spritedest: './output/imgs/sprite/',
            spritepath: '../imgs/sprite/'
        }))
        .pipe(gulp.dest('./'));
});