gulp 集成其他基于流的工具

Posted 2020-10-14

1. 流、缓冲、vinyl 文件对象

gulp 的流是虚拟文件对象
包含的属性有

    base 文件名  
    path 文件路径
    content  缓冲、nodejs 流

2. gulp 集成 browserify

browserify 基于文本流，缺少的是base 以及path,可以使用的工具 vinyl-source-stream 

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(‘./‘))
})

3. 转换内容(转换为缓冲)

使用vinyl-buffer 

var browserify = require(‘browserify‘)
var source = require(‘vinyl-source-stream‘)
var buffer = require(‘vinyl-buffer‘)
var uglify = require(‘gulp-uglify‘)
var size = require(‘gulp-size‘)
var gulp = require(‘gulp‘)
 
gulp.task(‘build‘, function() {
  var bundler = browserify(‘./index.js‘)
 
  return bundler.pipe()
    .pipe(source(‘index.js‘))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(size())
    .pipe(gulp.dest(‘dist/‘))
})