首页 > gulp工作流文件产出问题?

gulp工作流文件产出问题?

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才生成雪碧图。


原因是:任务是并行的,互相不依赖,就跟同时发送三个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('./'));
});

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


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

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

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

【热门文章】
【热门文章】