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)); });