What does a .pipe() function return in gulp?

Question

In the following snippet, what will be the input to and output of .pipe(gulpIf('*.css', cssnano())) ?

gulp.task('useref', function(){
  return gulp.src('app/*.html')
    .pipe(useref())
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulpIf('*.css', cssnano()))
    .pipe(gulp.dest('dist'))
}); 

API docs (link) says .pipe(destination) returns a reference to the destination stream for setting up chain, if so .pipe(gulpIf('*.js', uglify())) will return a stream to a minified .js file, how can it be piped to .pipe(gulpIf('*.css', cssnano())) ?

Answer 1

Gulp is just a task runner with a rather simple base functionality. Its power comes from the extensive ecosystem of third-party packages, of which your own snippet is using a minimum of four. And I say four because that's what shows up in your gulpfile.js source code; gulp itself has 13 direct runtime dependencies:

"dependencies": {
    "archy": "^1.0.0",
    "chalk": "^1.0.0",
    "deprecated": "^0.0.1",
    "gulp-util": "^3.0.0",
    "interpret": "^1.0.0",
    "liftoff": "^2.1.0",
    "minimist": "^1.1.0",
    "orchestrator": "^0.3.0",
    "pretty-hrtime": "^1.0.0",
    "semver": "^4.1.0",
    "tildify": "^1.0.0",
    "v8flags": "^2.0.2",
    "vinyl-fs": "^0.3.0"
},

... and a similar number of direct development dependencies.

The streams that gulp passes around are provided by vinyl-fs and do not represent a single file but a virtual file-system.

As about your code, you definitively start only with HTML files:

gulp.src('app/*.html')

... but right after that you execute a third-party package called gulp-useref:

.pipe(useref())

As per its docs:

will parse the build blocks in the HTML, replace them and pass those files through. Assets inside the build blocks will be concatenated and passed through in a stream as well.

In other words, it parses the HTML file to identify/generate asset files and it gets them added to the stream for further processing.