Gulp: Grab files from your CDN and add them to your build pipeline
This one is a shorty, but thatβs what it makes it so nice. Imagine that you have only one dependency in your project, which is some third party library your code builds upon, like jQuery. Instead of having the complete dependency management stack on your shoulders, you just want to use that single file.
Usually, you would use a CDN, but you prefer it having it added to your bundle.
With a library called request
, which allows you to fetch files from a webserver
and access the contents in a stream format, you can do the following in Gulp:
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var request = require('request');
var merge = require('merge2');
var concat = require('gulp-concat');
var buffer = require('gulp-buffer');
gulp.task('js', function() {
var jquery = request('http://code.jquery.com/jquery-latest.js') /* 1 */
.pipe(source('jquery.js')); /* 2 */
var main = gulp.src('main.js'); /* 3 */
return merge(jquery, main) /* 4 */
.pipe(buffer()) /* 5 */
.pipe(concat('concat.js'))
.pipe(gulp.dest('dist'));
})
- We request the latest jQuery version from the jQuery CDN. The
request
package allows for streaming. What we get in return is a readable stream. - We create a valid vinyl file object with
vinyl-source-stream
. This makes it compatible with Gulp - Our main file is selected from the file system as usual
- The
merge2
package allows us to combine both streams - The contents of both streams are converted to text buffers
so
gulp-concat
can handle them.
The use case for this might be limited, but itβs good to know that you can pipe any web resource to your build pipeline. Think of assets that are available online, or any data you want to prepare for your static site generator.
The awesome power of streams makes this possible.