gulp在前端自动化构建中很是好用,有很是丰富的能够直接拿来使用的plugin,完成咱们平常构建工做。css
可是万事没有十全十美可以彻底知足本身的需求,这时咱们就要本身动手写一个小的函数,用于在gulp stream pipeline中执行咱们想要的动做,好比我有一个需求在build后将gulp-inject插入的assets url修改成laravel的一个helper以便识别不一样的运行环境:若是是staging环境则不要上cdn方便调试,若是是生产环境则将url修改成cdn的url,实现网站快速飞起来的梦想。怎们办呢?前端
一个可行的偷懒方案是使用gulp-through2 plugin,不须要咱们写完整的plugin,而只需关注咱们想要的功能:laravel
https://meanstack.wordpress.com/2015/10/09/write-your-own-gulp-module-with-example-as-image-cache-buster-for-css/gulp
function (file, enc, callback) { var stringData = String(file.contents); //loop for each supported images types for (var i = 0; i < module.exports.supportedImages.length; i++) { //add version of image stringData = cssImageBusterForOneImageType(stringData, module.exports.supportedImages[i]); } var finalBinaryData = new Buffer(stringData, “binary”); file.contents = finalBinaryData; callback(null, file); }
var jsOutputFile = “combined.js”; var jsOutputFolder=”./dest/js” var jsSrc=[“./src/js/**/*.js”]; gulp.task(‘jsconcat’, function () { gulp.src(jsSrc) .pipe(uglifyJs()) .pipe(concat(jsOutputFile, {newLine: ‘ ‘})) .pipe(jshint()) .pipe(through.obj(imagebuster.jsImageBuster)) .pipe(gulp.dest(jsOutputFolder)); });