1. vinyl-source-stream
Use conventional text streams at the start of your gulp or vinyl pipelines
vinyl-source-stream
Package: vinyl-source-stream
Created by: hughsk
Last modified: Tue, 07 Nov 2023 05:03:11 GMT
Version: 2.0.0
License: MIT
Downloads: 575,237
Repository: https://github.com/hughsk/vinyl-source-stream

Install

npm install vinyl-source-stream
yarn add vinyl-source-stream

vinyl-source-stream Flattr this!experimental

Use conventional text streams at the start of your
gulp or
vinyl pipelines, making for nicer
interoperability with the existing npm stream ecosystem.

Take, for example, browserify. There are the
gulp-browserify and
gulpify plugins, which you can use in
combination with gulp to get browserify working in your build. Unfortunately,
these plugins come with additional overhead: an extra GitHub repository, npm
module, maintainer, tests, semantics, etc. It's much simpler
in this case to use the original module directly where you can, which is what
vinyl-source-stream handles for you.

Usage

vinyl-source-stream

Our previous example, browserify, has a streaming API for its output bundles
which you can use directly. This module is just a bridge that makes it
simple to use conventional text streams such as this in combination with gulp.
Here's an example of using vinyl-source-stream and browserify, compared to
using gulpify:

 var source = require('vinyl-source-stream')
var streamify = require('gulp-streamify')
var browserify = require('browserify')
var uglify = require('gulp-uglify')
var gulpify = require('gulpify')
var rename = require('gulp-rename')
var gulp = require('gulp')

// using gulpify:
gulp.task('gulpify', function() {
  gulp.src('index.js')
    .pipe(gulpify())
    .pipe(uglify())
    .pipe(rename('bundle.js'))
    .pipe(gulp.dest('./'))
})

// using vinyl-source-stream:
gulp.task('browserify', function() {
  var bundleStream = browserify('./index.js').bundle()

  bundleStream
    .pipe(source('index.js'))
    .pipe(streamify(uglify()))
    .pipe(rename('bundle.js'))
    .pipe(gulp.dest('./'))
})

Not all that different, really! The nice thing here is that you're getting the
up-to-date browserify API and don't have to worry about the plugin's available
functionality. Of course, these same benefits apply for any readable text
stream you can find on npm.

API

stream = sourceStream([filename])

Creates a through stream which takes text as input, and emits a single
vinyl file instance for streams down the pipeline to consume.

filename is a "pretend" filename to use for your file, which some streams
might use to determine various factors such as the final filename of your file.
It should be a string, and though recommended, using this argument is optional.

License

MIT. See LICENSE.md for details.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin