Generator控制sprity合并

Generator控制sprity合并

gulp-sprity是一个不错的插件.但是有一点问题

1.生成sass与less的时候所有的变量都在一个less/sass里面.不太好控制和引入

解决方案问题一

一开始是打算直接用for of循环读取数组内容然后直接生成的.但是这样会带来一点问题.如果上一次的内容没有生成,立即执行下一次内容生成会导致出现1.的情况..虽然你生成了两个文件.但是两个文件都是一样的内容..

控制异步流程

其根本问题在于异步的流程控制.那么如何控制数组中的异步流程?
其实就是.你想要函数执行第一次后再去执行接下来的.那么这里就可以用Generator来控制
数组是自带了Symbol.iterator 这个Symbol.iterator实际上就是一个Generator
那么就可以写一个函数每次结束后再去next.

如何监听gulp.pipe结束

一开始是打算使用.on(‘end’)事件..结果毛用都没.仔细研究和翻阅文档下.发现unpipe和finish这个事件是可以监听到的.
end是针对于read,finish是针对于写事件.那么这下就好办了.递归循环即可

最终代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
"use strict";
const gulp = require("gulp");
const sass = require("gulp-sass");
const gulpif = require("gulp-if");
const sprity = require("sprity");
const clean = require("gulp-clean");
//const exec=require("children_process").exec;
const sptitesList = require("./files.json");
const cdn="../sprite";
function globalSprites(options,cb) {
options =options|| {
processor: "less",
"style-type": "less",
};
let spritesGen=sptitesList[Symbol.iterator]();
sprityPromise(spritesGen,options);
}
function sprityPromise(result,options){
let{value,done}=result.next();
if(!value){
console.log("合并完成")
return false;
}
console.log("开始合并:",value);
let i= value;
options['src']=`dev/slice/${i}/**/*.{png,jpg}`;
options['style']=`./${i}-sprite.${options.processor}`;
options['name']=`${i}-sprite`;
options['cssPath']=`${cdn}/${i}`;
sprity.src(options)
.pipe(
gulpif("*.png", gulp.dest(`dist/sprite/${i}`), gulp.dest(`dist/${options.processor}/${i}`))
)
.on("finish",()=>{sprityPromise(result,options)})
}
/**
*
* less版本雪碧图合并
*
*/
gulp.task("sprites:less", function (cb) {
globalSprites(null,cb)
});
/**
*
* sass版本雪碧图合并
*
*/
gulp.task("sprites:sass", function (cb) {
let opt={
processor: "sass",
"style-type": "sass",
cssPath: "../sprite"
};
globalSprites(opt,cb)
});
/**
*
* css版本雪碧图合并
*
*/
gulp.task("sprites:css", function (cb) {
let opt={
processor: "css",
"style-type": "css",
cssPath: "../sprite"
};
globalSprites(opt,cb)
});