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才生成雪碧图。
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
如果理不清楚前后依赖关系,可以试试gulp-sequence这个插件,就能像grunt一样顺序执行了。当然效率可能会降低