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是针对于写事件.那么这下就好办了.递归循环即可

最终代码

"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) 

});