使用 rollup-stream 的 Rollup

与 Browserify 类似，Rollup 是一个打包工具，只有在管道的开始部分时才能自然地融入 gulp。与 Browserify 不同，Rollup 原生不会产生流作为输出，需要被包装才能处于这个位置。rollup-stream 为您做了这件事，产生的输出就像 Browserify 的 bundle() 方法一样——因此，这里的大多数 Browserify 配方也适用于 rollup-stream。

基本用法

// npm install --save-dev gulp @rollup/stream@1 vinyl-source-stream
var gulp = require('gulp');
var rollup = require('rollup-stream');
var source = require('vinyl-source-stream');

gulp.task('rollup', function() {
  return rollup({
      input: './src/main.js'
    })

    // 给文件命名为您想要输出的名称
    .pipe(source('app.js'))

    // 然后正常输出到 ./dist/app.js
    .pipe(gulp.dest('./dist'));
});

带源映射的用法

// npm install --save-dev gulp @rollup/stream@1 gulp-sourcemaps vinyl-source-stream vinyl-buffer
// 可选: npm install --save-dev gulp-rename
var gulp = require('gulp');
var rollup = require('rollup-stream');
var sourcemaps = require('gulp-sourcemaps');
//var rename = require('gulp-rename');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

gulp.task('rollup', function() {
  return rollup({
      input: './src/main.js',
      sourcemap: true,
      format: 'umd'
    })

    // 指向入口文件
    .pipe(source('main.js', './src'))

    // 缓冲输出。大多数 gulp 插件，包括 gulp-sourcemaps，不支持流。
    .pipe(buffer())

    // 告诉 gulp-sourcemaps 加载由 rollup-stream 生成的内联源映射。
    .pipe(sourcemaps.init({loadMaps: true}))

        // 在这里进一步转换代码。

    // 如果您想以与输入文件不同的名称输出，请在此处使用 gulp-rename。
    //.pipe(rename('index.js'))

    // 将源映射写入输出文件旁边。
    .pipe(sourcemaps.write('.'))

    // 正常输出到 ./dist/main.js。
    .pipe(gulp.dest('./dist'));
});